HTML/CSS网页制作-----家居网_stay calm~

网络投稿 02-07 6915

网页优化

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.com</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>  <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>  <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.com <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,·,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; } 效果展示