HTML5知识点总结（五）
网页布局和页面美化
布局的块级标签分类
响应式布局和视口
媒体查询
多列布局
布局的块级标签分类
1. 分类导航或菜单等场合
div-ul(ol)-li
1.使用margin：0px auto； 设置div水平居中
2.使用text—aligin：center；设置内容水平居中
3.使用height和line-height设置垂直居中
2. 图文混编场合
div-dl-dt-dd
1.dt标签是列表标题（图片）
2.dd标签是列表内容（文字）
3.dd标签有默认的左间距，margin可以清除
3.图文布局或显示数据场合
div-table-tr-td
1.使用border-collapse: collapse;设置细边框的效果
4.布局表单场合
div-form-table-tr-td
1.使用<fieldset></fieldset>对表单元素进行分组，默认样式有外边框
2.使用<legend></legend>设置每组的内容标题，内容通常显示在左上角
响应式布局和视口
一、主要变化
- 弃用px，改用em或%作为单位
- 可以使同一网站在不同设备上完美呈现
二、视口
1、视口基本语法
在页面加载时，使用<meta>标签设置游览器视口的宽度
<meta name="viewport"
content="width=device-width,
initial-scale=1,
minimum-scale=1,
maximum-scale=1,
user-scalable=no" />
2、视口常用属性
| 属性 | 说明 |
|---|---|
| width | 设置layout viewport的宽度为一个正整数或字符串“device-width” |
| height | 设置layout viewport的高度为一个正整数或字符串“height-width” |
| initial-scale | 设置页面的初始缩放值，一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，一个数字，可以带小数 |
| user-scalable | 是否允许用户缩放，值为no 或 yes |
媒体查询
一、概念和作用
- 概念：响应式布局的实现方式之一
- 作用：在不同条件下使用不同样式，使页面在不同终端下达到不同的效果
二、媒体查询
1、媒体查询基本语法
@media 设备名 only （选取条件）not （选取条件） and（选取条件）
{CSS样式规则
}
only限定某种设备，可省略，and（逻辑与）和not（排除某种设备）为逻辑关键字，多种设备用逗号分隔
2、媒体查询常用属性
可用设备名参数
| 属性 | 说明 |
|---|---|
| all | 所有设备 |
| screen | 彩色电脑屏幕 |
| tv | 电视 |
| projection | 项目演示 比如幻灯片 |
| 文档打印或打印预览 |
媒体查询属性
| 项目 | Value |
|---|---|
| width | 输出设备页面可见区域的宽度 |
| height | 输出设备页面可见区域的高度 |
下图补充
三、媒体查询的两种使用方式
1.在样式表中内嵌@media
@media all and (min-width:1024px ) {/*适合低分辨率桌面浏览器和横屏iPad*/
}@media all and (min-width:768px ) {/*适合很低分辨率桌面浏览器和竖屏iPad*/
}@media all and (min-width:480px ) {/*适合横屏iPhone和Andioid*/
}@media all and (min-width:320px ) {/*适合竖屏iPhone和Andioid*/
}@media all and (min-width:240px ) {/*适合低分辨率移动设备*/
}
1.在link中使用@media
/*适合低分辨率桌面浏览器和横屏iPad*/
<link rel="stylesheet" type="text/css"media="all and (max-width:1024px )"href="pc.css">/*适合很低分辨率桌面浏览器和竖屏iPad*/
<link rel="stylesheet" type="text/css"media="all and (max-width:780px )"href="pc.css">/*适合横屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"media="all and (max-width:480px )"href="pc.css">/*适合竖屏iPhone和Andioid*/
<link rel="stylesheet" type="text/css"media="all and (max-width:380px )"href="pc.css">
多列布局
作用：能让网页文本呈多列显示，主要控制大片文章
常用属性
| 属性 | 说明 |
|---|---|
| column-count | 指定列数，值是数字 |
| column- gap | 指定列之间的距离 |
| column-rule | 在一条声明中设置column-rule-*的简写属性 |
| column-rule-color | 设置列之间的颜色规则，值为颜色 |
| column-rule-style | 设置列之间的样式规则，取值和border-style的值相同 |
| column-rule-width | 设置列之间的宽度 |
| columns | 设置column-span和column-width的简.写属性 |
| column-span | 指定元素横向能跨多少列，取值none和all |
| column-width | 指定列宽 |
| column-fill | 指定内容在列与列之间的分布方式，balance：则指浏览器确保不同列之间的长度差异尽可能小。auto：按照顺序填充列 |
HTML5知识点总结（五）相关推荐
- HTML5 知识点（第一节）
HTML5 知识点(第一节) 页面美化和页面特效 图片边框 过渡 动画 平移.缩放.旋转.倾斜 综合样例 图片边框 语法:border-image: ...
- HTML5初学-第五天-作业及知识点总结
一.表格 <table> <tr><td>单元格1</td><td>单元格2</td></tr> <tr> ...
- Java 面试知识点解析(五)——网络协议篇
前言: 在遨游了一番 Java Web 的世界之后,发现了自己的一些缺失,所以就着一篇深度好文:知名互联网公司校招 Java 开发岗面试知识点解析 ,来好好的对 Java 知识点进行复习和学习一番,大 ...
- html5 php idea,五个HTML5新特性
###特性一:正则表达式 通过使用HTML5的pattern属性,代码如下: ###特性二:数据列表元素 使用一些JS或者jQuery UI来实现自动补齐的功能,而在HTML5中,直接使用datali ...
- html5标签属性大全_HTML/HTML5 知识点思维导图
HTML 1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标 ...
- python学习--关注容易被忽略的知识点--（五）面向对象编程
本系列文章回顾了 python大部分关键的知识点,关注那些容易被忽略的知识点.适用于有一定python基础的python学习者. 本系列文章主要参考廖雪峰的python学习网站.该学习网站内容全面,通 ...
- html5知识点：HTML5新特性
最近几年web前端开发领域最热的话题当属HTML5,HTML5从根本上改变了开发商开发web应用的方式,从桌面浏览器到移动应用,这种语言和标准都正在影响并将继续影响着各种操作平台. 关于HTML5的介 ...
- HTML+CSS 自用知识点（五）
溯本求源 四十一.strong和b.em和i? strong和em都是表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的 ...
- html5知识点补充—hgroup元素的使用
使用hgroup元素组合标题 使用新的HTML5元素hgroup,可以为header元素添加更多的信息. 这个元素用来对多个相关联的h1~h6标题进行分组.如果你的网站有副标题,可以使用hgroup元 ...
最新文章
- jvm在创建对象时采用哪些并发安全机制
- sess.run()详解
- 成本要素区分成本中心
- 转载：xml文件中的特殊字符
- c++中基类与派生类中隐含的this指针的分析
- HDU 1158 Employment Planning【DP】
- Windows 7 又惹祸了！
- EasyTouch的使用
- 流式布局和viewport
- CleanMyMac X4.11.1中文正式版 系统优化 垃圾清理 程序卸载工具
- Oracle数据库的下载地址
- Smarty中文手册
- ffmpeg转换视频编码
- 电气线材选型入门（rv、rvv、rvvp、avvr、蓝白排线等）
- Robo 3T使用教程--MongoDB篇(极简)
- 饶了我的耳朵吧，音乐
- 人工智能的十大应用方向是哪些？
- 股票实时行情接口如何获得快照历史数据？
- 看理想：3万辆交付意味着什么？
- 控制器中接收数据的四种方式