• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

HTML5知识点总结(五)

互联网 diligentman 2周前 (01-14) 10次浏览

网页布局和页面美化

     布局的块级标签分类
     响应式布局和视口
     媒体查询
     多列布局

布局的块级标签分类

    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>设置每组的内容标题,内容通常显示在左上角				

响应式布局和视口

    一、主要变化
  1. 弃用px,改用em或%作为单位
  2. 可以使同一网站在不同设备上完美呈现

    二、视口
         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. 概念:响应式布局的实现方式之一
  2. 作用:在不同条件下使用不同样式,使页面在不同终端下达到不同的效果

    二、媒体查询
         1、媒体查询基本语法
@media 设备名 only (选取条件)not (选取条件) and(选取条件)
{
	CSS样式规则
}
only限定某种设备,可省略,and(逻辑与)和not(排除某种设备)为逻辑关键字,多种设备用逗号分隔

         2、媒体查询常用属性

可用设备名参数

属性 说明
all 所有设备
screen 彩色电脑屏幕
tv 电视
projection 项目演示 比如幻灯片
print 文档打印或打印预览

媒体查询属性

项目 Value
width 输出设备页面可见区域的宽度
height 输出设备页面可见区域的高度

下图补充
HTML5知识点总结(五)

    三、媒体查询的两种使用方式
         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:按照顺序填充列

喜欢 (0)