I. css sliding door
Sliding Doors are not a brand new technique. They leverage the layering of background images and allow them to slide over each other to create special effects.
① Layer-3 nesting:
<Style>. btn {width: 100px; background: url (img/btn.png) repeat-x ;}. btnL {background: url (img/btnL.png) no-repeat ;}. btnR {height: 31px; background: url (img/btnR.png) no-repeat right 0 ;} </style> <body> <div class = "btn"> <div class = "btnL"> <div class = "btnR"> Wonderful class </div> </div> </div> </body>
2. Two layers of nesting:
<Style>. btn {width: 200px; background: url (img/btn2.png) no-repeat ;}. btnR {height: 31px; background: url (img/btnR.png) no-repeat right 0 ;} </style> <body> <div class = "btn"> <div class = "btnR"> elegant class </div> </body>
** Highly scalable, with layer-3 nesting
** The expansion requirement is not high. Two layers of nesting are used.
③ Sliding door instance:
<Style type = "text/css"> body, ul, li {margin: 0; padding: 0;} li {list-style: none;} a {text-decoration: none;} body {padding: 50px; background: # 23232f }. nav {height: 35px; background: url (img/navL.png) no-repeat #0f0f14; float: left ;}. navR {background: url (img/navR.png) no-repeat right 0; float: left; padding: 4px 4px 0 3px ;}. nav li {float: left; padding-left: 1px ;}. nav a {background: url (img/btn2.png) no-repeat; float: left ;}. nav span {color: # FFF; background: url (img/btnR.png) no-repeat right 0; font-size: 14px; float: left; height: 31px; line-height: 30px; padding: 0 18px ;}. nav a: hover,. active {background: url (img/hoverA.png) no-repeat }. nav span: hover,. active span {background: url (img/hoverR.png) no-repeat right 0 }</style> <body> <div class = "nav"> <ul class = "navR"> <li> <a href = "hdm1.html"> <span> MiaoV </span> </a> </li> <a href = "hdm2.html"> <span> course </span> </a> </li> <a href = "hdm3.html"> <span> about us </span> </a> </li> <a href = "hdm4.html "class =" active "> <span> Add MiaoV </span> </a> </li> </ul> </div> </body>
Ii. rounded corners
Css3: border-radius: 9px incompatible with ie
Layer-3 Nesting is used to achieve wide and high expansion of the rounded corner Background:
<Style>. box {width: 300px; margin: 30px auto ;}. boxHead {background: url (img2/boxH.png) repeat-x; height: 9px; overflow: hidden ;}. boxHeadL {background: url (img2/boxHL.png) no-repeat ;}. boxHeadR {background: url (img2/boxHR.png) no-repeat right 0; height: 9px ;}. boxFoot {background: url (img2/boxF.png) repeat-x; height: 9px; overflow: hidden ;}. boxFootL {background: url (img2/boxFL.png) no-repeat ;}. boxFootR {background: url (img2/boxFR.png) no-repeat right 0; height: 9px ;}. boxC {border-left: 1px solid # e5e5e5; border-right: 1px solid # e5e5e5 ;} </style> <body> <div class = "box"> <div class = "boxHead"> <div class = "boxHeadL"> <div class = "boxHeadR"> </div> <div class = "boxC"> page content <br/> <br/> page content <br/> </div> <div class = "boxFoot"> <div class = "boxFootL"> <div class = "boxFootR"> </div> </div> </body>
Iii. css genie
CSS Sprites is a processing method for web page image applications. It allows you to include all the sporadic images on a page into a large image.
CSS Sprites is not a new technology. Currently, it has developed very well in Web development. Most companies require front-end engineers to use CSS genie to process images.
Advantages of CSS genie:
① The use of the CSS genie can greatly reduce the number of http requests on the webpage, thus greatly improving the page performance, which is also the biggest advantage of the CSS genie;
② Reduce the image size;
<Style>. box {width: 300px; margin: 30px auto ;}. boxHead ,. boxHeadL ,. boxHeadR ,. boxFoot ,. boxFootL ,. boxFootR {background: url (img2/ico.gif) no-repeat ;}. boxHead ,. boxFoot {height: 9px; overflow: hidden; background-repeat: repeat-x ;}. boxHeadL {background-position: 0-9px ;}. boxHeadR {height: 9px; background-position: right-18px ;}. boxFoot {background-position: 0-27px ;}. boxFootL {background-position: 0-36px ;}. boxFootR {height: 9px; background-position: right-45px ;}. boxC {border-left: 1px solid # e5e5e5; border-right: 1px solid # e5e5e5 ;} </style> <body> <div class = "box"> <div class = "boxHead"> <div class = "boxHeadL"> <div class = "boxHeadR"> </div> <div class = "boxC"> page content <br/> <br/> </div> <div class = "boxFoot"> <div class = "boxFootL"> <div class = "boxFootR"> </div> </div> </body>
Disadvantages of CSS genie:
① Reduce development efficiency;
② Increased maintenance difficulty;