作业总结：自我感觉，还是要多敲多练，有不会的要仔细琢磨，自我感觉css里面的层级要搞清楚，块套块，要分清，理顺，才能做时候不会太混乱！
通过这次作业自己需要注意的有，overflow: hidden; opacity: 0.7; background-repeat: no-repeat; cursor: pointer;
indes.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">
<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="sousuo"><input type="text" name="name" placeholder="搜索"><button>搜索</button></div>
</div>
<!-- 导航栏 -->
<div class="menu">
<!-- ul>li*8>a{} -->
<ul class="info">
<!-- 用info公共样式 -->
<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>
<!-- banner图 -->
<div class="banner">
<img src="images/banner.jpg">
<div class="ban"></div>
</div>
<!-- 产品列表 -->
<div class="product">
<!-- 标题 -->
<div class="biaoti">
<h3>产品 <img src="images/tubiao.png"> 中心</h3>
<p>局域网远程、外网远程、手机远程、让监控 无处不在</p>
</div>
<!-- 产品图列表 -->
<!-- ul>li*8>a+a{产品案例$$} -->
<ul>
<li><a href=""><img src="images/product.jpg"></a>
<a href="">产品案例01</a>
</li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例02</a></li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例03</a></li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例04</a></li>
<br>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例05</a></li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例06</a></li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例07</a></li>
<li><a href=""><img src="images/product.jpg"></a><a href="">产品案例08</a></li>
</ul>
</div>
<!-- 海报广告 -->
<div class="ads-img"></div>
<!-- 做什么的 -->
<div class="make">
<img src="images/make.png">
<div class="wenzi">
<p style="text-indent:2em;">企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p>
<button class="anniu">了解更多</button>
</div>
</div>
<hr>
<!-- 新闻 -->
<div class="news">
<div class="left">
<img src="images/news.jpg" alt="新闻" title="新闻">
</div>
<div class="right">
<ul>
<li>
<span><h3>25</h3><p>2010-1</p></span>
<a href=""><h3>本公司参加第八十届广州商</h3></a>
<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
</li>
<li>
<span><h3>25</h3><p>2010-1</p></span>
<a href=""><h3>本公司参加第八十届广州商</h3></a>
<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
</li>
<li>
<span><h3>25</h3><p>2010-1</p></span>
<a href=""><h3>本公司参加第八十届广州商</h3></a>
<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
</li>
<li>
<span><h3>25</h3><p>2010-1</p></span>
<a href=""><h3>本公司参加第八十届广州商</h3></a>
<p>本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p>
</li>
</ul>
</div>
</div>
<!-- 共用底部 -->
<div class="footer">
<div class="lian">
<ul>
<li><a href="">阿里云</a></li>
<li><a href="">支付宝</a></li>
<li><a href="">腾讯qq</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>
</ul>
</div>
<div class="dibu">
<p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
样式重置代码
/*样式重置*/
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: #323232;
}
p, li, a{
font-style: 15px;
}
ul,li {
list-style-type: none;
}
a:link, a:visited, a:active {
color: #777777;
text-decoration: none;
/*一些修饰*/
}
a:hover {
/*鼠标悬停效果*/
text-decoration: none;
/*下划线去掉*/
color: red;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
公共头部和底部样式
公共样式表*/
/*头部header样式表*/
.header {
width: 100%;
height: 120px;
}
.header .tape {
height: 28px;
border-top: 1px solid #EDEDED;
border-bottom: 1px solid #EDEDED;
/*上面小条的上下边框*/
background-color: #F7F7F7;
}
.info {
width: 1140px;
margin: auto;
/*info的设置是不带父块，可以同时对网站顶部的条，和logo所在的info块进行设置，并同时使用所设置的*/
overflow: hidden;
/*清除浮动的方法*/
}
.header .tape .info .left {
float: left;
margin-top: 4px;
}
.header .tape .info .right {
float: right;
margin-top: 4px;
}
.header .info .logo{
width: 440px;
height: 75px;
float: left;
}
.header .info .logo img{
margin-top: 15px;
}
.header .info .sousuo{
float: right;
height: 75px;
/*右边的块和左边的logo块等高*/
margin-top: 15px;
margin-right: 100px;
}
.header .info .sousuo input {
border:3px solid coral;
width: 200px;
height: 30px;
margin: 15px 0;
}
.header .info .sousuo button {
border:none;
background-color: coral;
color: white;
width: 45px;
height: 35px;
margin-left: -45px;
/*让搜索按钮进去搜索框中*/
}
.menu {
width: 100%;
height: 50px;
background-color: black;
}
.menu .info li{
float: left;
line-height: 50px;
/*行距等于块的高度单行就会居中*/
padding: 0 35px;
/*注意是内边距，不能写成外边距margin*/
}
.menu .info li a{
color: white;
}
.menu .info li:hover{
background-color: coral;
/*鼠标移入背景色变橙色*/
cursor: pointer;
/*鼠标移到背景色区域就变成手*/
}
/*底部公共样式表*/
.footer .lian{
width: 100%;
height: 40px;
background-color: #575757;
margin: auto;
margin-top: 20px;
}
.footer .lian ul{
width: 1140px;
margin: auto;
text-align: center;
}
.footer .lian ul li{
overflow: hidden;
float: left;
}
.lian ul li a {
color: white;
margin:0 40px;
line-height: 40px;
}
.dibu {
width: 100%;
height: 80px;
background-color: black;
/*margin: auto;*/
}
.dibu p{
margin:auto;
width: 1140px;
color: white;
line-height: 80px;
text-align: center;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
主题样式代码
主题内容样式*/
.banner {
/*border:2px solid red;*/
line-height: 1px;
}
.banner img {
width: 100%;
height: 400px;
/*vertical-align: top;*/
/*防止图片下面的白色小白边*/
}
.banner .ban{
height: 30px;
background-color: black;
opacity: 0.2;
/*不透明度*/
margin-top: -30px;
}
/*产品*/
.product {
width: 1140px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
/*上下留点空隙不至于挨得太近*/
overflow: hidden;
}
.product .biaoti {
text-align: center;
background-image: url(../images/bg.jpg);
/*注意文件的所在位置*/
background-repeat: no-repeat;
/*禁止图片重复平铺*/
background-position: 0 0;
/*定位图片*/
}
.product ul li {
/*先设置总共属于列表的大块的宽和高*/
float: left;
width: 260px;
height: 260px;
text-align: center;
margin: 10px;
/*产品与产品之间的间距分开*/
}
.product ul li img{
/*在设置图片在li中的宽和高*/
width: 260px;
height: 190px;
margin-bottom: 10px;
/*让文本和图片间距加宽*/
}
.product ul li img:hover{
opacity: 0.7;
}
/*广告海报*/
.ads-img {
width: 100%;
height: 410px;
background-image: url(../images/ads.jpg);
/*将海报作为一个背景图片载入*/
background-repeat: no-repeat;
/*要记得写图片不重复*/
margin-bottom: 30px;
}
.make {
width: 1140px;
margin:auto;
overflow: hidden;
/*清除块的浮动，让下面的区域正常拼接*/
}
.make img {
width: 286px;
height: 177px;
float: left;
margin-right: 50px;
margin-bottom: 20px;
}
.make .wenzi p{
margin-bottom: 20px;
line-height: 1.5em;
}
.make .wenzi button {
border:none;
width: 130px;
height: 35px;
background-color: #878787;
color: white;
}
.make .wenzi button:hover{
background-color: coral;
cursor: pointer;
/*鼠标移动到区域变手*/
}
hr {
opacity:0.3;
/*更改下划线的透明度*/
}
.news {
width: 1140px;
margin:auto;
margin-top: 20px;
overflow: hidden;
}
.news .left {
float: left;
}
.news .left img {
width: 500px;
height: 325px;
}
.news .right{
overflow: hidden;
/*清除浮动才能让span元素内容靠着右边*/
}
.news .right ul{
height: 315px;
margin: auto;
}
.news .right ul li{
height: 75px;
margin-left: 30px;
border-bottom: 1px dotted #A1A1A1;
margin-top: 10px;
}
.news .right li span {
float: left;
/*span元素是内联元素，浮动后是块，支持宽高*/
width: 60px;
height: 50px;
background-color: black;
margin-right: 20px;
}
.news .right li span *{
color: white;
text-align: center;
}
.news .right li a h3:hover{
color: coral;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
