First, the complete picture on the right part of the content and the content of the corners of the top portion of the filling
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> <style> .header{ width:960px; height:80px; /*background-color: red;*/ margin: 0 auto; overflow: hidden; padding-top:14px; Sizing-Box : border-Box ; / * here we use the upper margin approach to achieve the logo squeeze down vertically centered object * / / * While the box-sizing property to the header is fixed, would not let him because of changes in the size of the padding * / } .content{ width: 960px; height: 600px; background-color: blue; margin: 0 auto; } .footer{ width: 960px; height: 48px; background-color: yellow; margin: 0 auto ; } .header .logo{ width:748px; height: 47px; background : url ( "Image / netEasyLogo.jpg") NO-REPEAT 0 0 ; / * (0, 0) start laying from the coordinates of the picture, no-repeat is not only a multi-shop This shop * / /*margin-top: 12px;*/ float:left; } .header .links{ height: 42px; width: 150px; /*background-color: red;*/ float:right; } .header .logo a { width:156px; height : 45px ; / * measure that an area, then this one area are hyperlinks * / /*background-color: red;*/ the display : inline-Block ; / * converted into block-level tag inline * / } .header .links a{ Decoration-text : none ; / * remove underline * / font-size: 16px; color:black; height-Line : 45px ; / * here to review the text can not centered, highly consistent use of this property and links it to the box, then do the text is centered in the box * / align = left-text : right ; / * reviewed the right text alignment * / } .content{ width: 960px; height: 600px; } .content .top{ width: 960px; height: 38px; /*background-color: red;*/ background : url ( "Image / wangyi_center.jpg") 0 0 ; / * make this picture the top of this small area all covered * / } .content .bottom{ width: 960px; height: 562px; /*background-color: green;*/ } / * The following two properties is provided, is to both sides of the top portion of the content can use our specified format, we use the cassette nested boxes to demonstrate the background * / .content .top .left{ width:960px; height: 38px; background:url("image/line_left.jpg") no-repeat left 0 ; /*display: inline;*/ } .content .top .left .right{ width:960px; height: 38px; background:url("image/line_left.jpg") no-repeat right 0 ; } .content .top .left .right h3{ color: white; height-Line : 38px ; / * set the row height is to make the text is vertically centered in the top bar * / align = left-text : Center ; / * text horizontally centered, of course, we can also set margin-left to set the left margin, but once the resolution change will lead to deformation of the page * / } .content .bottom .article{ width:638px; height: 562px; background-color: red; float : left ; / * here to fill this float attribute for the job, and the right side of the box also requires the float property, div tag is inside the line, float will not write a separate line * / } .content .bottom .aside{ width : 320px ; / * Here we had written 322, but found written on this image aside 322 will cause an overflow to the following, turned left from there 2px this. * / / * 320 + 638 = 960 + 2 on the right, the reason is that an overflow float property caused reached 962, to fit in it * / height: 562px; /*background-color: green;*/ background:url("image/content_aside.jpg") no-repeat 0; float:right; border-left:2px black solid; } </style> </head> <body> <div class="header"> <div class="logo" > < A the href = "https://www.163.com/" title = "163 free email" > </ A > < A the href = "https://www.126.com/" title = "126 YORK free email " > </ A > < A href =" # " title =" NetEase yeah free email " > </ A > <! - Review the use of a label, title refers to mouse over the hyperlink text will be displayed -> </div> <div class="links"> < A href = "http://www.baidu.com" > Read more </ A > | < A href = "#" > Feedback </ A > </div> </div> <div class="content"> <div class="top"> <div class="left"> < Div class = "right" > < h3 > Welcome to register unlimited capacity NetEase mailbox! E-mail address can sign in with NetEase's product </ h3 > </ div > </div> </div> <div class="bottom"> <div class="article"></div> <div class="aside"></div> </div> </div> <div class="footer"></div> </body> </html>
Third, the source code:
D139_FrameworkeOfNeteasyInterface.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D139_FrameworkeOfNeteasyInterface.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
