网赚妈妈

 找回密码
 立即注册
搜索
查看: 443|回复: 7

[网赚之家] HTML中常用的布局元素及布局方式1

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-2 23:56:23 | 显示全部楼层 |阅读模式
    KYEhrPvy3RXoV36E.jpg

    HTML中常用的布局元素:<table>、<div>+CSS

    <table>标签:

    <table>指的是表格,用表格来搭建界面布局,即用表格的嵌套,来搭建界面布局。

    <table>布局优势:

    table优势:开发时间短(使用DW开发速度快);纯table各浏览器不会有兼容问题;内容可自适应;在搜索引擎排名能靠前;

    但是 table如果布局变更,需要重新开发;如果table里有div ul 等,可能会出现浏览器兼容问题;加载速度慢;table嵌套的太多,运维是非常困难的。

    wsbsZ8OySRRtbriZ.jpg

    <div>块级(block-level)标签:

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。

    <div>布局优势:

    一.精简代码,减少重构难度。

    网站使用DIV+CSS布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话,需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

    二.网页访问速度

    使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

    三.SEO优化

    采用div-css布局的网站对于搜索引擎很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

    四.浏览器兼容性

    若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。

    AqK34qIKfiWAy2y3.jpg


    HTML中常用的3种布局方式:

    1.流动式布局:是HTML网页默认的布局方式

    特点:

    1.块级元素都会在所处的包含元素内自上而下按顺序处置延伸分布,且默认状态下,块级元素占整个文档流,默认宽度为100%。

    2.内联元素都会在所处的包含元素内从左到右水平分布显示,不占整个文档流。

    IC77292geH12FHAH.jpg

    常见的块级(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

    常见的内内联(行内)元素有:<a>、<span>、<img>、<input>、<select>、<textarea>

    2.浮动布局(float)

    特点:

    浮动布局依靠【 浮动属性 float:left/right/... 】来使标签脱离文档流,达到两个块级元素并排显示的效果。

    float:left ; 浮动脱离当前文档流浮动。

    同时可以依靠【展示属性display:inline/block/inline-block】来进行行内元素和块级元素的效果切换。从而达到灵活运用块级元素和行内元素布局的效果。

    3.层模型布局又叫定位布局

    特点:

    当我们应拥div布局是,在第一层块界面上来做第二层块界面的开发时,就要用到我们所说的定位布局。

    通过运用【定位属性position:absolute/relative/fixed】 来进行第二层界面的定位布局。

    网页是静态的,网页上的定位

    position:absolute ;绝对定位脱离文档流,不受浮动影响,就是相对于窗体(body)边界的margin定位。

    position:relative; 相对定位不脱离文档流,相对于父级标签元素的位置定位。

    position:fixed;固定位置,不会受任何因素影响。

    bEgr3X9feE2S2OEE.jpg

    滚动条移动前

    EkZ49zyYQCmZ00px.jpg

    滚动条移动后

    优先层显示方法:【属性:z-index:0/1/2...】

    特点: 数值越大,越优先显示。

    注意:只有元素使用了position属性的,才具有z-index属性。


    本文部分内容来自网络,如有侵权,请联系修改。

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-2 23:57:40 | 显示全部楼层
    扫盲贴,挺有用的,特别是程序员要看看
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:07:34 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:17:34 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:26:48 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:37:25 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:47:15 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:56:45 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 06:58 , Processed in 0.369481 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表