收藏
批改状态：合格
老师批语：
昨天晚上跟着老师学习了如何仿站，看老师讲课的时候感觉也都可以理解，但是做的时候就一片迷茫。下面的代码也只是按照老师的视频重新打了一遍！
index.html页面内容：
<!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"> <!-- tape为浅灰色的装饰条 --> <div class="tape"> <div class="info"> <p class="left">欢迎访问某某安防消防工程有限公司~</p> <p class="right">咨询电话：020-22043297</p> </div> </div> <!-- logo部分 --> <div class="info"> <div class="logo"><img src="images/logo.png"></div> <div class="search"> <input type="text" name="name" placeholder="请输入搜索关键字"> <button>搜索</button> </div> </div> <!-- 网站导航 --> <div class="menu"> <div class="info"> <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> </div> <!-- 首页Banner图 --> <div class="banner"> <img src="images/banner.jpg" alt="轮播图片"> <!-- 图片下面的装饰条，半透明效果 --> <div class="line"></div> </div> <!-- 产品中心 --> <div class="product"> <!-- 标题 --> <div class="title"> <h2>产品<img src="images/proicon.png" alt="">中心</h2> <p>局域网远程、外网远程、手机远程、让监控 无处不在</p> </div> <!-- 产品列表 --> <ul> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <br> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> <li> <a href=""><img src="images/product.jpg"></a> <a href="">产品应用案例</a> </li> </ul> </div> <!-- 广告展示图片 --> <div class="ads-img"> </div> <!-- 企业简介 --> <div class="make"> <img src="images/make.png"> <div class="refer"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多</button> </div> </div> <hr color="#efefef" size="1"> <!-- 新闻列表 --> <div class="news"> <div class="left"> <img src="images/news.jpg" alt=""> </div> <div class="right"> <ul> <li> <span><h1>25</h1><p>2010-1</p></span> <div> <a class="mainhead" href="">本公司参加第八十届广州商</a> <p class="subhead">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </div> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <div> <a class="mainhead" href="">中科院院士王教授来本公司</a> <p class="subhead">中科院院士王教授来本公司访问调研研中科院院士王教授来本公司访问调研</p> </div> </li> <li> <span><h1>25</h1><p>2010-1</p></span> <div> <a class="mainhead" href="">本公司通过国家科技部高新</a> <p class="subhead">本公司通过国家科技部高新技术企业认证本公司通过国家科技部</p> </div> </li> <li> <span><h1>06</h1><p>2010-1</p></span> <div> <a class="mainhead" href="">某某公司新版网站全新改版</a> <p class="subhead">某某公司新版网站全新改版成功某某公司新版网站全新改版</p> </div> </li> </ul> </div> </div> <!-- 公共底部 --> <div class="footer"> <div class="top"> <ul> <p>友情链接：</p> <li><a href="">阿里云</a></li> <li><a href="">支付宝</a></li> <li><a href="">腾讯QQ</a></li> <li><a href="">百度搜索</a></li> <li><a href="">PHP中文网</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="botton"> <p><span>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</span></p> <p><span>地址：广东省广州市天河区某某沙某某路沙某某路某某号 电话：020-22043297 传真：020-22043297</span></p> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
css下面的common.css文件：
/*公共样式表*/
/*公共头部的样式*/
.header{
width:100%;
height: 170px;
}
/*顶部浅灰色的装饰条设置*/
.header .tape{
height: 28px;
border-top:1px solid #f5f5f5;
border-bottom:1px solid #f5f5f5;
background-color: #fbfbfb;
}
.info {
width:1140px;
margin:auto;
/*BFC:块级格式化上下文
让info可以包括住子元素不让超出;*/
overflow:hidden;
}
/*公司名称部分*/
.header .tape .info .left {
float:left;
}
/*公司电话部分*/
.header .tape .info .right {
float:right;
}
/*logo内容*/
.header .info .logo{
width: 440px
height:88px;
float: left;
}
/*搜索框*/
.header .info .search{
float:right;
height:88px;
margin-right: 100px;
margin-top: 10px;
}
/*搜索框边框*/
.header .info .search input{
width: 210px;
height: 26px;
border: 2px solid coral;
margin:18px 0;
}
/*搜索框button按钮*/
.header .info .search button{
width: 45px;
height: 32px;
background-color: coral;
border:none;
color: white;
margin-left: -40px;
}
/*导航样式-头部菜单*/
.header .menu {
width: 100%;
height: 50px;
background-color: black;
}
.header .menu ul li{
float: left;
line-height: 50px;
padding: 0 40px;
}
/*导航的字体大小和颜色*/
.header .menu ul li a{
font-size: 1.1em;
color: #fff;
}
/*当鼠标悬停到li上后的显示效果*/
.header .menu ul li:hover{
background-color: coral;
/*鼠标上去变为小手形状*/
cursor: pointer;
}
/*公共底部样式表*/
.footer .top {
width: 100%;
height: 40px;
background-color: #3e3e3e;
margin:auto;
}
.footer .top ul{
width: 1140px;
margin:auto;
}
.footer .top ul p{
height: 100%;
color: #fff;
float:left;
line-height: 40px;
}
.footer .top ul li{
float: left;
}
.footer .top ul li a{
height: 100%;
padding: 0 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
.footer .botton{
width:100%;
height: 90px;
background-color: black;
text-align: center;
}
.footer .botton p{
margin: 0 0;
/*padding: 0 0;*/
color: #fff;
line-height: 45px;
text-align: center;
}点击 "运行实例" 按钮查看在线实例
index.css文件：
/*首页样式表*/
.banner {
/*border:1px solid red; 为了测试查看img标签下面的4个像素的空白添加*/
}
.banner img{
width: 100%;
height: 452px;
/*消除img标签下面的4个像素的空白*/
vertical-align: top;
}
/*img图片下面的装饰条*/
.banner .line{
height: 30px;
background-color: #696969;
/*装饰条上移*/
margin-top: -30px;
/*设置装饰条透明度*/
opacity: 0.4;
}
/*产品列表*/
.product {
width:1140px;
margin:auto;
margin-top:30px;
margin-bottom:30px;
/*overflow: 消除浮动影响*/
overflow: hidden;
}
.product .title{
text-align: center;
/*title的长条背景图片*/
background-image: url(../images/title_bg.jpg);
background-repeat: no-repeat;
/*background-position 属性设置背景图像的起始位置。
第一个值是水平位置，第二个值是垂直位置。*/
background-position: 0 0;
}
/*产品中心中间图像的左右距离*/
.product .title img{
padding: 0 5px;
}
/*产品列表样式*/
.product li{
width: 260px;
height: 282px;
text-align: center;
float:left;
margin:10px;
}
/*产品列表中图片样式*/
.product li img{
width: 260px;
height:197px;
/*图片和文字之间的距离*/
margin-bottom: 10px;
}
/*产品列表中鼠标移动到图片上透明度变动*/
.product li img:hover{
opacity: 0.8;
}
/*广告图片：*/
.ads-img{
width: 100%;
height: 412px;
background-image: url(../images/ads.jpg);
background-repeat: no-repeat;
margin-bottom: 50px;
}
/*企业简介的样式*/
.make{
width: 1140px;
margin:auto;
margin-bottom: 50px;
}
.make img{
width: 286px;
height: 177px;
float:left;
margin-right: 50px;
}
.make .refer p{
line-height: 2em;
}
/*了解更多按钮css样式修改*/
.mkae .refer button{
width:130px;
height: 34px
border:none;
background-color: gray;
color: #fff;
}
.mkae .refer button:hover{
background-color: coral;
cursor: pointer;
}
/*新闻列表*/
.news {
width: 1140px;
margin:auto;
margin-top: 50px;
margin-bottom:50px;
overflow: hidden;
}
.news .left{
float: left;
}
.news .left img{
width: 500px;
height: 315px;
}
.news .right{
overflow:hidden;
}
.news .right ul{
margin-left: 50px;
}
.news .right ul li{
height: 60px;
border-bottom:1px dotted #cccccc;;
position: relative;
padding-top:12px;
padding-bottom:12px;
margin:10px 0;
}
.news .right ul li span {
float: left;
width: 60px;
background-color: black;
/*margin-right: 50px;*/
}
.news .right li span * {
color: #fff;
text-align: center;
}
.news .right ul li div {
float: left;
margin-left: 30px;
}
.news .right ul li div a{
font-size: 18px;
}
.news .right ul li div a:hover{
color:#FF5E55;
}
.news .right ul li div p{
color:#999;
}
.news .right ul li {
}点击 "运行实例" 按钮查看在线实例
样式重置的reset.css文件：
/*样式重置CSS文件*/
html{
/*设置页面只允许垂直滚动，不允许水平滚动*/
overflow-y:auto;
overflow-x: hidden;
}
/*清除默认的外边框和内边框，设置字体和颜色*/
body,h1,h2,h3,ul,li,p{
margin: 0;
padding: 0;
font-family: "microsoft yehei",Verdana,Arial;
color: #505050;
}
/*设置字体大小*/
p,li,a{
font-size: 14px;
}
/*清除列表的默认样式*/
ul,li{
list-style-type: none;
}
/*清除a标签链接的样式*/
a:link,a:visited,a:active{
color:#505050;
text-decoration: none;
/*text-decoration 属性规定添加到文本的修饰。
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。*/
}
/*设置鼠标悬停效果*/
a:hover{
text-decoration: nono; /*去掉下划线*/
color:#f00;
}点击 "运行实例" 按钮查看在线实例
做作业中发现自身存在的问题：
1，代码不熟练。
2，网站不知道如何分块。
3，防的样式和网站样式不一致的时候不知道如何修改。
请老师对网站如何布局和网站样式出错这两方面后期能多讲解一下！谢谢！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
