精选文章 前端技术—3. 盒子模型与页面布局

前端技术—3. 盒子模型与页面布局

作者:不放手, 不错过 时间: 2020-07-26 06:18:33
不放手, 不错过 2020-07-26 06:18:33

⽹⻚布局

  • 三种传统PC端⽹⻚布局⽅式:
    • 传统的DIV+CSS布局
    • HTML5+CSS3布局
    • 响应式布局

1. DIV+CSS布局:

  • 此种布局是⽹⻚的HTML通过DIV标签+CSS样式表代码开发制作的(HTML)⽹⻚的统称。
  • DIV+CSS布局好处:便于维护,有利的SEO(⾕歌将⽹⻚打开速度作为排名因素及SEO因素),
  • ⽹⻚打开速度还原,符合web标准等。

前端技术—3. 盒子模型与页面布局1

2. HTML5+CSS3布局

  • HTML5 可以让很多更语义化的结构化代码标签代替⼤量⽆意义的 div 标签
    • 1. 这种语义化的特性提升了⽹⻚的质量和语义
    • 2. 减少了以前⽤于CSS 调⽤的class 和 id 属性
  • 对搜索引擎的友好 新的结构标签带来的是⽹⻚布局的改变及提升对搜索引擎的友好。
  • HTML5的新标签元素有:
  • 定义⻚⾯或区段的头部;
  •  
    定义⻚⾯或区段的尾部;
  •  
  •  
    ⻚⾯的逻辑区域或内容组合;
  •  
    定义正⽂或⼀篇完整的内容;
  •  

前端技术—3. 盒子模型与页面布局2

  • 注意:使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容,可使⽤下⾯的代码解决。

3. 响应式布局:

第⼀种:直接在⻚头中使⽤CSS样式修饰。

  • 第⼆种:导⼊不同的css样式⽂件:

 

 

 

 

 

 

 

 

 

 

 

 

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:电脑使用 - matebook2014笔记本电脑输入法在外接屏幕不随光标显示问题解决

下一篇:spring boot 整合spring cloud alibaba

您可能感兴趣

  • Linux系统内存

    Linux 内存是后台开发人员,需要深入了解的计算机资源。合理的使用内存,有助于提升机器的性能和稳定性。本文主要介绍Linux 内存组织结构和页面布局,内存碎片产生原因和优化算法,Linux 内核几种内存管理的方法,内存使用场景以及内存使用的那些坑。 从内存的原理和结构,到内存的算法优化,再到使用场景,去探寻内存管理的机制和奥秘。 一、走进Linux 内存 1、内存是什么? 1)内存又称主存...

  • 论文|从DSSM语义匹配到Google的双塔深度模型召回和广告场景中的双塔模型思考...

    点击标题下「搜索与推荐Wiki」可快速关注 ▼ 相关推荐 ▼ 1、基于DNN的推荐算法介绍 2、传统机器学习和前沿深度学习推荐模型演化关系 3、论文|AGREE-基于注意力机制的群组推荐(附代码) 4、论文|被“玩烂”了的协同过滤加上神经网络怎么搞? 本文包含(文章较长,建议先收藏再阅读,点击文末的阅读原文,查看更多推荐相关文章): DSSM DSSM的变种 MV-DNN Google Tw...

  • 芯片破壁者(十.上):风起樱花之地

    在不断升级的中美科技战中,每个人都很容易发现,在芯片上受制于人似乎是一个最难解的谜题。面对这种情况,很多国人可能都在思考:我们到底有没有可能打破“芯片枷锁”? 而从历史里寻找答案是文明的天性,在审视国家间的半导体博弈时,有一个无法绕开的话题,就是上世纪60年到到90年代,横跨数十年、关系错综复杂的美日半导体纠葛。这段历史中最为人津津乐道的有两点。一是日本在80年代一跃超过美国成为全球半导体产...

  • 华为、苹果、三星的手机终结之战

    过去10年中,智能手机的快速普及,改变了全世界大多数人的生活和工作方式,而在这场变革背后,苹果、三星、华为这些科技巨头的积极推动作用不容忽视。 其中三星起到的作用尤其不容小觑,2011年之后,全球智能手机市场中三星份额整体超过苹果,以每年2、3亿部出货量,在全球数十亿用户群体中不断扩散影响力。单从智能手机出货量这个方面考虑,过去9年,三星是全球市场中无可争议的霸主。 数据来自IDC 自201...

  • 对云桌面、桌面云、私有云的一些看法

    最近整理了一下自2017年以来自己对私有云服务平台构建的一些认识,并以刚刚为某后勤保障部队单位提供的小规模私有云服务平台为例阐述。 私有云平台、云计算服务与虚拟化: 我个人认为这三个名称分别指涉了三个不同的事物: 私有云平台:在实践中,私有云平台时包含了服务端软硬件集成和客户端软硬件集成的一整套特定业务需求场景的、已经处于落地实施阶段的解决方案项目。 比如某后勤保障部队为简化征兵流程、节省相...

  • 「鹿班智能设计平台」是如何工作的

    目录 商业设计大脑的三大挑战 可控的视觉生成过程 机器如何学习设计 组成一,设计框架。 组成二,元素中心。 组成三,行动器。 组成四,评估网络。 视觉设计的四个层次 最基础的:临摹拓展。 第二层:场景表达。 第三层:创意洞见。 最后一层:创造趋势。 商业设计大脑的三大挑战 在开始做事情之前,我们遇到了三个比较严峻的挑战。 第一个挑战,缺少标注数据。今天所有的人工智能都基于大量的结构化标注数据...

  • 计算机必备专用英语词汇

    非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

  • 无监督学习?Yann LeCun说:或许应该叫它预测性学习

    随着机器学习的不断发展,无监督学习在近年来备受关注。Yann LeCun提出赋予无监督学习新的名字——预测性学习。 随着机器学习的不断发展,无监督学习在近年来备受关注。近日,有人提出赋予无监督学习新的名字——预测性学习。推崇这次改名的正是前些日子在推特「大火」的Facebook的首席AI科学家,Yann LeCun。 Yann LeCun将「预测性学习」称为「下一个AI前沿」。因为在过去的十...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。