今天是重新学习html5+css3的第一天,主要内容为照已有网站图片进行搭建。
因为有基础,代码后的要点是根据我自身不足列下的,如果缺漏,欢迎指出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
.header{
width: 100%;
height: 489px;
background-color: red;
}
.header_top{
width: 100%;
height: 142px;
background-color: black;
}
.header_top .inner{
width: 994px;
height: 142px;
/* background-color: red;*/
margin:0 auto;
}
.header_top .inner .logo{
width: 451px;
height: 142px;
background-color: blue;
float:left;
}
.header_top .inner h1{
width: 451px;
height: 142px;
background-image: url(images/logo_02.png);
}
.header_top .inner h1 a{
display: block;
width: 451px;
height: 142px;
text-indent: -1000px;
}
.header_top .inner .nav{
width: 480px;
height: 142px;
float: right;
}
.header_top .inner .nav ul li{
height: 142px;
list-style: none;
float:left;
font-size: 12px;
line-height: 142px;
margin-right: 29px;
}
.header_top .inner .nav ul li a{
text-decoration: none;
color:#7f7f7f;
}
.header_top .inner .nav ul li .active{
color:#cb2700;
}
.header_bot{
width: 100%;
height: 349px;
background-image: url(images/header_bot_bg_02.png);
}
.header_bot .inner{
width: 966px;
height: 283px;
/*background-color: red;*/
margin:0 auto;
/* 容器和内容之间的间距 加了padding后 增加了网页中实际占位,故减少自身*/
padding-top: 65px;
padding-left: 29px;
position: relative;
}
.header_bot .inner h3{
color:white;
font-size: 24px;
margin-bottom: 17px;
}
.header_bot .inner p{
width: 588px;
color: #7f7f7f;
line-height: 25px;
margin-bottom: 21px;
}
.header_bot .inner p a{
color:#cb2800;
}
.header_bot .inner .more{
/*因为是按钮 得让a标签变为块元素*/
display: block;
width: 106px;
height: 41px;
background-image: url(images/more_bg_03.png);
color:white;
text-decoration: none;
line-height: 41px;
text-align: center;
font-size: 20px;
border-radius:4px;
}
.header_bot .inner img{
position: absolute;
left:654px;
top:-33px;
}
.main{
width: 100%;
height: 897px;
background-image: url(images/main_bg_02.png);
}
.main .inner{
width: 940px;
height: 856px;
margin:0 auto;
background-color: blue;
padding-left: 33px;
padding-top: 41px;
padding-right:25px;
}
.main .inner .top{
width: 940px;
height: 180px;
/*background-color: green;*/
}
.main .inner .top a:not(:first-child){
width: 300px;
height: 180px;
margin-left:15px;
}
.main .inner .top a img{
width: 300px;
height: 180px;
}
.main .inner .left{
width: 620px;
height: 676px;
background-color: orange;
float:left;
}
.main .inner .right{
width: 300px;
height: 676px;
background-color: yellow;
float:right;
}
.footer{
width: 100%;
height: 125px;
background-color: black;
}
</style>
<body>
<div class="header">
<div class="header_top">
<div class="inner">
<div class="logo">
<h1><a href="index.html">EaglesTroop</a></h1>
</div>
<div class="nav">
<ul>
<li><a href="" class="active">About</a></li>
<li><a href="">Foundation</a></li>
<li><a href="">Program</a></li>
<li><a href="">Leaders</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div>
</div>
</div>
<div class="header_bot">
<div class="inner">
<h3>Welcome to Eagles Boy Scount Troops!</h3>
<p>Welcome to Eagles <a href="">Boy Scount Troops!Welcome to</a> Eagles Boy Scount Troops!Welcome to Eagles Boy Scount Troops <a href="">!Welcome to Eagles Boy Scount Troops!</a>Welcome to Eagles Boy Scount Troops!Welcome to Eagles Boy Scount Troops!Welcome to Eagles Boy Scount Troops!</p>
<a href="#" class="more">more</a>
<img src="images/mz_03.png" alt="">
</div>
</div>
</div>
<div class="main">
<div class="inner">
<div class="top">
<a href=""><img src="images/top_bg_01.png" alt=""></a>
<a href=""><img src="images/top_bg_02.png" alt=""></a>
<a href=""><img src="images/top_bg_03.png" alt=""></a>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>