网页布局和页面美化
布局的块级标签分类
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：按照顺序填充列 |