1:display:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div2,p,a,span{ 8 9 100px ; 10 height: 100px; 11 } 12 .div2{ 13 /*50px ;*/ 14 /*height: 50px;*/ 15 background-color: #ff4d26; 16 /*display: inline;*/ 17 display: none; 18 } 19 p{ 20 /*50px ;*/ 21 /*height: 50px;*/ 22 background-color: mediumvioletred; 23 } 24 span{ 25 /*50px ;*/ 26 /*height: 50px;*/ 27 background-color: blue; 28 display:inline-block ; 29 } 30 a{ 31 /*50px ;*/ 32 /*height: 50px;*/ 33 background-color: yellow; 34 display:inline-block ; 35 } 36 .outer{ 37 word-spacing: -8px; 38 } 39 </style> 40 </head> 41 <body> 42 43 44 <div class="div2">divvvvvv</div> 45 <p>ppppp</p> 46 47 <div class="outer"> 48 <span>spannnnnnnn</span> 49 <a href="#">aaaa</a> 50 </div> 51 52 </body> 53 </html>
2:border:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1{ 8 200px; 9 height: 200px; 10 /*border: 1px solid red;*/ 11 border: 5px dashed blue; 12 /*border-color: coral;*/ 13 /*border-style: solid;*/ 14 /*border- 5px;*/ 15 border-left-color: crimson; 16 } 17 </style> 18 </head> 19 <body> 20 21 <div class="div1"></div> 22 </body> 23 </html>
3:list lable:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 ol,ul{ 8 list-style: circle; 9 } 10 </style> 11 </head> 12 <body> 13 14 <ol> 15 <li>111</li> 16 <li>222</li> 17 <li>333</li> 18 </ol> 19 20 <ul> 21 <li>111</li> 22 <li>222</li> 23 <li>333</li> 24 </ul> 25 26 <dl> 27 <dt>河北省</dt> 28 <dd>廊坊</dd> 29 <dd>石家庄</dd> 30 <dd>保定</dd> 31 </dl> 32 </body> 33 </html>
4:text attributor:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 text-transform: capitalize; 9 word-spacing: 30px; 10 letter-spacing: 10px; 11 text-indent: 150px; 12 height:100px; 13 background-color: aquamarine; 14 text-align: center; 15 line-height: 100px; 16 } 17 </style> 18 </head> 19 <body> 20 21 22 <div>text attributes 23 <!-- <p>hello</p>--> 24 </div> 25 <div>hello hello hello</div> 26 </body> 27 </html>
5:inner and outer margin:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1{ 8 200px; 9 height: 200px; 10 background-color: coral; 11 border: 20px solid red; 12 padding: 10px; 13 /*padding-left: 10px;*/ 14 /*margin: 10px;*/ 15 16 /*margin: 10px 20px 30px 40px;*/ 17 /*margin: 10px 20px 30px;*/ 18 /*margin: 10px 20px;*/ 19 /*margin-bottom: 10px;*/ 20 margin-top: 30px; 21 } 22 23 24 .div2{ 25 200px; 26 height: 200px; 27 background-color: blue; 28 border: 20px solid pink; 29 padding: 5px; 30 /*margin-top: 10px;*/ 31 } 32 33 .outer{ 34 height: 800px; 35 background-color: cyan; 36 } 37 .outer2{ 38 100px; 39 height: 100px; 40 background-color: firebrick; 41 } 42 body{ 43 border:2px solid blue; 44 margin: 0px; 45 } 46 </style> 47 </head> 48 <body> 49 50 <div class="outer2"></div> 51 <div class="outer">inline 52 <div class="div1">hello div1</div> 53 <div class="div2">hello div2</div> 54 </div> 55 56 57 58 </body> 59 </html>
6:float:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin:0;padding:0; 9 } 10 .container{ 11 border:1px solid red; 12 300px; 13 /*overflow: hidden;*/ 14 } 15 #box1{ 16 background-color:green; 17 float:left; 18 100px; 19 height:100px; 20 } 21 #box2{ 22 background-color:deeppink; 23 float:right; 24 100px; 25 height:100px; 26 } 27 #box3{ 28 background-color:pink; 29 height:40px; 30 } 31 /*better use:*/ 32 .clearfix:after{ 33 content: ''; 34 display: block; 35 clear: both; 36 } 37 38 </style> 39 </head> 40 <body> 41 42 43 <div class="container clearfix"> 44 <div id="box1">box1 float by left</div> 45 <div id="box2">box2 float by right</div> 46 <!-- <div style="clear: both"></div>--> 47 </div> 48 <div id="box3">box3</div> 49 </body> 50 </html>
7:position:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0px; 9 } 10 .div1{ 11 200px; 12 height: 100px; 13 background-color: beige; 14 /*position: static;*/ 15 16 } 17 .div2{ 18 200px; 19 height: 100px; 20 background-color: rebeccapurple; 21 /*position: relative;*/ 22 position: absolute; 23 left: 100px; 24 top: 100px; 25 } 26 .div3{ 27 200px; 28 height: 200px; 29 background-color: green; 30 /*position: relative;*/ 31 /*top: -100px;*/ 32 } 33 .div4{ 34 200px; 35 height: 200px; 36 background-color: yellow; 37 } 38 .outer{ 39 position: relative; 40 } 41 .returnTop{ 42 100px; 43 height: 50px; 44 position: fixed; 45 bottom: 20px; 46 right: 5px; 47 background-color: gray; 48 color: white; 49 text-align: center; 50 line-height: 50px; 51 } 52 53 /*setting requiriment:father level set realtive position while the son level set absolute position. */ 54 55 </style> 56 </head> 57 <body> 58 <div style="height: 200px;background-color: cyan"></div> 59 <!--div.div*4--> 60 <div class="outer"> 61 <div class="div1"></div> 62 <div class="div2"></div> 63 <div class="div3"></div> 64 <div class="div4"></div> 65 </div> 66 67 <div style="height: 2000px;background-color: chocolate "></div> 68 <div class="returnTop">return</div> 69 </body> 70 </html>