目录
1.网页练手--河马牙医
效果图
代码
2.河马牙医布局
效果图
代码
1.网页练手--河马牙医
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="牙疼怎么办，智齿怎么办，拔牙多少钱，
矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔">
<meta name="description" content="有牙齿问题，找河马牙医，儿童口腔，全国儿童口腔在线咨询，
牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题">
<meta name="renderer" content="webkit"/>
<title>河马牙医-口腔健康服务平台</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
body,section{
margin:0;
}
section img{
width: 100%;
vertical-align: top;
}
/*头部*/
#header{
height: 80px;
/*background-color: yellow;*/
}
/*头部版型*/
#header .header-center{
width: 1200px;
height: 80px;
/*background-color: red;*/
margin: 0 auto;
}
/*头部的左边*/
.header-center-left{
float: left;
/*background-color: purple;*/
height: 56px;
margin-top: 12px;
}
/*头部的右边*/
.header-center-right{
float: right;
/*background-color: deepskyblue;*/
width: 450px;
height: 80px;
line-height: 80px;
}
.header-center-right a{
margin-right: 30px;
/*去除下划线*/
text-decoration: none;
color: #409ab6;
font-size: 18px;
}
.header-center-right a span{
vertical-align: middle;
}
.header-center-right a img{
vertical-align: middle;
}
#footer{
height: 30px;
background-color: #346699;
}
#footer .footer-center{
width: 1260px;
height: 30px;
line-height: 30px;
/*background-color: red;*/
margin: 0 auto;
}
#footer .footer-center p{
margin-top: 0;
text-align: right;
}
#footer .footer-center p span{
margin-right: 5px;
font-size: 12px;
color: white;
}
</style>
</head>
<body>
<!--头部-->
<header id="header">
<div class="header-center">
<!--头部左边-->
<div class="header-center-left">
<img src="images/hmlogo.png" alt="">
</div>
<!--头部右边-->
<div class="header-center-right">
<a href="http://www.baidu.com">
<img src="images/home_icon.png" alt="">
<span>首页</span>
</a>
<a href="#">
<img src="images/about_icon.png" alt="">
<span>关于</span>
</a>
<a href="#">
<img src="images/contact_icon.png" alt="">
<span>联系我们</span>
</a>
</div>
</div>
</header>
<!--中间内容-->
<article>
<section>
<img src="images/home1.png">
</section>
<section >
<img src="images/home2.png">
</section>
<section >
<img src="images/home3.png">
</section>
<section >
<img src="images/home4.png">
</section>
<section>
<img src="images/home4.png">
</section>
<section >
<img src="images/home5.png">
</section>
</article>
<!--尾部-->
<footer id="footer">
<div class="footer-center">
<p>
<span>上海康牙网络科技有限公司</span>
<span>沪ICP备15009258号</span>
</p>
</div>
</footer>
</body>
</html>
2.河马牙医布局
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="牙疼怎么办，智齿怎么办，拔牙多少钱，
矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔">
<meta name="description" content="有牙齿问题，找河马牙医，儿童口腔，全国儿童口腔在线咨询，
牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题">
<meta name="renderer" content="webkit"/>
<title>河马牙医-口腔健康服务平台</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body style="margin:0">
<!--头部-->
<header style="height: 80px;background-color: yellow">头部</header>
<!--中间内容-->
<article>
<section style="height: 800px;background-color: purple">内容1</section>
<section style="height: 604px;background-color: green">内容2</section>
<section style="height: 604px;background-color: red">内容3</section>
<section style="height: 597px;background-color: gainsboro">内容4</section>
<section style="height: 604px;background-color: green">内容5</section>
<section style="height: 130px;background-color: deepskyblue">内容6</section>
</article>
<!--尾部-->
<footer style="height: 130px;background-color: yellow">尾部</footer>
</body>
</html>
