Review
"""
1,Advanced selector:
1) body div Progeny, control the latter, the former is decorated
2) body > div The latter is controlled by descendants, and the former is decorated.
3).d1 ~ .d2 Brothers, control the latter, the front is decorated
4).d1 + .d2 Neighbouring, controlling the latter, the front is decorated
5).d1, .d2, body div Group selector, control multiple
6)div#div.div cross selector
7)div:nth-child(3n - 1) Find the position before matching the selector
8)div:nth-of-type(3n - 1) Match the selector before locating it
9)[id] [class='d1'] [owen^='o'] [owen*='a'] attribute selectors
2,a Four Pseudoclasses
:link initial
:hover Suspension, can be applied to general labels
:active Activation, can be applied to general labels
:visited Visited
3,Basic style
1)Typeface
font: bold 20px/30px 'NSimSun', 'Microsoft YaHei';
color: red;
text-align: center;
2)Background picture
3)Boundary fillet
4)Display mode
inline
inline-block
block
4,Box model
margin + border + padding + content
content: width x height
padding: Upper right lower left
border: 1px solid black; | border-bottom: 1px solid black;
margin: Upper right lower left | margin: 0 auto
5,Floating layout
float: left | right
:after {
content: '';
display: block;
clear: both;
}
6,Other
//Wizard Map: Resource Integration - Reducing io
//Box model layout: padding on padding, then using margin
//Floating Layout: A Row Arrangement is Needed
reset Operation: Clear the default style of the system
"""
w3c website
reset operation
body {
background-color: #eee;
}
html, body, h1, h2, h3, h4, h5, h6, ul, p {
margin: 0;
}
ul {
padding: 0;
list-style: none;
}
a {
color: black;
text-decoration: none;
}
input, img, button {
vertical-align: top;
}
header head
css
.header {
width: 1210px;
height: 100px;
background-color: #fdfcf8;
/*Automatic acquisition of blank areas*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
.header:after {
content: '';
display: block;
clear: both;
}
#site-title a {
display: block;
width: 500px;
height: 100px;
background-color: red;
float: left;
/*Overall Setting of Background Pictures*/
background: url("../img/bg.png") no-repeat 0 -150px;
}
#site-title a:hover {
background-position-y: -250px;
}
.header-form {
/*background-color: pink;*/
float: right;
/*padding is recommended for parent-child top-level distances*/
padding-top: 30px;
}
.header-form input {
/*margin-right: 20px;*/
width: 260px;
height: 30px;
border: 1px solid #ccc;
font-size: 17px;
vertical-align: top;
}
.header-search-btn {
width: 33px;
height: 33px;
border: none;
background-color: #AE4141;
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
cursor: pointer;
}
html
<div class="header">
<h1 id="site-title">
<a href="" title="w3c Online teaching"></a>
</h1>
<form class="header-form" method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button title="search" class="header-search-btn" type="submit">Go</button>
</form>
</div>
nav navigation bar
css
.nav {
width: 1210px;
/*height: 48px;*/
margin: 0 auto;
background: url("../img/bg.png") no-repeat 0 0;
}
.nav:after {
content: '';
display: block;
clear: both;
}
.nav-li {
float: left;
}
.nav-a {
display: block;
height: 48px;
background-image: url("../img/bg.png");
}
.nav-a:hover {
/*y Axis offset is common*/
background-position-y: -48px;
}
.nav-a1 {
width: 155px;
}
.nav-a2 {
width: 157px;
background-position-x: -155px;
}
.nav-a3 {
width: 167px;
background-position-x: calc(-155px - 157px);
}
.nav-a4 {
width: 158px;
background-position-x: calc(-155px - 157px - 167px);
}
.nav-a5 {
width: 101px;
background-position-x: calc(-155px - 157px - 167px - 158px);
}
.nav-a6 {
width: 185px;
background-position-x: calc(-155px - 157px - 167px - 158px - 101px);
}
.nav-a7 {
width: 177px;
background-position-x: calc(-155px - 157px - 167px - 158px - 101px - 185px);
}
html
<ul class="nav">
<li class="nav-li">
<a title="html/css Course" href="" class="nav-a nav-a1"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a2"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a3"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a4"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a5"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a6"></a>
</li>
<li class="nav-li">
<a href="" class="nav-a nav-a7"></a>
</li>
</ul>
Main main body
css
.main {
width: 1210px;
margin: 0 auto;
background-color: white;
}
.main:after {
content: '';
display: block;
clear: both;
}
.main > div {
float: left;
}
.main-left, .main-right, .main-center {
float: left;
/*The biggest of the three*/
height: 1225px;
}
.main-left, .main-right {
width: 178px;
/*background-color: orange;*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-top: 10px;
padding-bottom: 20px;
}
.main-center {
width: 850px;
/*background-color: red;*/
/*height: 500px;*/
}
.main-col h3 {
font: bold 15px/30px 'Arial';
/*background-color: pink;*/
padding-left: 10px;
margin-top: 5px;
}
.main-col a {
display: block;
font: normal 14px/26px 'Microsoft YaHei';
padding-left: 15px;
}
.main-left .main-col a:hover {
background-color: #ccc;
color: white;
}
.main-left .main-col a:active {
background-color: #BD2D30;
}
.main-right .main-col a {
color: #BD2D30;
}
.main-right .main-col a:hover {
background-color: #BD2D30;
color: white;
}
.main-col-title {
padding: 10px 0 0 10px;
}
.main-col-title a {
font-size: 14px;
color: #0479A7;
/*The underline must be close to the text.*/
/*text-decoration: underline;*/
/*The underline effect can also be accomplished by the lower border, and the distance can be accomplished by padding-bottom.*/
/*border-bottom: 1px solid #0479A7;*/
}
.main-col-title a:hover {
/*The underline effect can also be accomplished by the lower border, and the distance can be accomplished by padding-bottom.*/
border-bottom: 1px solid #0479A7;
}
.main-center {
padding: 0 15px;
width: 820px;
}
.main-box {
/*height: 200px;*/
/*background-color: orange;*/
border-bottom: 1px solid #aaa;
}
.main-box:last-of-type {
border-bottom: none;
}
.main-box1 {
text-align: center;
padding: 60px 0 30px;
}
.main-box1 h2 {
line-height: 45px;
}
.main-box1 p {
line-height: 35px;
font-size: 17px;
font-weight: 400;
}
.main-xbox {
padding: 30px 0 30px 120px;
}
.main-xbox h3 {
line-height: 40px;
}
.main-xbox p {
line-height: 30px;
}
.main-box2 {
background: url("../img/icon2.png") no-repeat 0 20px;
}
.main-box3 {
background: url("../img/icon3.png") no-repeat 0 20px;
}
.main-box4 {
background: url("../img/icon4.png") no-repeat 0 20px;
}
.main-box5 {
background: url("../img/icon5.png") no-repeat 0 20px;
}
.main-box5 a {
color: #AE4141;
border-bottom: 1px solid #BD2D30;
}
.main-box5 a:hover {
color: red;
border-bottom: 1px solid red;
}
.main-box8 {
background: url("../img/icon8.png") no-repeat 0 20px;
padding-bottom: 50px;
}
.main-box8:after {
content: '';
display: block;
clear: both;
}
.main-box8 p a {
border-bottom: 1px solid #BD2D30;
margin-right: 20px;
}
.main-box8 p a:hover {
border-bottom: 1px solid red;
}
.mark-ww {
margin-top: 40px;
}
.weibo {
padding: 25px 0 0 55px;
width: 234px;
height: 62px;
float: left;
background-image: url("../img/icon9.png");
}
/*.weibo h5 {*/
/*color: #888;*/
/*}*/
/*.weibo a {*/
/*font-size: 14px;*/
/*border-bottom: 1px solid #BD2D30;*/
/*}*/
/*.weibo a:hover {*/
/*font-size: 14px;*/
/*border-bottom: 1px solid red;*/
/*}*/
.weixin {
padding: 25px 0 0 55px;
width: 242px;
height: 62px;
float: left;
background-image: url("../img/icon10.png");
margin-left: 60px;
}
.mark-ww h5 {
color: #888;
}
.mark-ww a {
font-size: 14px;
border-bottom: 1px solid #BD2D30;
}
.mark-ww a:hover {
font-size: 14px;
border-bottom: 1px solid red;
}
html
<div class="main">
<!--main Left sidebar-->
<div class="main-left">
<div class="main-col">
<h3>HTML Course</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>HTML Course</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>HTML Course</h3>
<ul>
<li>
<a href="">html</a>
</li>
<li>
<a href="">html5</a>
</li>
<li>
<a href="">xhtml</a>
</li>
<li>
<a href="">css</a>
</li>
<li>
<a href="">css3</a>
</li>
<li>
<a href="">tcp/ip</a>
</li>
</ul>
</div>
<h4 class="main-col-title">
<a href="">about W3School</a>
</h4>
<h4 class="main-col-title">
<a href="">Help W3School</a>
</h4>
</div>
<!--main Middle subject-->
<div class="main-center">
<div class="main-box main-box1">
<h2>Leading Web Technical course - All free</h2>
<p>stay W3School，You can find all the website building tutorials you need.</p>
<p>From the foundation HTML reach CSS，Even advanced XML,SQL,JS,PHP and ASP.NET. </p>
<p>
<b>Select the tutorials you need from the menu on the left!</b>
</p>
</div>
<div class="main-box main-xbox main-box2">
<h3>Complete Web Site Technical Reference Manual</h3>
<p>Our reference manual covers all aspects of website technology.</p>
<p>These include W3C Standard technology: HTML,CSS,XML . And other technologies, such as JavaScript,PHP,SQL And so on.</p>
</div>
<div class="main-box main-xbox main-box3">
<h3>On-line Instance Testing Tool</h3>
<p>stay W3School，We provide thousands of examples.</p>
<p>By using our online editor, you can edit these examples and experiment with the code.</p>
</div>
<div class="main-box main-xbox main-box4">
<h3>Quick and understandable learning style</h3>
<p>An inch of time and an inch of gold, therefore, we provide you with fast and easy to understand learning content.</p>
<p>Here, you can get any knowledge you need through an easy-to-understand and convenient mode.</p>
</div>
<div class="main-box main-xbox main-box5">
<h3>Where to start?</h3>
<p>What is a Web What knowledge do builders need to learn?</p>
<p>W3School I will answer this question for you, and become a professional in you. Web Developers can help on the way.</p>
<p>If you are a beginner, please read<<a href="">Preliminary Course on Website Construction</a>>. </p>
<p>If you are a developer, please read<<a href="">Advanced Courses in Website Construction</a>>. </p>
</div>
<div class="main-box main-xbox main-box8">
<h3>W3School Friendship link</h3>
<p>
<a href="">Firefox Chinese community</a>
<a href="">w3ctech</a>
<a href="">WeTest Tencent quality open platform</a>
</p>
<div class="mark-ww">
<div class="weibo">
<h5>Sina micro-blog</h5>
<a href="">W3School Official official</a>
</div>
<div class="weixin">
<h5>Public address</h5>
<a href="">W3School Official Service Number</a>
</div>
</div>
</div>
</div>
<!--main Right sidebar-->
<div class="main-right">
<div class="main-col">
<h3>Reference manual</h3>
<ul>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>Reference manual</h3>
<ul>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
</ul>
</div>
<div class="main-col">
<h3>Reference manual</h3>
<ul>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
<li>
<a href="">html/html5 Label</a>
</li>
</ul>
</div>
</div>
</div>
Footer footer
css
.footer {
width: 1210px;
margin: 0 auto;
text-align: center;
}
.footer-d1 {
padding-top: 14px;
height: 32px;
background-color: #777;
background-image: url("../img/footer.png");
}
.footer-d1 p {
font-size: 14px;
color: #777;
line-height: 24px;
background: url("../img/alert.png") no-repeat 200px;
text-indent: 30px;
}
.footer-d2 p {
font-size: 15px;
color: #777;
line-height: 56px;
text-indent: 30px;
}
.footer-d2 a {
color: #777;
}
.footer-d2 a:hover {
color: black;
text-decoration: underline;
}
.footer-d2 .a5 {
margin-left: 20px;
}
html
<div class="footer">
<div class="footer-d1">
The contents of <p>W3School simplified Chinese version are only used for training and testing, and do not guarantee the correctness of content. The risks associated with using the content of this site are not related to this site. </p>
</div>
<div class="footer-d2">
<p> <a class="a1" href="> Terms of Use </a> and <a class="a2"href="> Privacy Terms </a>. All rights reserved. Sponsor: <a class= "A3" href= "> win win Investment Co., Ltd. </a>. <a class="a4" href=">Mongol ICP 06004630</a> <a class="a5"href=">Advertising magazines</a></p>
</div>
</div>Multi-page jump
css/nav.css
.nav-a.active {
background-position-y: -48px;
}
Home page revision
<a href="w3c website.html" title="w3c Online teaching"></a>
<a title="html/css Course" href="html/h.html" class="nav-a nav-a1"></a>
<a href="html/j.html" class="nav-a nav-a2"></a>
html/h.html
<a href="../w3c website.html" title="w3c Online teaching"></a>
<a title="html/css Course" href="h.html" class="nav-a nav-a1 active"></a>
<a href="j.html" class="nav-a nav-a2"></a>
html/j.html
<a href="../w3c website.html" title="w3c Online teaching"></a>
<a title="html/css Course" href="h.html" class="nav-a nav-a1"></a>
<a href="j.html" class="nav-a nav-a2 active"></a>