代码实例演示：http://111.231.88.20/front/html/0328
以下为网站首页的代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站首页</title> <!-- 引入重置样式表 --> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!-- 引入公用样式表 --> <link rel="stylesheet" type="text/css" href="css/common.css"> <!-- 引入首页样式表 --> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 网站导航 --> <div class="header"> <div class="content"> <a href="" class="logo"><img src="images/logo.png"></a> <div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">关于我们</a></li> <li><a href="">产品展示</a></li> <li><a href="">荣誉资质</a></li> <li><a href="">新闻资讯</a></li> <li><a href="">成功案例</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> </div> <!-- 首页轮播图 --> <div class="banner"> <img src="images/banner.jpg"> </div> <!-- 网站公告 --> <div class="affiche"> <img src="images/zn.png"> <span class="sp1">最新公告：</span> <a href="" class="a1">网站最新公告</a> <span class="sp2">2018-03-29</span> <a href="" class="a2">更多</a> </div> <!-- 商品展示 --> <div class="show"> <div class="warp"> <ul> <li><a href=""> <img src="images/anli.jpg"> <p>案例展示</p> </a> </li> <li><a href=""> <img src="images/anli.jpg"> <p>案例展示</p> </a></li> <li><a href=""> <img src="images/anli.jpg"> <p>案例展示</p> </a></li> <li><a href=""> <img src="images/anli.jpg"> <p>案例展示</p> </a></li> </ul> </div> </div> <!-- 热销商品 --> <div class="hot"> <div class="warp"> <div class="hot1"><img src="images/pri.png"></div> <!-- 使用圣杯布局 --> <div class="hot2"> <div class="main"> <ul> <li> <img src="images/remai.jpg"> <p>热卖商品</p> </li> <li> <img src="images/remai.jpg"> <p>热卖商品</p> </li> <li> <img src="images/remai.jpg"> <p>热卖商品</p> </li> </ul> </div> <div class="left"><img src="images/left.png"></div> <div class="right"><img src="images/right.png"></div> </div> </div> </div> <!-- 网站介绍 --> <div class="introduce"> <div class="top"><img src="images/ab.png"></div> <div class="bottom"> <div class="left"><img src="images/guanyu.jpg"></div> <div class="right"> <h3>介绍标题</h3> <p>介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情介绍详情</p> <a href=""><img src="images/more.png"></a> </div> </div> </div> <!-- 网站页脚 --> <div class="footer"> <div class="warp"> <div class="left"> <div class="ftnav"> <ul> <li><a href="">首页</a></li> <li><a href="">关于我们</a></li> <li><a href="">产品展示</a></li> <li><a href="">荣誉资质</a></li> <li><a href="">新闻资讯</a></li> <li><a href="">成功案例</a></li> <li><a href="">联系我们</a></li> <li><a href="">发展历程</a></li> </ul> </div> <div class="contact"> <ul> <li class="li01">4000-000-000</li> <li class="li02">11111@qq.com</li> <li class="li03">中国浙江衢州</li> </ul> </div> <p>Copyright © 2002-2018 版权所有</p> </div> <div class="right"> <img src="images/ewm.png"> <p>关 注 我 们</p> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为首页的样式表
实例
.banner{
width: 1680px;
height: 577px;
margin: 0 auto;
}
.banner img{
width: 1680px;
height: 577px;
}
.affiche{
width: 1100px;
height: 50px;
margin: 0 auto;
}
.affiche a,.affiche span{
line-height: 50px;
}
.affiche .sp1{
font-weight: bolder;
color: #f00;
}
.affiche .a1{
margin-right: 500px;
}
.affiche .sp2{
font-size: 0.9em;
color: #666;
margin-right: 150px;
}
.affiche a2{
font-size: 0.8em;
}
.show{
background-color: #e6e6e6;
padding: 50px 0;
overflow: hidden;
}
.show .warp{
width: 1100px;
margin: 0 auto;
}
.show .warp ul li{
width: 262px;
height: 316px;
float: left;
margin-right:15px;
}
.show .warp ul li:last-child{
margin-right: 0;
}
.show .warp ul li img{
width: 262px;
height: 262px;
}
.show .warp ul li p{
width: 100%;
height: 53px;
background-color: #333;
font-size: 1.5em;
text-align: center;
line-height: 53px;
color: #fff;
}
.hot{
height: 540px;
background-color: #323232;
}
.hot1{
text-align: center;
padding: 30px 0;
}
.hot .warp{
width: 1100px;
margin: 0 auto;
}
.hot .warp .hot2{
width: 900px;
margin: 0 auto;
overflow:hidden;
padding: 0 100px;
}
.hot .warp .main{
width: 100%;
height: 340px;
float: left;
}
.hot .warp .left{
width: 100px;
height: 340px;
text-align: center;
line-height: 340px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.hot .warp .right{
width: 100px;
height: 340px;
text-align: center;
line-height: 340px;
float: left;
margin-left: -100px;
position: relative;
right: -100px;
}
.hot .warp .main li{
width: 280px;
float: left;
margin-right: 30px;
}
.hot .warp .main li img{
width: 100%;
}
.hot .warp ul li:last-child{
margin-right: 0;
}
.hot .warp .main li p{
width: 280px;
height: 50px;
background-color: #f00;
text-align: center;
line-height: 50px;
font-size: 1.5em;
color: #fff;
margin-top: 3px;
}
.introduce{
width: 1100px;
height: 550px;
margin: 0 auto;
}
.introduce .top{
text-align: center;
padding: 15px 0;
}
.introduce .bottom{
width: 100%;
overflow: hidden;
}
.introduce .left{
margin: 20px;
float: left;
}
.introduce .right{
margin: 20px;
}
.introduce .right h3{
font-size: 1.3em;
color: #f00;
margin-bottom: 10px;
}
.introduce .right p{
text-indent: 2em;
line-height: 1.5em;
margin-bottom: 30px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为公用样式表
实例
/*头部样式*/
.header{
width: 100%;
height:110px;
}
.header .content{
width: 1190px;
height: 100%;
margin: 0 auto;
}
.header .content .logo{
display: block;
width: 330px;
height: 110px;
float: left;
}
.header .content .logo img{
height: 100px;
margin-top: 5px;
}
.nav{
width: 780px;
height: 100%;
float: left;
margin-left: 40px;
}
.nav ul li:first-child{
border-left: 1px solid #ececec;
}
.nav ul li{
width: 110px;
height: 110px;
text-align: center;
line-height: 110px;
float: left;
border-right: 1px solid #ececec;
}
/*设置第一个li的左边框*/
.nav ul li a{
display: block;
width: 110px;
height: 107px;
color: #000;
}
.nav ul li a:hover{
border-bottom: 3px solid #e50000;
}
/*网站页脚样式*/
.footer{
width: 100%;
height: 250px;
background-color: #282828;
border-top: 3px solid #d4a451;
}
.footer .warp{
width: 1100px;
margin: 0 auto;
margin-top: 45px;
}
.footer a{
color: #d9d9d9;
}
.footer .left{
width: 850px;
float: left;
}
.footer .warp .left .ftnav{
overflow: hidden;
}
.footer .warp .left .ftnav ul li{
width: 100px;
float: left;
}
.footer .contact{
height: 80px;
margin-top: 35px;
border-top: 1px solid #484848;
border-bottom: 1px solid #484848;
overflow: hidden;
}
.footer .contact ul li{
width: 230px;
line-height: 80px;
padding-left: 40px;
color: #d9d9d9;
float: left;
}
.footer .contact .li01{
background: url(../images/fo1.png) no-repeat 0 center;
}
.footer .contact .li02{
background: url(../images/fo2.png) no-repeat 0 center;
}
.footer .contact .li03{
background: url(../images/fo3.png) no-repeat 0 center;
}
.footer p{
color: #d9d9d9;
margin-top: 20px;
}
.footer .right{
width: 150px;
float: left;
margin-left: 100px;
text-align: center;
}
.footer .right img{
width: 150px;
border-radius: 5px;
}
.footer .right p{
margin-top: 0;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为重置样式表
实例
/*默认样式重置*/
html{
overflow-y: auto;
overflow-x: hidden;
/*不可出现横向滚动条*/
}
*{
margin: 0;
padding: 0;
/*去除所有元素的默认边距*/
}
body,h1,h2,h3,ul,li,p{
font-family: 'microsoft yehei', Verdana, Arial;
color: #000;
/*设置默认字体和颜色*/
}
p,li,a{
font-size: 15px;
/*设置默认字体大小*/
}
ul,li{
list-style-type: none;
/*去除列表默认样式*/
}
a:link,a:visited,a:active{
color: #000;
text-decoration: none;
/*去除a标签的一些默认样式和设置字体颜色*/
}
a:hover{
text-decoration: none;
color: #f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
联系总结：
通过今天对一个网站首页的模仿，让我认识到，之前学习的知识点有很多只是有印象，在实际使用中，还是会经常忘记，需要上网去查看手册，以后要经常编写一些代码进行熟悉！
还有通过这个模仿实例，让我对于之前学习的一些知识点能更好的在网站实际应用中重新组织使用！对于一个网站的基本结构有了更加详细的了解！
期待下面的课程！！！
