HTML5页面布局前提
HTML5页面布局前提
夏日的风 发表于6个月前
HTML5页面布局前提
  • 发表于 6个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

一、语义元素概述

1、header:(可以允许多个)。

2、footer:章节的末尾部分(可以允许多个)。

3、nav:构建导航,显示导航链接。

4、aside:定义一个页面的区域,装载非正文类的内容,如广告侧边栏等。

5、article:用来显示一块独立的文章内容。

6、section:定义为文档中的节,如每一章节等。

7、hgroup:定义为对网页或区段的标题元素进行组合,如H1~H6。

8、audio:音频内容。

9、canvas:画布功能。

10、video:视频内容。

...等元素。

二、本地存储

    本地储存的两种存储类型API接口:sessionStorage和localStorage。

    sessionStorage:在会话期间内有效。   localStorage:存储在本地,并且永久储存,除非对其执行删除。

三、部分表单属性

    1.placeholder:作用于文本框处于未输入状态和内容为空时的提示内容。

    2.autofocus:指定控件自动获取焦点。

    3.required:必填属性。

    4.tel:供用户舒服电话号码的文本框。

四、部分选择器

    1.before:在某个元素之前插入内容,一般用于清除浮动。

        语法:content:"内容";(必须添加这个)

    2.after:在某个元素之后插入内容。

        语法:content:"内容";(必须添加这个)

    3.first-child:指定元素列表中的第一个元素的样式

    4.last-child:指定元素列表中的最后一个元素的样式

    5.nth-child 和 nth-last-child:指定某个元素的样式或者从后起某个元素的样式。

五、阴影

    1.box-shadow:让元素具有阴影效果

        语法:box-shadow:  x y z color;(X轴偏移量,Y轴偏移量,发散程度,颜色)

    2.text-shadow:设置文本内容的阴影效果或模糊效果

        语法:text-shadow:x y z color;(X轴偏移量,Y轴偏移量,发散程度,颜色)

六、背景

    1.background-size:设置背景图像的大小

    2.background:

        (1)设置多重背景:background: url(img1.png) no-repeat top center,

                                                    url(img2.png) no-repeat top center;

        (2)设置渐变色:background: linear-gradient(to left, #f80 10%, #ff0 100%);

    3.圆角边框:border-radius: 0 0 0 0;

七、适应移动设备

    1.viewport:允许开发者创建一个虚拟窗口,并自定义其窗口的大小或缩放功能。

        语法:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        解释:虚拟宽度width为窗口宽度,初始缩放比例大小为1倍,同事不允许用户使用手动缩放功能。

    2.media:(媒体查询)

        语法:(在所有media前面加上一个@)

                (1)media screen and (max-width:600px){...}(屏幕像素小于600px执行)

                (2)media screen and (min-width:600px){...}(屏幕像素大于600px执行)

                (3)media screen and (min-width:600px) and (max-width:760px){...}(屏幕像素大小在600px~700px执行)

共有 人打赏支持
粉丝 2
博文 5
码字总数 1651
×
夏日的风
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: