HTML HTML5. DOM(Document Object Model) CSS CSS

Size: px

Start display at page:

Download "HTML HTML5. DOM(Document Object Model) CSS CSS"

Carol Boone
5 years ago
Views:

2 HTML HTML5 DOM(Document Object Model) CSS CSS

3 HTML

4 html img jpg png gif

5 <h1>jpg</h1> <img src='images/starbucks_2011.jpg'> <h1>png</h1> <img src='images/starbucks_2011.png'> <h1>gif</h1> <img src='images/funny.gif' class="gif">

6 HTML5

<audio> http://www.w3schools.com/html/html5_audio.asp <audio src="media/harlem_shake.

mp3" controls autoplay loop> </audio> <video> http://www.w3schools.com/html/html5_video.

7 <audio> <audio src="media/harlem_shake.mp3" controls> </audio> <audio src="media/harlem_shake.mp3" controls autoplay loop> </audio> <video> <video src="media/laughing.mp4" controls> </video> <video src="media/laughing.mp4" controls autoplay loop> </video> PS. H.264.mp4

youtube > > html 1 2 3 <h1> youtube </h1>

8 youtube > > html <h1> youtube </h1> <iframe width="560" height="315" src=" frameborder="0" allowfullscreen> </iframe> facebook 2 1 > html <h1> facebook </h1> <div id="fb-root"></div><script>(function(d, s, id) { var js, fjs.

9 DOM(Document Object Model)

10 <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> </title> <link rel="shortcut" content="favicon.ico"> <link rel="stylesheet" content="style.css"> <script src="main.js"> </script> </head> <body> <div class="top"> <div class="logo"> <img src="images/123.jpg" /> </div> <img src="images/ads.jpg" class="ads"/> </div> <div class="top"> <a href=" target="_blank">google.com</a> </div> <div id="footer"> 1 <p> <a href=" target="_blank">yahoo </a> </p> </div> </body> </html>

11 html head body meta sctipt div class= top div class= top div id= footer title link rel= shortcut link rel= stylesheet class= logo div img class= ads text... text 1 img a p text a google.com

12 html head body meta sctipt div class= top div class= top div id= footer title link link rel= shortcut rel= stylesheet div img class= logo class= ads text text... 1 img a p text a google.com

13 CSS

14 CSS CSS

15 CSS css html { : ; div, p{ background-color: #aaaccc; div, table a, span{ background-color: #aaaccc; #mydiv{ width:200px; height:100px;.mydiv2{ background-color: #aaaccc; div.mydiv3{ color: #aaaccc;

16 CSS style tag <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> css </title> </head> <body> <h1 style='text-align:center;'> css </h1> <p style="color:red; font-size:14px;">google Nexus Nexus 5X Nexus 6P </p> </body> </html>

17 CSS <style></style> <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> css style html </title> <style> h1{ text-align:center; p{ </style> </head> color:red; font-size:14px; <body> <h1>css style html </h1> <p>google Nexus Nexus 5X Nexus 6P </p> </body> </html>

18 CSS css html <link> css2.html css style.css <!DOCTYPE html> <html lang="zh-tw"> <head> <meta charset="utf-8"> <title> css.css html </title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>css.css html </h1> <p>google Nexus Nexus 5X Nexus 6P </p> </body> </html> h1{ p{ text-align:center; color:red; font-size:14px;

19 CSS

20 CSS width min-width max-width height min-height max-height color width: 200px; min-width: 100px; // max-width: 500px; // height: 200px; min-height: 100px; // max-height: 500px; // color: #333333; color: blue; color: rgba(12,33,33,0.1); font font: 10pt " ",'Lucida Sans Unicode', Helvetica, Arial, sans-serif; font-size background-color font-size: 10pt; font-size: 10px; font-size: 1.2em; background-color: #333333; background-color:rgba(100,21,100,0.7); background-image background-image: url( background-repeat background-repeat: no-repeat; /* */ background-repeat: repeat-x; /* */ background-repeat: repeat-y; /* */ background background: url( img/123.jpg ) #ccc repeat-x; border border: #cccccc solid 1px; /* */ border-top: #cccccc solid 1px; /* */ border-right: #cccccc solid 1px; /* */ border-bottom: #cccccc solid 1px; /* */ border-left: #cccccc solid 1px; /* */

21 CSS padding margin padding: 10px 5px 3px 20px; padding: 10px 5px; padding: 10px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin: 10px 5px 3px 20px; margin: 10px 5px; margin: 10px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; text-align text-align: center; /* left center right justify( ) */ vertical-align vertical-align: middle; /* top middle bottom */ float clear float: left; /* left right */ float: right; /* left right */ clear: left; /* left right */ clear: right; /* left right */ opacity 0 ~ 1 (0.1, 0.2, 0.3 ) filter for IE alpha(opacity=0) 0~100 display display:none; // display:inline; //

22 CSS box-shadow border-radius box-shadow: 10px 10px 2px 1px #333; box-shadow: x y ; border-radius: 10px; // border-top-left-radius: 10px; // border-top-right-radius: 12px; // border-bottom-right-radius: 30px;// border-bottom-left-radius: 40px; // :hover :active ( ) a{ color: #aaaaaa; a:hover{ color: #333; a{ color: #aaaaaa; a:active{ color: red;

Getting your work online. behance.net cargo collective krop coroflot

Getting your work online. behance.net cargo collective krop coroflot Getting your work online behance.net cargo collective krop coroflot behance online presence behance.net has a free and pro version. The free version is fine for getting internships. Free Version Pros networked