标签：public img type before font ges outline alt oct
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>test页面</title> 6 <style type="text/css"> 7 /*关于css3 的两个伪类 ::before ::after*/ 8 .box{ 9 margin: 0 auto; 10 width: 360px; 11 height: 500px; 12 } 13 /*头部*/ 14 .box_head{ 15 margin: 0px auto; 16 width: 260px; 17 height: 140px; 18 background-color: greenyellow; 19 border-radius: 130px 130px 0 0; 20 } 21 .box_head::before{ 22 content:‘‘; 23 display: block; 24 width: 26px; 25 height: 26px; 26 border-radius: 13px; 27 background-color: white; 28 transform: translate(170px,58px); 29 } 30 .box_head::after{ 31 content:‘‘; 32 display: block; 33 width: 26px; 34 height: 26px; 35 border-radius: 13px; 36 background-color: white; 37 transform:translate(65px,33px); 38 } 39 /*中间*/ 40 .box_conten{ 41 margin: 0px auto; 42 margin-top:10px; 43 width: 260px; 44 height: 240px; 45 background-color: greenyellow; 46 border-radius: 0 0 30px 30px; 47 } 48 .box_conten::before{ 49 content:‘‘; 50 display: block; 51 width: 50px; 52 height: 180px; 53 border-radius: 12px; 54 background-color: greenyellow; 55 transform: translate(-70px,20px); 56 } 57 .box_conten::after{ 58 content:‘‘; 59 display: block; 60 width: 50px; 61 height: 180px; 62 border-radius: 12px; 63 background-color:greenyellow; 64 transform:translate(280px,-162px); 65 } 66 /*底部*/ 67 .footer{ 68 margin: 0px auto; 69 width:50px; 70 height: 20px; 71 } 72 .footer::before{ 73 content:‘‘; 74 display: block; 75 width: 50px; 76 height: 135px; 77 border-radius: 0 0 15px 15px; 78 background-color: greenyellow; 79 transform: translate(-51px,-8px); 80 } 81 .footer::after{ 82 content:‘‘; 83 display: block; 84 width: 50px; 85 height: 135px; 86 border-radius: 0 0 15px 15px; 87 background-color: greenyellow; 88 transform: translate(51px,-143px); 89 } 90 </style> 91 </head> 92 <body> 93 <div class="box"> 94 <div class="box_head"></div> 95 <div class="box_conten"></div> 96 <div class="footer"></div> 97 </div> 98 </body> 99 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>test页面</title> 6 <style type="text/css"> 7 div{ 8 margin: 10px auto; 9 width: 500px; 10 height: 200px; 11 background-color: darkgray; 12 text-align: center; 13 line-height: 180px;; 14 } 15 a { 16 position: relative; 17 display: inline-block; 18 outline: none; 19 text-decoration: none; 20 color:#fff; 21 font-size: 30px; 22 margin-right: 50px; 23 } 24 25 /* 大框 */ 26 a:hover::before{ 27 content: "\5B"; 28 left: -15px; 29 color: red; 30 font-weight: 800; 31 display: block; 32 position: absolute; 33 } 34 a:hover::after { 35 content: "\5D"; 36 color: red; 37 font-weight: 800; 38 padding: 0px 5px; 39 40 } 41 </style> 42 </head> 43 <body> 44 <div> 45 <a href="#">ONE A</a><a href="#">TWO B</a> 46 </div> 47 </body> 48 </html>
标签：public img type before font ges outline alt oct
原文地址：http://www.cnblogs.com/xdtx/p/6105273.html
