HTML+CSS复习(四)
三十六、浮动元素的高度自适应2
伪元素
- :after(与content属性一起使用,定义在对象后的内容。)如: div:after{contenturl(logo.jpg);}
div:after{content:“文本内容”;} - :before:与content属性一起使用,定义在对象前的内容。如: divbefore{content:“在其前放内容”;}
- : first-letter:定义对象内第一个字符的样式。
- : first-line:定义对象内第一行文本的样式
(新的解决菜单被遮挡方式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
margin: 0 auto;
}
ul{
list-style: none;
}
.box .item{
float: left;
width: 150px;
text-align: center;
border:1px solid rgb(98, 98, 253);
background-color: rgb(98, 98, 253);
color: white;
line-height: 40px;
}
.item:hover{
background-color: aquamarine;
}
.item ul{
display: none;
background-color: white;
color: black;
}
.item:hover ul{
display: block;
}
.item li:hover{
color: blue;
}
.box::after{
content:"";
clear: both;
display: block;
width: 0;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<ul class="box">
<li class="item">视频教程
<ul>
<li>全部视频教程</li>
<li>全部视频教程</li>
<li>全部视频教程</li>
<li>全部视频教程</li>
</ul>
</li>
<li class="item">认证考试
<ul>
<li>全部视频教程</li>
<li>全部视频教程</li>
</ul>
</li>
</ul>
</body>
</html>
display:none;(不占位置的隐藏)
visibility: hidden;(占位置的隐藏)
三十七、窗口自适应
盒子根据窗口的大小进行改变
设置方法: html,body{height100%;}
三十八、两栏布局
calc()函数的使用
- calc()函数:用于动态计算长度值。
- 需要注意的是,运算符前后都需要保留一个空格,例如: width: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算;
- calc)函数支持“+”,“-”,“*”,“/”运算;
- calc()函数使用标准的数学运算优先级规则;
三栏布局
注意浮动块元素要排在上面,自适应元素排在后面才能插入
三十九、表单进阶
type属性 | 含义 |
---|---|
text | 密码输入框 |
password | 密码输入框 |
checkbox | 复选框 |
radio | 单选框 |
file | 上传文件 |
submit | 提交按钮 |
reset | 重置按钮 |
(一)单选框
<h2>单选框</h2>
<input type="radio" name="gender" checked="checked" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>
<!-- 用name来使选择在同一组 -->
<!-- checked为默认选中 -->
(二)复选框
<h2>复选框</h2>
<input type="checkbox" name="">玩
<input type="checkbox" name="">睡觉
(三)上传文件和隐藏(按钮)文字
<div>
<input type="file" name="" id="">
</div>
<div>
<div>图片按钮-代替提交按钮(input type="submit")
</div>
<form action="">
<!--上传文件-->
<input type="image" src="图片地址">
</form>
</div>
<div>
<div>隐藏按钮</div>
<!--隐藏-->
<input type="hidden" name="" id="" value="带给后端的个人信息,">
</div>
<div>
<div>禁用,只读</div>
<div>
<button disabled="disabled">注册 </button>
<br>
<input type="radio" disabled>不满意
<br>
<input type="text" disabled value="">
<input type="text" redonly value="">
</div>
</div>
(四)下拉菜单
<select>
、<option>
:下拉菜单
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>唱</option>
<option>跳</option>
<!-- 在option后加selected为默认选项 -->
<option>rap</option>
<option>篮球</option>
</select>
<select multiple> <!-- 多选 -->
<option>唱</option>
<option>跳</option>
<option>rap</option>
<option>篮球</option>
</select>
(五)文本域
<textarea>
:多行文本框
CSS部分(resize重新设置大小:vertical(竖直), horizontal(水平), both , none)
<!-- placeholder:提示文字-->
<h2>多行文本框</h2>
<textarea cols="114" rows="514" placeholder="">默认value:写在双标签内部,注意空格问题</textarea>
(六)字段集
<h1>表单进阶-字段集</h1>
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa">男
<br>
<input type="radio" name="aa">女
</fieldset>
四十、H5基础和语法
HTML5语法
- 内容类型(ContentType)
HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm". - DOCTYPE声明
不区分大小写 - 指定字符集编码
meta charset=“UTF-8” - 可省略标记的元素
不允许写结束标记的元素: br、col、embed、hr、img、input、 link、meta
可以省略结束标记的元素: li、 dt、dd、p、 option、colgroup、thead、tbody、tfoot、tr、 td、 th
可以省略全部标记的元素: html、head、body、colgroup、tbody - 省略引号
属性值可以使用双引号,也可以使用单引号。
四十一、HTML5新增语义化标签
section元素 表示页面中的一个内容区块
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的,与article内容相关的辅助信息
header元素 表示页面中一个内容区块或整个页面的标题
footer元素 表示页面中一个内容区块或整个页面的脚注
nav元素 表示页面中导航链接部分
figure元素 表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容(ie不兼容)
四十二、H5新增音频标签
Video和audio的应用
- video元素定义视频
<video src="movie.ogg" controls="controls">Video元素</video>
- audio元素定义音频
<audio src="someaduio.wav">Audio元素</audio>
controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。
四十三、H5新增视频标签
<video src=" " controls loop></video>
controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
loop属性:重复播放属性。
autoplay属性:如果出现该属性,则视频在就绪后马上播放。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。
四十四、增强表单
(一)input
Type= “color” 生成一个颜色选择的表单
Type= “tel” 唤起拨号盘表单
Type= “search”产生一个搜索意义的表单
Type= “range” 产生一个滑动条表单(value=“”:滑块位置,step:滑动的格数)
Type= “number” 产生一个数值表单
Type= "email” 限制用户必须输入email类型
Type= “url” 限制用户必须输入url类型
Type= “date” 限制用户必须输入日期
Type= “month” 限制用户必须输入月类型
Type= “week” 限制用户必须输入周类型
Type= “time” 限制用户必须输入时间类型
Type= “datetime-local” 选取本地时间
(二)数据列表
Datalist:选项列表
例:
<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3School.com.cn"></option>
<option label="Google" value="http://www.google.com"></option>
<option label="Microsoft" value="http://www.microsoft.com"></option>
</datalist>
提示: option元素永远都要设置value属性。
(三)属性
- autofocus属性:
给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得国标焦点,一个页面只能有一个。 - required属性:
验证输入不能为空 - Multiple:
可以输入一个或多个值,每个值之间用逗号分开例:<input type= "email"multiple/>
还可以应用于file - pattern
将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:<input patterm =“[0-9][A-Z]3)”title="输入内容:一个数与三个大写字母" placeholder="输入内容:一个数与三个大写字母’>
四十五、CSS3基础
一、cSS3的概念和优势
- CSS3是css技拔术的升级版本,CSS3语言开发是朝着模块化发同的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的摸块,更多新的模块也被加入进来。这些模块包括:盒子横型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。
- css的优点:CSS3将完全向后兼容,所以没有必要修改现夺在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说,CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果((比如说使用分栏)
二、渐进增强和优雅降级
- 渐进增强progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 - 优雅降级graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 - 区别:
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从—个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的孺要。降级(功能衰威)癔味着往回看,而渐进增强则意昧着朝前看,同时保证其根基处于安全地带。
四十六、选择器
(一)层级选择器
后代:M N
父子:M > N
兄弟:M ~ N(当前M下面所有的兄弟N标签)
相邻:M + N(当前M相邻下面的N标签)
(二)属性选择器
1、E[attr]:只使用属性名,但没有确定任何属性值;
2、E[attr=“value”]:指定属性名,并指定了该属性的属性值;
3、E[attr-="value ]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“一”不能不写
扩展知识
4、E[attr^ = “value”]:指定了属性名,并且有属性值,属性值是以value开头的;
5、E[attr$=“value”]:指定了属性名,并且有属性值,而且属性值是以value结束的
6、E[attr*=“value”]:指定了属性名,并且有属性值,而且属值中包含了value;
M[attar] {}
= : 完全匹配
-= :包含匹配
* = :部分匹配
^= :开头匹配
$= :结尾匹配
[][][] :组合匹配
(三)伪类选择器
1、结构伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始(even偶数,odd奇数)
X.only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
X:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTML
X:empty匹配没有任何子元素(包括包含文本)的元素X
2、目标伪类选择器
E:target 选择匹配E的所有元素,且匹配元素被相关URL指向
3、UI元素状态伪类选择器
E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
E:checked匹配所有用户界面(form表单)中处于选中状态的元素E
E:selection匹配E元素中被用户选中或处于高亮状态的部分
4、否定伪类选择器
E:not(s) (IE6-8浏览器不支持:not(J选择器。)
匹配所有不匹配简单选择符s的元素E
5、动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
四十七、文本阴影
text-shadow:10px(水平方向位移) 10px(垂直方向位移) 1px模糊程度 red(颜色)
四十八、盒子阴影
属性值:
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
Eg:box-shadow: 10px 10px 5px 10px #888888 inset;
四十九、圆角边框
border-radius:边框圆角
一个值:四个角
两个值:对角线(先左上右下,后左下右上)
三个值:左上,左下右上,右下
四个值:顺时针
border-top-left-radius:左上角
border-radius:30px/60px
水平方向30px/ 竖直方向60px
(border-top-left-radius:不支持)
border-radius:10px 20px 30px 40px/50px 60px 70px 80px
保持圆形需要注意border,padding的大小
border-radius:10%(相较于宽高的10%长度)
半圆:
border-radius:50px 50px 0 0;
扇形:(需要正方形)
border-radius:200px 0 0 0;
五十、字体引入
字体模块:@font-face
@lonthce丛-3中的一个摸块,他主要是记自己定义的Wb字体嵌入到你的网页中,随着@fot-rce模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在E4就支持)
@font-face的语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
@font-face语法说明:
1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family如“font-family:“YourWebFontName”;"
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;