Home > Developer > Web Develop
Macro layout of header, banner, body, footer
1. Importance of Layout order:
From big to small, focus on the largest part, slowly subdivision.
<body>
<nav></nav>
<div id= "banner" ></div>
<div class= "Content" ><!--start-up
</div><!--Content ended-
<footer><!--Footer Start-up
</footer><!--Footer End--
</body>
2.css introduced in external file mode
A page to write multiple CSS is completely unnecessary, the browser is directly the first phase of parsing, divided into multiple files and 1 files effect is the same.
2 of the best within.
Note: If you break into too many CSS files, you will increase the number of server requests and the more requests you have, the slower the response will be.
3. Add CSS to the initial layout
nav{
Background: #ccc;
height:50px;
}
#banner {
Background: #777;
height:700px;
}
4. Design nav, plus CSS effect. In this case, no details such as shadows are processed, so the following layout is completed first.
<nav>
<ul>
<li class= "logo" ><a href= "#" >leo</a></li>
<li><a href= "#" > CV </a></li>
<li><a href= "#" > Works </a></li>
<li><a href= "#" > Articles </a></li>
<li><a href= "#" > Home </a></li>
</ul>
</nav>
CSS code:
Nav ul{
List-style:none;
margin:0;
}
Nav ul li{
Display:inline-block;
line-height:50px;
Float:right;
margin-right:20px;
}
Nav ul Li a{
line-height:50px;
Text-decoration:none;
Display:inline-block;
Height:inherit;
}
Nav ul li.logo{
Float:left;
}
5. Design the banner, give the page the button to set the unified style, and then give the banner page to customize the specific button, not in-depth details, continue to lay down.
<div id= "banner" >
<div class= "inner" >
<p class= "sub-heading" >lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor iididunt ut Labore et dolore magna Aliqua. Ut enim ad min.</p>
<button> Foster Me </button>
<div class= "More" >
More
</div>
</div>
</div>
CSS code:
#banner. inner{
max-width:300px;
Text-align:center;
margin:0 Auto;
position:relative;
top:160px;
}
#banner. Inner h1{
margin:0;
}
button{
Border:none;
Background-color: #333;
Color: #eee;
padding:10px;
}
#banner button{
PADDING:14PX 40px;
}
#banner. Inner. more{
margin-top:245px;
}
. sub-heading{
line-height:30px;
margin:20px;
}
6. Look back at the header to optimize the logo display under Nav
Header Full HTML code:
<nav>
<div class= "logo" ><a href= "#" >leo</a></div>
<ul>
<li><a href= "#" class= "active" > CV </a></li>
<li><a href= "#" > Works </a></li>
<li><a href= "#" > Articles </a></li>
<li><a href= "#" > Home </a></li>
</ul>
</nav>
<div id= "banner" >
<div class= "inner" >
<p class= "sub-heading" >lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Iididun T.</p>
<button> Point Me </button>
<div class= "More" >
More
</div>
</div>
</div>
Header Complete Class Code:
nav{
Background: #ccc;
height:50px;
}
#banner {
Background: #777;
height:700px;
}
Nav ul{
List-style:none;
margin:0;
Float:right;
}
Nav ul Li, nav. logo{
Display:inline-block;
line-height:50px;
margin-right:20px;
}
Nav ul Li a{
line-height:50px;
Text-decoration:none;
Display:inline-block;
Height:inherit;
Color: #fff;
}
Nav ul li.logo{
Float:left;
}
#banner. inner{
max-width:300px;
Text-align:center;
margin:0 Auto;
position:relative;
top:160px;
}
#banner. Inner h1{
margin:0;
}
button{
Border:none;
Background-color: #333;
Color: #eee;
padding:10px;
}
#banner button{
PADDING:14PX 40px;
}
#banner. Inner. more{
margin-top:280px;
}
. sub-heading{
line-height:30px;
margin:20px;
}
. logo{
font-size:20px;
font-weight:700;
letter-spacing:1px;
}
. Logo a{
Color: #fff;
Text-decoration:none;
padding:10px;
}
CSS Flattening Blog Learning Summary (iii) header code implementation
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
