线上培训第九天
网页布局实战
1.首页
实例
<!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/commons.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 网站首页固定部分 头部 --> <div class="header"> <!-- 欢迎信息一 --> <div class="topinfo"> <div class="info"> <p class="left">欢迎访问某某安防消防工程有限公司~</p> <p class="right">咨询电话：020-22043297</p> </div> </div> <!-- 企业海报 及 搜索栏目 --> <div class="logoinfo"> <div class="logo"><img src="image/logo.png"></div> <div class="search"> <input type="text" name="name" placeholder="请输入关键字"> <button>搜索</button> </div> </div> <!-- /*头部菜单栏*/ --> <div class="menu"> <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> <!-- 主体 --> <!-- 1.产品滚动 --> <div class="pro_image"> <img src="image/banner.jpg"> <div class="space1"></div> </div> <hr> <!-- 产品列表 --> <div class="product"> <div class="proinfo"> <h2>产品<img src="/image/proicon.png">中心</h2> <p>局域网远程、外网远程、手机远程、让监控 无处不在</p> </div> <div class="pro_img"> <ul> <li> <a href=""><img src="/image/product.jpg"></a> <a href="">产品应用案例</a> </li> <li><a href=""><img src="/image/product.jpg"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="/image/product.jpg"></a><a href="">产品应用案例</a></li> <li><a href=""><img src="/image/product.jpg"></a><a href="">产品应用案例</a></li> <br> <li><a href=""><img src="/image/product.jpg"></a><a href="">我的产品名称</a></li> <li><a href=""><img src="/image/product.jpg"></a><a href="">我的产品名称</a></li> <li><a href=""><img src="/image/product.jpg"></a><a href="">我的产品名称</a></li> <li><a href=""><img src="/image/product.jpg"></a><a href="">我的产品名称</a></li> </ul> </div> </div> <!-- 广告背景 --> <div class="adv"> <img src="image/ads.jpg"> </div> <div class="content"> <div class="con_img"> <img src="image/make.png"> </div> <div class="con"> <p>企业形象通用成品网站系列预装了网页模块、文章模块、产品模块、图文模块、招聘模块、广告模块等功能，预设了企业简介、企业文化、最新动态、产品展示、经典案例、品牌加盟、人才招聘、联系方式、客户留言等栏目，用户也可根据自己的需要方便调整；企业形象通用成品网站系列采用原创的企业形象宣传广告图片轮播，精心设计制作，符合大多数企业网站的需求，是企业建立形象宣传和产品展示网站的最佳之选...</p> <button>了解更多>>></button> </div> </div> <hr color="#efefef" size="1"> <div class="news"> <div class="new_img"> <img src="image/news.jpg"> </div> <div class="newsinfo"> <ul> <li> <span> <h2>25</h2><p>2010-01</p> </span> <h3>本公司参加第八十届广州商</h3> <p class="small">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span> <h2>25</h2><p>2010-01</p> </span> <h3>本公司参加第八十届广州商</h3> <p class="small">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span> <h2>25</h2><p>2010-01</p> </span> <h3>本公司参加第八十届广州商</h3> <p class="small">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> <li> <span> <h2>25</h2><p>2010-01</p> </span> <h3>本公司参加第八十届广州商</h3> <p class="small">本公司参加第八十届广州商品交易会本公司参加第八十届广州商品交易会</p> </li> </ul> </div> </div> <!-- 网站首页固定部分 尾部 --> <div class="footer"> <div class="links"> <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="">PHP中文网</a></li> </ul> </div> </div> <div class="computerinfo"> <p>CopyRight 2013 All Right Reserved 通用企业模版网站 ICP:xxxxxxxx 网站地图</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.首页样式index.css
实例
.pro_image img{
width: 100%;
vertical-align: top;
background-repeat: no-repeat;
}
.pro_image .space1{
background-color:#696969;
height: 25px;
width: 100%;
opacity: 0.3;
margin-top: -20px;
}
/*产品中心*/
.product{
width: 1140px;
margin: auto;
margin-top: 30px;
}
.product .proinfo{
text-align: center;
background-image: url(../image/title_bg.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.product .proinfo img{
padding: 0 5px;
}
/*产品列表*/
.product .pro_img img{
margin-top: 20px;
width: 260px;
height: 197px;
}
.product .pro_img{
overflow: hidden;
}
.product li {
width: 260px;
height: 282px;
text-align: center;
float: left;
margin: 10px;
}
/*广告背景*/
.adv img{
width: 100%;
vertical-align: top;
}
/*企业内容扼要介绍*/
.content {
width: 1140px;
margin: auto;
overflow: hidden;
}
.content .con_img{
float: left;
margin-top: 35px;
margin-bottom: 35px;
margin-right: 35px;
}
.content .con{
margin-top: 50px;
}
.content .con p{
font-size: 1.1em;
}
.content .con button{
background-color: black;
border: none;
height: 28px;
width: 150px;
color: #fff;
margin-top: 30px;
}
.content .con button:hover{
background-color: coral;;
}
/*新闻*/
.news{
width: 1140px;
margin: auto;
overflow: hidden;
margin-top: 50px;
margin-bottom: 50px;
}
.news .new_img{
float: left;
width: 500px;
height: 350px;
}
.news .newsinfo{
float: left;
margin-left: 50px;
}
.news .newsinfo ul li {
height: 80px;
}
.news .newsinfo li span {
float:left;
width: 60px;
height: 58px;
background-color: black;
margin-right: 30px;
margin-top: 10px;
}
.news .newsinfo li span * {
color: #fff;
text-align: center;
}
.news .newsinfo li{
border-bottom: 1px dotted #333;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3.头部/尾部样式
实例
/*头部 header*/
.header{
width: 100%;
height: 170px;
margin: auto;
}
.header .topinfo{
/*width:1140px;*/
margin: auto;
height: 32px;
background-color:#f2f2f2;
overflow: hidden;
}
.header .topinfo .info p{
line-height: 32px;
font-size: 12px;
color: #505050;
}
.header .topinfo .info .left{
margin-left: 195px;
float: left;
}
.header .topinfo .info .right{
float: right;
margin-right: 195px;
}
/*logo*/
.header .logoinfo{
width:1140px;
margin: auto;
height: 70px;
background-color:#ffffff;
overflow: hidden;
margin-top: 20px;
}
.header .logoinfo .logo{
float: left;
width: 440px;
height: 580px;
}
.header .logoinfo .search{
float: right;
margin: auto;
}
.header .logoinfo .search input{
border: 1px solid #ff6307;
width: 190px;
height: 30px;
margin-top: 10px;
}
.header .logoinfo .search button{
border: 0px;
background-color: #ff6307;
color: #ffffff;
height: 30px;
}
/*头部菜单栏*/
.header .menu{
height: 50px;
background-color: #272822;
}
.header .menu ul{
width: 1140px;
margin: auto;
}
.header .menu ul li{
float: left;
text-align: center;
line-height: 50px;
/*设置li元素内边距*/
padding: 0 40px;
}
/*设置连接元素属性*/
.header .menu ul li a{
color: #fff;
font-size: 1.1em;
}
/*设置li元素伪类，鼠标停留颜色及鼠标头案变化*/
.header .menu ul li:hover{
background-color: #ff6307;
cursor: pointer;
}
/*设置尾部样式*/
.footer{
width: 100%;
background-color: #505050;
height: 42px;
}
.footer .links{
width: 1140px;
margin: auto;
text-align:center;
}
.footer .links ul li {
line-height: 42px;
display:inline;
padding: 0 40px;
}
.footer .links ul li a{
color: #fff;
}
.computerinfo{
width: 100%;
background-color: black;
height: 75px;
text-align: center;
}
.computerinfo p{
font-size: 1.2em;
color: #fff;
line-height: 75px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
4.重置样式
实例
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:link,a:visited,a:active{
color: #505050;
text-decoration: none;
}
a:honver{
text-decoration: none;
color:#f00;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
