005-WebBuilder使用结构元素进行网页布局

这个太零散了直接在代码上写的注释，第一份前端代码

<!DOCTYPE html>
<html> <!--文档基本结构--><head><!--设置section或者page的页眉--><meta charset="utf-8" /><!--meta网页元信息--><title>业务种类</title><!--网页标题--><!--使用结构元素进行网页布局--><!--定义文档的样式信息--><style>.left-list-container{float: left;/*float规定框是否应该浮动，left设置定位元素左外边距边界与其包含块左外边界之间的偏移*/}.left-list-title{margin-bottom: 20px;/*定义元素外边距使用margin属性，可以专门设置某一方向属性，比如margin-bottom:设置元素的下外边距*/}.left-list-header{font-size: 30px;/*字体大小*/color: rgb(16,120,173); /*定义内边距使用padding属性，内边距就是元素包含的内容和元素边框内边沿之间的距离*/padding-left: 8px;/*边框border:任何元素都可以定义边框，并且能够很好地显示出来。边框在网页布局中就是用来分割模块的。*/border-left: 5px solid rgb(16,120,173);}.left-list-footer{font-size: 15px;color: rgb(255,203,0);padding-left: 8px;/*padding是内边距，设置内边距这样我们就有空间可以设置border边框了， soild一个实体边框*/border-left: 5px solid rgb(255,203,0);}.left-list-content{flex: 1;/*让所有弹性盒子对象的子元素都有相同的长度，且忽略他们内部的内容*/width: 200px;/*元素区域宽度*/background-color: rgb(247,247,247);/*背景色*/padding: 0 5px;border: 1px solid rgb(247,247,247);/*定义边框，只要和背景色一样就看不出来*/}.left-list-content-item{display: flex;/*利用display属性控制盒子的类型，flex:多行多列布局方式*/align-items: center;/*元素位于容器的中心，这个没啥用*/font-size: 20px;/*字体大小*/line-height: 25px;/*line-height行高，用来设置行间的距离*/padding: 10px 0;/*上下填充是10px,左右填充是0， 行间距和padding的上下填充感觉重复*/border-bottom: 1px solid rgb(247,247,247);/*定义底部边框，只要背景色一样就看不出来*/}.left-list-content-item:nth-last-child{/*nth-last-child是从最后一个元素开始计算选择特定元素*/border-bottom: 0px solid rgb(247,247,247);}.left-list-icon{/*设置图标大小*/height: 20 px;width: 20 px;}</style></head><body><div class="list-container"><!--div定义文档的节--><div class="left-list-title"><div class="left-list-header">业务种类</div><div class="left-list-footer">Bussiness Type</div></div><ul class="left-list-content"><!--ul定义无序列表--><li class="left-list-content-item"><!--li定义列表的项目--><img src="img/left.jpg" class="left-list-icon"/><!--定义图像--><span class="left-list-content">出入境体检</span><!--定义文档的节--></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">预防接种</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">指定签证体检</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">社会健康体检</span></li><li class="left-list-content-item"><img src="img/left.jpg" class="left-list-icon"/><span class="left-list-content">其他服务</span></li></div><div class="left-list-title"><div class="left-list-header">业务指南</div><div class="left-list-footer">Bussiness Guide</div></div><ul class="left-list-content" ><li class="left-list-content-item"><img src="img/体检流程.jpg" class="left-list-icon"/><span class="left-list-content">体检流程</span></li><li class="left-list-content-item"><img src="img/体检注意事项.jpg" class="left-list-icon"/><span class="left-list-content">体检注意事项</span></li><li class="left-list-content-item"><img src="img/体检结果领取须知.jpg" class="left-list-icon"/><span class="left-list-content">体检结果领取须知</span></li><li class="left-list-content-item"><img src="img/收费标准.jpg" class="left-list-icon"/><span class="left-list-content">收费标准</span></li><li class="left-list-content-item"><img src="img/办公时间.jpg" class="left-list-icon"/><span class="left-list-content">办公时间</span></li><li class="left-list-content-item"><img src="img/预防接种须知.jpg" class="left-list-icon"/><span class="left-list-content">预防接种须知</span></li></div></div></body>
</html>

效果

在webbuilder中的效果

今天基本就是在学习这一份前端代码，自己敲了一遍，放在webBuilder上运行了一下。前端果然复杂呀。

005-WebBuilder使用结构元素进行网页布局相关推荐

HTML5新增的结构元素和网页元素
1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...
HTML结构化CSS网页布局入门指南
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然 ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞图书编号: 9787302261834 图书格式: PDF 出版社: 清华大学出版社出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
Web前端入门（十九）传统网页布局式之标准流、浮动
总目录:https://blog.csdn.net/treesorshining/article/details/124725459 文章目录 1.标准流 2.浮动 2.1 浮动概述 2.2 浮动的特 ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
网页设计基础——网页布局结构
几大常用网页布局结构作为网页设计初学者,掌握几个页面布局结构将会让网页变得更加美观,并且大大提升设计效率. 一. 国子型(大型网站常用类型) 如图所示,我们可以看出,国子型页面结构主要分为五个部分. ...
12 【网页布局总结元素的显示与隐藏】
18.网页布局总结通过盒子模型,清楚知道大部分 html 标签是一个盒子. 通过 CSS 浮动.定位可以让每个盒子排列成为网页. 一个完整的网页,是标准流.浮动.定位一起完成布局的,每个都有自己的专 ...

005-WebBuilder使用结构元素进行网页布局

005-WebBuilder使用结构元素进行网页布局相关推荐

最新文章

热门文章