After learning about div + css, although there is no technical content, the front-end is still able to test the patience of a person, especially the browser compatibility problem. That's annoying, after reading this afternoon, I really admire what I can do. If I can feel this kind of mentality every day, it will cool. How can I write my notes ,(~ O ~)~ ZZ
Div:
<Html xmlns = "http://www.w3.org/1999/xhtml">Css section:
/* In the latest browser version, the mainstream browsers have very few differences in the form of tables, but this is only for the latest version, not all people use the latest */body {margin: 0px; padding: 0px;/* remove the gaps of each tag on the webpage-text-align: center on the internal and external margins; */font: 12px Arial, al; text-align: center;}/* 1. the height is too small, leading to the following gaps */# container {width: 960px;/* The display size and width cannot be too wide */height: 800px; margin: auto; /* differences occurred when setting the center of the outermost layer container */} # header {width: 100%;} # header # logo {margin-right: 10px; float: left; width: 200px; height: 90px; background: # FF00FF ;}# header # banne R {float: left; width: 600px; height: 90px; background: blue;} # header # tool {/* ff if floating is used, it is normal, rather than ie, to ensure security, all files are separated from the document stream */float: right; width: 140px; height: 90px; background: # a12bbf;/* ie automatically adjusts the height, whereas ff does not, how high it is to be determined will not support the peripheral height, therefore, if you remove the height of the peripheral header, the latest version of ie and Firefox will not be supported, but will occupy the following div */} # header # menu {float: left; width: 100%; background: # aaa; clear: both;/* If the left and right sides are not float blocks, the clear attribute specifies which side of the element does not allow other floating elements. */} # Main {float: left; width: 100%;} # main. leftbox {float: left; width: 750px;} # main. rightbox {float: right; background: red; width: 200px; height: 400px ;}. leftbox. left {float: left; width: 300px; height: 200px; background: yellow ;}. tit {float: left; width: 100%; height: 42px; background: url(logorad.gif) no-repeat right;}/* Note */. content {float: left; width: 298px ;! Important;/* The */width: 298px specially set for ff;/* the new version is equivalent to both of them, and important does not use */height: 158px; /* this value is subtracted from each other. Note that */border: 1px solid # bbb;/* Firefox adds the total width of edges, While ie calculates 2px */}. content li {width: 100%; text-align: left; line-height: 25px ;}. content li a {text-decoration: none; background: url(news.gif) no-repeat 0 center; padding-left: 20px;}/* use css for special effects */: hover {position: relative; top: 1px; color: red;/* relative to yourself 1px */} h3 {line-height: 42px; padding-left: 10px; margin: 0px; width: 100%; height: 42px; background: url(logorad.gif) no-repeat 0 left;/* rounded corner implementation */}. leftbox. right {float: right; width: pixel PX; height: 200px; background: yellow; }# footer {float: left; width: 100%; height: 90px; background: blue ;} ul {background: yellow;/* width: 100%; */margin: 0px; padding: 0px; list-style: none;} li {height: 28px; line-height: 28px;/* font Center Method line height */float: left; width: 80px;} # menu a {color: white ;}# header # menu. tiao {/* vertical line between links */width: 1px; height: 12px; margin-top: 8px; overflow: hidden; background: #000 ;}. nav {float: left; width: 100%; height: 10px; clear: both; overflow: hidden;/* The minimum height specified by ie is 18px, all less than 18 are unique by 18px ff. Therefore, the latest version of ie and ff are hidden in excess of this limit */}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
