欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5知识点总结(五)

程序员文章站 2021-12-07 10:08:55
网页布局和页面美化布局的块级标签分类响应式布局和视口媒体查询多列布局布局的块级标签分类 1. 分类导航或菜单等场合div-ul(ol)-li1.使用margin:0px auto; 设置div水平居中2.使用tex...

网页布局和页面美化

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



布局的块级标签分类

    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:按照顺序填充列

本文地址:https://blog.csdn.net/weixin_46085790/article/details/112563461

相关标签: HTML5 css html