设计图
https://s3.bmp.ovh/imgs//02/10/f04eca2ec8533891.jpg
页面构成和思路
页面由头部header+轮拨图banner+选项卡片section+案例case+客户client+关于我们&新闻aboutUs&news+底部footer组成头部底部等等用到了h5新增标签使用float浮动进行盒模型的水平布局,使用内外边距padding和margin进行上下左右间距的拉开在margin:top塌陷的地方是通过改为设置padding:top再将height减去相应像素来实现的网页在浏览器中的居中显示是通过设置html的宽度100%,body设置一个固定宽度然后margin:0 auto;来实现的完整代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>BEANCMS</title><link rel="stylesheet" href="./font/iconfont.css" /><style>* {margin: 0;padding: 0;}ul,li {list-style-type: none;}a{text-decoration: none;}h1,h2,h3,h4,h5,h6 {font-weight: normal;}html {width: 100%;}body {width: 1146px;margin: 0 auto;/* overflow: hidden; */}/* 1.header头部 */header {width: 100%;height: 60px;background: #e83928;margin: 0 auto;}header > span {float: left;margin-left: 70px;font-size: 20px;color: #fff;font-family: SimHei;font-weight: 900;line-height: 60px;}header > ul {float: left;margin-left: 156px;}header li {float: left;line-height: 60px;font-size: 14px;font-weight: 600;margin-right: 44px;}header a{color:#fff;}header a:active{text-decoration: underline;}.lianxi {float: right;margin-right: 65px;}#weibo,#qq,#phone,.tel {float: left;color: #fff;line-height: 60px;margin-right: 10px;font-weight: 600;}/* 2.banner */.banner {width: 100%;height: 522px;}/* 3.section */section {height: 226px;}.container {width: 16.5%;height: 186px;border-right: 1px dashed #565656;color: #666666;text-align: center;margin-top: 16px;margin-bottom: 32px;float: left;}.container:last-child {border: none;}.container > .iconfont {font-size: 50px;}.container h3 {font-size: 16px;line-height: 34px;color: #7c7c7c;}.container h5 {font-size: 14px;line-height: 24px;}/* 4.case */#case {width: 100%;height: 490px;float: none;background: #eeeeee;}.title {/* 减去padding值 */width: calc(100% - 80px);/* height: 102px; */height: 34px;/* 避开margin-top塌陷 */padding: 42px 8px 26px 72px;}.eng {font-size: 34px;font-weight: 900;}.cn {font-size: 20px;}.box1,.box2,.box3 {width: 320px;height: 320px;background: #fff;float: left;margin-left: 20px;}.box1 {margin-left: 72px;}.caseBox .text {margin: 6px 10px;}.caseBox h4 {height: 34px;line-height: 34px;font-size: 14px;border-bottom: 1px solid #e3e3e3;}.caseBox h6 {margin-top: 6px;font-size: 12px;line-height: 20px;color: #8384c0;}.caseBox p {float: right;font-size: 10px;color: #959597;}/* 5.client */#client {width: 100%;height: 254px;}.clientBox {width: 194px;height: 152px;border: 1px solid #afafaf;float: left;margin-left: 8px;position: relative;}.clientBox > img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.first {margin-left: 72px;}/* 6.aboutUs和news */article {width: calc(100% - 190px);/* width:100%; */height: 392px;padding-left: 72px;padding-top: 52px;/* border: 1px solid green; */}.aboutUs {border-right: 1px dashed #565656;padding-right: 40px;/* background: pink; */}.news {margin-left: 40px;margin-right: -40px;/* background: blue; */}.aboutUs > h1,.news > h1 {font-size: 24px;}.aboutUs > h3 {margin-top: 36px;font-size: 14px;}.aboutUs > h5 {margin-top: 32px;font-size: 12px;color: #656565;line-height: 22px;}.aboutUs > h6,.news > h6 {margin-top: 28px;font-size: 10px;color: #cf1516;}.aboutUs,.news {width: calc(50% - 26px);height: 100%;float: left;}.news > h1 {margin-bottom: 42px;}.newsList {width: 100%;height: 38px;line-height: 38px;}.newsList > .iconfont {color: #cecece;font-size: 7px;}.newsList > span {font-size: 14px;}.newsList > .newsDate {float: right;}/* 7.footer */footer {width: 100%;height: 250px;background: #393939;color: #c2c0c3;}footer > .top {width: calc(100%-62px);height: 34px;background: #4f4f4f;padding-right: 62px;color: #c2c0c3;font-size: 12px;}.top > span {float: right;height: 34px;line-height: 34px;}.bottom {width: 100%;height: 216px;}.bottomLeft,.bottomRight {padding-left: 64px;padding-top: 36px;width: calc(50% - 64px);height: calc(100% - 36px);float: left;}/* 调整彩色icon图标的样式 */.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;font-size: 1em;}.bottomLeftText {margin-top: 20px;}.bottomLeftText > * {height: 20px;line-height: 20px;font-size: 12px;}.bottomLeftText h2 {font-size: 14px;}.bottomRight > .bottomUl {float: left;width: 25%;}.ulTitle {font-size: 16px;margin-bottom: 10px;}.bottomUl li {font-size: 10px;height: 20px;line-height: 20px;}</style></head><body><!-- 1.header头部 --><header><span>BEANCMS</span><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></ul><div class="lianxi"><div class="iconfont icon-weibo" id="weibo"></div><div class="iconfont icon-QQ" id="qq"></div><div class="iconfont icon-icon-tel" id="phone"></div><div class="tel">0898-6608888</div></div></header><!-- 2.banner --><div id="banner"><img src="./img/BEANCMS-banner.png" alt="" /></div><!-- 3.section --><section><div class="container"><div class="iconfont icon-web"></div><h3>创意网站建设</h3><h5>企业官网建设</h5><h5>品牌网站建设</h5><h5>电子商务网站</h5><h5>Minisite活动站</h5></div><div class="container"><div class="iconfont icon-target"></div><h3>网络整合营销</h3><h5>微信营销推广</h5><h5>企业社交管理</h5><h5>网络活动策划</h5><h5>搜索引擎优化</h5></div><div class="container"><div class="iconfont icon-app"></div><h3>移动APP开发</h3><h5>Apple应用开发</h5><h5>Android应用开发</h5><h5>APP界面设计</h5><h5>平板应用设计开发</h5></div><div class="container"><div class="iconfont icon-cart"></div><h3>电商运营外包</h3><h5>天猫旗舰店代运营</h5><h5>网店装修设计</h5><h5>网店策划&推广</h5><h5>电商平台入住申请</h5></div><div class="container"><div class="iconfont icon-weihu"></div><h3>网站运营维护</h3><h5>页面内容修改&添加</h5><h5>程序功能修改和维护</h5><h5>空间&服务器指南</h5><h5>企业邮箱&域名注册</h5></div><div class="container"><div class="iconfont icon-code"></div><h3>程序开发</h3><h5>企业OA系统</h5><h5>CRM客户管理系统</h5><h5>人力资源管理系统</h5><h5>ERP系统</h5></div></section><!-- 4.case --><main id="case"><div class="title"><span class="eng">Case</span><span class="cn">案例</span></div><div class="caseBox"><div class="box1"><img src="./img/box1.png" alt="" /><div class="text"><h4>富士通Fujitsu(中国)计算机</h4><h6>Fujitsu(富士通)公司与上世纪70年代进入中国,在计算机平台产品,软件与解决方案、通信、半导体以及该新技术的研究开发等领域……</h6><p>MORE></p></div></div><div class="box2"><img src="./img/box2.png" alt="" /><div class="text"><h4>果朋网个性化APP推荐社区</h4><h6>基于个人兴趣喜好的APP推荐社区,让用户更便捷,快速的找到自己喜欢喝需要的APP应用,冰河好友分享交流APP信息,果朋网的核心价……</h6><p>MORE></p></div></div><div class="box3"><img src="./img/box3.png" alt="" /><div class="text"><h4>SeeBond视邦眼镜</h4><h6>上海视邦光学有限公司成立于,是专业的品牌眼镜代理公司,一直致力于国际品牌眼镜的销售和推广,提供客户高端优质的……</h6><p>MORE></p></div></div></div></main><!-- 5.client --><main id="client"><div class="title"><span class="eng">Client</span><span class="cn">客户</span></div><div class="clientBox first"><img src="./img/client1.png" alt="" /></div><div class="clientBox"><img src="./img/client2.png" alt="" /></div><div class="clientBox"><img src="./img/client3.png" alt="" /></div><div class="clientBox"><img src="./img/client4.png" alt="" /></div><div class="clientBox"><img src="./img/client5.png" alt="" /></div></main><!-- 6.aboutUs和news --><article><div class="aboutUs articleBox"><h1>关于我们</h1><h3>织梦58——专业的织梦模板下载站</h3><h5>织梦58成立于，是一家专注于高端网站建设和品牌传播的网站服务机构。多年的磨炼，使我们在创意设计、营销推广到技术研发拥有了丰富经验，我们擅长倾听企业需求，挖掘品牌核心价值，整合高质量设计和最新技术，为您打造有价值的创意设计体验。</h5><h5>核心团队拥有超过8年行业经验的资深团队，涵盖创意、策略、技术等各领域专业人才。我们坚信每一个成功项目是良好团队合作的成果，为客户提供专业有效的网络解决方案</h5><h6>了解详情>></h6></div><div class="news articleBox"><h1>新闻动态</h1><div class="newsList"><i class="iconfont icon-yuandian"></i><span>浅谈设计的"基础"是什么</span><span class="newsDate">-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>京东O2O:跑马圈地要紧,别的日后再说</span><span class="newsDate">-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>企业网络营销首先要重视网站建设</span><span class="newsDate">-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>SEO博客文章是否都有存在的价值</span><span class="newsDate">-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>农村互联网:新一波浪潮下的"老"机会</span><span class="newsDate">-07-27</span></div><h6>查看列表>></h6></div></article><!-- 7.footer --><footer><div class="top"><span>Copyright © 2002- DEDE58. 织梦模板 版权所有</span></div><div class="bottom"><div class="bottomLeft"><div class="tubiao"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xinlang"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-web_tengxunweibo"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-baidu"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qqtalk"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-msn"></use></svg><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tianjia"></use></svg></div><div class="bottomLeftText"><h1>业务咨询:</h1><h2>0898-6608888(9:30~18:00)</h2><h3>四川省成都市龙泉驿区阳光城</h3><h4>QQ:970003436</h4></div></div><div class="bottomRight"><div class="bottomUl"><div class="ulTitle">关于我们</div><ul><li>了解我们</li><li>客户案例</li><li>发展历程</li><li>我们的观点</li><li>联系方式</li></ul></div><div class="bottomUl"><div class="ulTitle">我们的服务</div><ul><li>网站建设</li><li>官网营销</li><li>移动APP开发</li><li>电商运营外包</li><li>网站运营维护</li><li>程序开发</li></ul></div><div class="bottomUl"><div class="ulTitle">新闻资讯</div><ul><li>公司资讯</li><li>行业新闻</li></ul></div><div class="bottomUl"><div class="ulTitle">伙伴招募</div><ul><li>资深网页设计师</li><li>实习网页设计师</li><li>项目经理</li></ul></div></div></div></footer><script src="./font/iconfont.js"></script></body><script></script></html>
最终效果
part1:
part2:
part3:
遇到的问题与解决方案&知识点回顾
1.给选中的标签添加下划线
这里使用到了a标签的四个状态之一:active,
一开始取消a标签 默认样式,然后a:active{text-decoration: underline; }即可
2.icon图标设置大小是通过font-size,颜色是color,而不是通过设置宽高背景色
3.让图片在父盒子里水平垂直居中:子绝父相
4.width: calc(100% - 36px);不能省略减号前后的空格
5.使用iconfont的彩色样式,除了要引入css文件外,JS文件也要引入,然后按照它的demo.index.html里Symbol写的,初始化.icon{}样式,html结构写成这样:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use></svg>
6.选中父盒子下的所有子盒子:#box>*{}
资源位置
/download/rowlet/87448789
