2022-03-03 html网页布局练习(二):使用float浮动+html5新增标签进行网页布局
2024-04-09 05:39:28
设计图
https://s3.bmp.ovh/imgs/2023/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>上海视邦光学有限公司成立于2004年,是专业的品牌眼镜代理公司,一直致力于国际品牌眼镜的销售和推广,提供客户高端优质的……</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成立于2013年，是一家专注于高端网站建设和品牌传播的网站服务机构。多年的磨炼，使我们在创意设计、营销推广到技术研发拥有了丰富经验，我们擅长倾听企业需求，挖掘品牌核心价值，整合高质量设计和最新技术，为您打造有价值的创意设计体验。</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">2014-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>京东O2O:跑马圈地要紧,别的日后再说</span><span class="newsDate">2014-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>企业网络营销首先要重视网站建设</span><span class="newsDate">2014-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>SEO博客文章是否都有存在的价值</span><span class="newsDate">2014-07-27</span></div><div class="newsList"><i class="iconfont icon-yuandian"></i><span>农村互联网:新一波浪潮下的"老"机会</span><span class="newsDate">2014-07-27</span></div><h6>查看列表>></h6></div></article><!-- 7.footer --><footer><div class="top"><span>Copyright © 2002-2011 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>*{}
资源位置
https://download.csdn.net/download/rowlet/87448789
2022-03-03 html网页布局练习(二):使用float浮动+html5新增标签进行网页布局相关推荐
- 十二、HTML5新增标签特性详解（audio、video、input）
HTML5 第一天 一.什么是 HTML5 HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
- 情人节程序员用HTML网页表白【情人相册模板】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 【融职培训】Web前端学习 第2章 网页重构11 HTML5新增标签
一.html5概述 html5是超文本标记语言(html)的第五次重大修改,可以简单的理解为是html的第五个大版本.我们平时所说的html5其实是包含了html5,css3的新特性,以及新增的Jav ...
- html footer写法,HTML5 footer标签元素 css3布局教程
HTML5 标签元素 新增html5底部footer元素标签,对html 5新增footer标签根底认识到了解footer css组织教程做到真正掌控与认识 记得我们在畴前html5版本夙昔机关网页底 ...
- 情人节程序员用HTML网页表白【3D旋转木马相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【做我女朋友】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- 情人节程序员用HTML网页表白【婚礼庆典-邀请函】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
- DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录 布局概述 网页布局 页面元素定位机制 布局常用属性 浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...
最新文章
- 打造交叉复合型数据人才的高地：清华大学大数据能力提升项目宣讲会成功举行！...
- 模拟服务器和客户端交互的python脚本
- flume linux环境搭建,linux安装flume及问题
- 小程序中添加快递查询
- 致openGauss社区用户的一封信
- 各种常用排序算法的时间复杂度和空间复杂度
- mac 安装php swoole扩展
- 发那科机器人圆弧指令怎么用_发那科机器人指令编辑详细介绍
- 都这麽大了还不快了解防病毒网关？
- Xilinx平台SRIO介绍（汇总篇）
- linux设置usb选择性暂停,USB大容量存储设备无法启动的解决方法
- spline曲线使用
- Vue解决导出pdf文件图片展示不全问题
- C++课后作业 3. 教材习题4_8：定义Dog类，包含age和weight信息
- 华为荣耀android进入,EMUI 9.1公测招募开启 华为荣耀14款机型获支持
- 对人的外部评价与内部评价
- opencv 之人眼人脸检测
- php循环求1到100偶数,用while循环计算打印2到100的偶数和的几种方法
- EMD（经验模态分解）算法 二
- Spring - RabbitMQ循环依赖问题解决