目录
网页优化
HTML部分代码
css部分代码
效果展示
网页优化
1, 抽取css公共样式
2, 制作成模板页(母版页)
目的:减少后期其他页面的代码复制,建议把首页制作完成后,另存为一个模板页,保留相同的部分
3,网页页面分级说明(面试可能会问)
一级页面:首页 新闻和产品的封面页
二级页面:网站中的各种列表页(新闻列表,产品列表)
三级页面:网站中的各种详情页
单页面:没有子页面或者列表页
着陆页:公司宣传的页面
核心代码
HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入样式重置表 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 引入公用样式表 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入自定义样式表 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div id="header">
<div class="top">
<div class="container">
<div class="left">欢迎来到HOUSE家居网!</div>
<div class="right">
<a href="#"><img src="images/tel.png" alt=""> 400-00-000xxx</a>
<a href="#"><img src="images/mail.png" alt="">12345678@qq</a>
</div>
</div>
</div>
<!-- 菜单 -->
<div class="menu">
<div class="container">
<img src="images/logo.png" alt="" class="logo">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="./web template.html">关于我们</a>
<!-- 子菜单 -->
<ul class="submenu">
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</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 id="banner">
<!-- 里面的盒子 -->
<div class="innerbox">
<!-- 标题 -->
<h1>精致生活 简单爱</h1>
<!-- 内容 -->
<p>用细节缔造美好家居,触碰你心中的柔软 给您无微不至的关怀</p>
</div>
</div>
<!-- 特色和产品 -->
<div class="container">
<!-- 特色 -->
<div id="feature">
<!-- 第一个盒子 -->
<div class="div1">
<h3>品质高 经久耐用</h3>
<p>当前家纺市场上的优秀代表,从织造、染色、印花及整理包装的整个流程,我们都做的十分仔细,而且在环保性上,也有很好的表现</p>
</div>
<!-- 第二个盒子 -->
<div class="div2">
<h3>品质高 经久耐用</h3>
<p>公司全体员团结奋进、开拓进取,为创建特色鲜明、质量一流的名牌产品而不懈努力。公司凭借高素质的人才队伍,先进的工艺和一流、完善的企业管理</p>
</div>
<!-- 第三个盒子 -->
<div class="div3">
<h3>先进的工艺技术</h3>
<p>家纺依靠科技进步、倡导绿色消费,让消费者充分体会到品牌文化所带来的无穷魅力,专业致力于功能性家纺,产品有真丝系列、婚庆系列、时尚系列</p>
</div>
</div>
<!-- 产品 -->
<div id="products">
<!-- 标题 -->
<h3 class="productshow">产品展示
<span>OUR PRODUCTS</span>
</h3>
<!-- 产品 -->
<div class="clearfix">
<!-- 左边 -->
<div class="leftbox ">
<div> <img src="images/pic01.jpg" alt="">
<!-- 蒙板 -->
<div class="mask1"></div>
</div>
<div> <img src="images/pic02.jpg" alt="">
<!-- 蒙板 -->
<div class="mask2"></div>
</div>
<div> <img src="images/pic03.jpg" alt="">
<!-- 蒙板 -->
<div class="mask3"></div></div>
<div> <img src="images/pic04.jpg" alt="">
<!-- 蒙板 -->
<div class="mask4"></div></div>
</div>
<!-- 右边 -->
<div class="rightbox">
<div> <img src="images/pic05.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>
<!-- 关于我们 -->
<div id="abouts">
<div class="container">
<div>
<!-- 标题 -->
<h3>关于我们</h3>
<!-- 内容 -->
<p class="tcenter">**家纺有限公司现有员工1000余人,资产总额9000万元。下设:纺纱分厂、毛巾分厂、绣花分厂、家纺分厂和进出口公司。先后在韩国、欧洲、日本、美国、澳大利亚、新加坡、中东、非洲等十几个国家和地区建立了稳定的销售网络和分公司。被省、市政府评为“先进企业”“功勋企业”“外贸出口先进单位”,同时被授予“AAA”级信用企业。**公司凭借高素质的人才队伍,先进的工艺和一流、完善的企业管理,赢得了国内外客户的良好赞誉,使得企业很快发展成为集纺、织、印、染、绣花为一体的家纺集团。公司先后荣获了“中国驰名商标”、“**名牌”、“**省著名商标”等荣誉称号。公司通过了ISO9001:2000......</p>
<!-- 阅读更多 -->
<a href="">READ MORE</a>
</div>
</div>
</div>
<!-- 新闻动态 -->
<div class="container clearfix">
<div id="news">
<!-- 标题 -->
<h3 class="newsactive">新闻动态
<span> NEWS CENTER</span>
</h3>
<!-- 内容 -->
<div>
<!-- 第一个盒子 -->
<div>
<!-- 图片 -->
<img src="./images/pic06.jpg" alt="">
<!-- 新闻列表 -->
<ul>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家纺行业的四大走向</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家纺行业:从价值链的薄弱环节找到</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">2009年净利润同比增长34.4</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家电涨价与降价背后的营销逻辑</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">高科技家电未来都很低碳</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">XX网加盟“绿书签”行动</a>
<span>2021-10-20</span>
</li>
</ul>
</div>
<!-- 第二个盒子 -->
<div>
<!-- 图片 -->
<img src="./images/pic07.jpg" alt="">
<!-- 新闻列表 -->
<ul>
<li>
<a href="#">[公司动态]</a>
<a href="#">迎|“十一”主题优惠即将开幕</a>
<span>2021-8-28</span>
</li>
<li>
<a href="#">[公司动态]</a>
<a href="#">**家纺驻外办事处相继成立</a>
<span>2021-9-12</span>
</li>
<li>
<a href="#">[公司动态]]</a>
<a href="#">**家纺驻外办事处相继成立</a>
<span>2021-10-13</span>
</li>
<li>
<a href="#">[公司动态]</a>
<a href="#">继往开来 搏击10</a>
<span>2021-11-30</span>
</li>
<li>
<a href="#">[公司动态]</a>
<a href="#">**组团参加第十七届中国(上海)</a>
<span>2021-12-22</span>
</li>
<li>
<a href="#">[公司动态]</a>
<a href="#"> **家居体验馆盛大开业</a>
<span>2021-12-29</span>
</li>
</ul>
</div>
<!-- 第三个盒子 -->
<div>
<!-- 图片 -->
<img src="./images/pic06.jpg" alt="">
<!-- 新闻列表 -->
<ul>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家纺行业的四大走向</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家纺行业:从价值链的薄弱环节找到</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">2009年净利润同比增长34.4</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">家电涨价与降价背后的营销逻辑</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">高科技家电未来都很低碳</a>
<span>2021-10-20</span>
</li>
<li>
<a href="#">[行业资讯]</a>
<a href="#">XX网加盟“绿书签”行动</a>
<span>2021-10-20</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<!-- 内容 -->
<div class="container clearfix">
<!-- 第一个盒子 -->
<div class="address">
<img src="./images/logo2.jpg" alt="">
<p>
中国上海市xxx区xxx路12号moumou大厦5层5xx室<br>
400-000-xxxx / (021)-1234578xxx <br>
12385963xxxx@gmail <br>
</p>
</div>
<!-- 第二个盒子 -->
<div class="links">
<!-- 标题 -->
<h3>快速链接</h3>
<!-- 列表 -->
<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>
</ul>
</div>
<!-- 第三个盒子 -->
<div class="search">
<h3>站内搜索</h3>
<!-- 搜索框 -->
<form action="" method="GET" class="clearfix">
<input type="text" name="" id="" value="请输入关键字" class="txt">
<input type="submit" value="搜索" class="btn">
</form>
<div>
关注我们
<i class="icon icon-wb"></i>
<i class="icon icon-wx"></i>
</div>
</div>
</div>
<!-- 版权 -->
<p class="copyright">Copyright © 2009-2011,www.xxxxxx,All rights reserved 沪ICP备XXXXXX号 未经同意,不得转载</p>
</div>
</body>
</html>
css部分代码
/* 头部 */
#header .top{
height: 45px;
background-color: black;
line-height: 45px;
}
#header .top .left{
width: 132px;
height: 16px;
color: white;
line-height: middle;
float: left;
}
#header .top .right{
float: right;
}
#header .top .right a{
color: white;
margin-left: 20px;
}
/* 菜单 */
#header .menu{
height: 73px;
}
/* logo */
#header .menu .logo{
margin-top: 28px;
float: left;
}
/* 导航 */
#header .menu .nav{
height: 45px;
float: left;
margin-top: 28px;
margin-left: 500px;
}
#header .menu .nav>li{
float: left;
margin-left: 30px;
height: 45px;
line-height: 45px;
font-size: 16px;
/* 定位 */
position: relative;
}
/* 子菜单 */
#header .menu .nav>li .submenu{
width: 70px;
background: #15bded;
position: absolute;
top: 40px;
left: 0;
/* 隐藏 */
display: none;
}
#header .menu .nav>li .submenu li{
line-height: 30px;
text-align: center;
color: white;
}
#header .menu .nav>li .submenu li:not(:last-child){
border: 1px dashed white;
}
/* 子菜单显示 */
#header .menu .nav>li:hover .submenu{
display:block;
}
#header .menu .nav li a{
color: black;
}
#header .menu .nav li.active{
background: url(../images/nav_move.jpg) no-repeat center;
}
/* 轮播图 */
#banner {
background: url(../images/banner1.jpg) no-repeat center;
padding: 165px 0 170px;
margin-top: 30px;
}
/* 里面的盒子 */
#banner .innerbox{
background: url(../images/border.png) no-repeat;
width: 458px;
height: 212px;
margin:0 auto;
}
/* 盒子内字体大小 */
#banner .innerbox h1{
font-size: 42px;
color: white;
padding-top: 20px;
margin-left: 50px;
}
#banner .innerbox p{
width: 355px;
font-size: 20px;
color: white;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 40px;
text-align: center;
}
/* 特色 */
#feature .div1{
width: 400px;
height: 210px;
background: blueviolet;
float: left;
margin-top: 30px;
opacity: 0.3;
color: white;
margin-bottom: 30px;
}
#feature .div1 h3{
text-align: center;
font-size: 24px;
padding-top: 30px;
}
#feature .div1 p{
font-size: 16px;
width: 300px;
text-align: center;
padding-top: 10px;
margin-left: 50px;
}
#feature .div2{
width: 400px;
height: 210px;
background: beige;
float: left;
margin-top: 30px;
color: white;
margin-bottom: 30px;
}
#feature .div2 h3{
text-align: center;
font-size: 24px;
padding-top: 30px;
}
#feature .div2 p{
font-size: 16px;
width: 300px;
text-align: center;
padding-top: 10px;
margin-left: 50px;
}
#feature .div3{
width: 400px;
height: 210px;
background: blueviolet;
float: left;
margin-top: 30px;
opacity: 0.3;
color: white;
margin-bottom: 30px;
}
#feature .div3 h3{
text-align: center;
font-size: 24px;
padding-top: 30px;
}
#feature .div3 p{
font-size: 16px;
width: 300px;
text-align: center;
padding-top: 10px;
margin-left: 50px;
}
/* 产品展示 */
#products .productshow{
font-size: 24px;
font-weight: normal;
line-height: 60px;
background: url(../images/nav_bg02.png) no-repeat left bottom;
margin-bottom: 30px;
}
#products .productshow span{
font-size: 16px;
color: #bbb8b5;
}
/* 产品左边 */
#products .leftbox {
width:600px;
height: 580px;
float: left;
}
#products .leftbox div{
width: 270px;
height: 275px;
float: left;
margin-right: 30px;
margin-bottom: 30px;
position: relative;
}
/* 第一个div */
#products .leftbox div .mask1{
width: 270;
height: 275px;
background: url(../images/pic01-01.jpg);
position: absolute;
top:0;
left: 0;
/* 隐藏蒙板 */
display: none;
}
/* 显示蒙板 */
#products .leftbox div:hover .mask1{
display: block;
}
/* 第二个div */
#products .leftbox div .mask2{
width: 270;
height: 275px;
background: url(../images/pic02-01.jpg);
position: absolute;
top:0;
left: 0;
/* 隐藏蒙板 */
display: none;
}
/* 显示蒙板 */
#products .leftbox div:hover .mask2{
display: block;
}
/* 第三个div */
#products .leftbox div .mask3{
width: 270;
height: 275px;
background: url(../images/pic03-01.jpg);
position: absolute;
top:0;
left: 0;
/* 隐藏蒙板 */
display: none;
}
/* 显示蒙板 */
#products .leftbox div:hover .mask3{
display: block;
}
/* 第四个div */
#products .leftbox div .mask4{
width: 270;
height: 275px;
background: url(../images/pic04-01.jpg);
position: absolute;
top:0;
left: 0;
/* 隐藏蒙板 */
display: none;
}
/* 显示蒙板 */
#products .leftbox div:hover .mask4{
display: block;
}
/* 产品右边 */
#products .rightbox div{
width: 570px;
height: 580px;
float: left;
margin-left: 30px;
margin-bottom: 30px;
position: relative;
}
#products .rightbox div img{
width: 570px;
height: 580px;
}
/* 关于我们 */
#abouts {
height: 510px;
background: url(../images/banner3.jpg) no-repeat center;
}
#abouts div{
width: 690px;
padding-top:50px ;
padding-left:20px;
}
/* 关于我们文字 */
#abouts div h3{
font-size: 20px;
text-align: center;
line-height: 60px;
font-weight: normal;
background: url(../images/line_bg.png) no-repeat center bottom;
margin-bottom: 20px;
}
#abouts div p{
font-size: 14px;
line-height: 30px;
color: #6b6b6b;
}
#abouts div a{
display: inline-block;
width: 170px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 14px;
color: white;
background: #25bbce ;
border-radius: 25px;
margin-left: 270px;
margin-top: 30px;
}
/* 新闻动态 */
#news .newsactive{
font-size: 24px;
font-weight: normal;
line-height: 60px;
background: url(../images/nav_bg02.png) no-repeat left bottom;
margin-bottom: 30px;
margin-top: 30px;
}
#news .newsactive span{
font-size: 16px;
color: #bbb8b5;
}
#news div>div{
width: 370px;
}
#news div>div img{
width:380px;
height: 250px;
}
#news div>div ul li{
line-height: 34px;
border-bottom: 1px dashed #d9d9dc;
}
#news div>div ul li a{
font-size: 14px;
color: #6a6a6a;
padding-right: 5px;
}
#news div>div ul li span{
font-size: 12px;
color: #a5a5b1;
float: right;
}
#news div>div ul li a:first-child{
color: #09bbec;
}
/* 盒子间距 */
#news div div{
float: left;
margin-right: 30px;
}
/* 页脚 */
#footer{
background:#141414;
margin-top: 30px;
font-size: 14px;
color: #818388;
}
#footer .address{
width: 440px;
margin-top: 30px;
float: left;
}
#footer .address img{
width: 156px;
height: 47px;
}
#footer .address p{
background: url(../images/icon.jpg) no-repeat left center ;
line-height: 44px;
padding-left: 30px;
margin-top: 25px;
}
/* 第二个盒子 */
#footer .links{
width: 320px;
float: left;
margin-top: 20px;
margin-left: 30px;
}
#footer .links h3{
font-size: 18px;
color: white;
line-height: 60px;
background: url(../images/nav_bg02.png) no-repeat;
margin-bottom: 20px;
}
#footer .links ul li{
width: 160px;
float: left;
line-height: 40px;
}
#footer .links ul li a{
color: #818388;
}
/* 第三个盒子 */
#footer .search{
width: 320px;
float: left;
margin-top: 20px;
margin-bottom: 40px;
margin-left: 50px;
}
#footer .search {
width: 320px;
float: left;
}
#footer .search h3{
font-size: 18px;
color: white;
line-height: 60px;
background: url(../images/nav_bg02.png) no-repeat;
margin-bottom: 20px;
}
/* 搜索 */
#footer .search .txt {
float: left;
width: 220px;
height: 46px;
border: 0;
font: 16px;
color: #818388;
text-indent: 10px;
margin-bottom: 30px;
}
#footer .search .btn {
float: left;
width: 100px;
height: 46px;
border: 0;
font: 16px;
color: white;
background: #3aa27f;
float: left;
margin-bottom: 30px;
}
#footer .search .txt{
background: #333333;
}
#footer .search input{
margin-bottom: 10px;
margin-top: 10px;
}
/* 精灵图 */
.icon{
display: inline-block;
/* 第一步设置宽高 */
width: 30px;
height: 30px;
/* 第二步设置背景 */
background: url(../images/fenxiang.png) no-repeat;
vertical-align: middle;
margin-left: 5px;
}
/* 第三步具体实现坐标 */
.icon-wx{
background-position: -43px 0px;
}
.icon-wb{
background-position: -1px 0px;
}
#footer .copyright{
line-height: 75px;
background: black;
text-align: center;
}
效果展示
更多推荐
HTML/CSS网页制作-----家居网
发布评论