html
如果选择用sublime text3来进行编写html,遇到!+tab 无法生成html骨架可以参考
html css 参考手册
HTML（HyperText Mark-up Language），是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
html 文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> xhtml 1.0 文档类型 </title>
</head>
<body>
</body>
</html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> html5文档类型 </title>
</head>
<body>
</body>
</html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
html标题标签
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题，其后是<h2>，再其次是 <h3> ， 以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
html段落标签、换行标签与字符实体
html段落标签
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。
html换行标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行
html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体
“<”和“>”的字符实体分别为<(less than)，>(great than)
html字符转义
html块标签、含样式的标签
html块标签
- <div> 标签 块元素，表示一块内容，没有具体的语义。
- <span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签 - <em> 标签 行内元素，表示语气中的强调词（倾斜）
- <i> 标签 行内元素，表示专业词汇（倾斜）
- <b> 标签 行内元素，表示文档中的关键字或者产品名（加粗）
- <strong> 标签 行内元素，表示非常重要的内容（加粗）
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
html图像标签、绝对路径和相对路径
html图像标签
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
- src属性 定义图片的引用地址
- alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html链接标签
<a>标签可以在网页上定义一个链接地址，它的常用属性有：
- href属性 定义跳转的地址
- title属性 定义鼠标悬停时弹出的提示文字框
- target属性 定义链接窗口打开的位置
- target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
- target="_blank" 新页面会在新开的一个浏览器窗口打开
<a href="#"></a> <!-- # 表示链接到页面顶部 -->
<a href="http://www.baidu.com/" title="跳转到百度的链接">百度网</a>
<a href="2.html" target="_blank">测试页面2</a>
html列表
有序列表
在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表，每条项目上会按1、2、3编号。
可以通过
无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现
<ul>
<li>新闻标题一</li>
<li>新闻标题二</li>
<li>新闻标题三</li>
</ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,常用这种列表。
<!--ol/ul>li*n + tab 生成n个li的有序/无序列表-->
<!--ol/ul>(li>a{$})*n + tab 生成自动编号的如下形式-->
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释
<!-- dl>(dd+dt)*3 -->
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式，一般有“get”方式和“post”方式
<label>标签 为表单元素定义文字标注
<input>标签 定义通用的表单元素
type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- type=“image” 定义图片作为提交按钮，用src属性定义图片地址
- type=“hidden” 定义一个隐藏的表单域，用来存储值
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉表单元素
<option>标签 与标签配合，定义下拉表单元素中的选项
<!--表单制作-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>注册表单</h1>
<!--
form 声明表单区间
name为键名
提交时候以name值作为键值提交
type非文本输入及textarea等需要指定value作为键值
-->
<!--
action为提交地址，默认为本地
method 为提交方式，大量的、含敏感信息的采用post报文形式-->
<!--
for 属性为 点击id相同的label激活
-->
<form action="" method="post">
<div>
<label for="123">用户名：</label>
<input type="text" name="username" id="123" />
</div>
<br />
<div>
<label for="321">密 码：</label>
<input type="password" name="pw" id="321" />
</div>
<br />
<div>
<label>性 别：</label>
<input type="radio" name="gender" value="0" id ="m" />
<label for="m">男</label>
<input type="radio" name="gender" value="0" />女
</div>
<br />
<div>
<label>爱 好：</label>
<input type="checkbox" name="like" value="study" />学习
<input type="checkbox" name="like" value="frontend" />前端
<input type="checkbox" name="like" value="python" />python
<input type="checkbox" name="like" value="AI" />AI
</div>
<br />
<div>
<label>个人照片：</label>
<input type="file" name="" />
</div>
<div>
<label>个人描述：</label>
<!--多行文本输入框 textarea-->
<textarea name = "introduce"></textarea>
</div>
<br />
<div>
<label>籍 贯：</label>
<select name="size">
<option value="0">北京</option>
<option value="1">河南</option>
<option value="2">河北</option>
<option value="3">甘肃</option>
</select>
</div>
<br />
<div>
<input type="hidden" name="hid01" value="12">
</div>
<br />
<div>
<input type="submit" name="" value="提交" />
<input type="reset" name="" value="重置" />
</div>
<div>
<input type="image" src="./images/goods.jpg" name="">
</div>
</form>
</body>
</html>
html表格
<table>标签：声明一个表格，它的常用属性如下：
- border属性 定义表格的边框，设置值是数值
- cellpadding属性 定义单元格内容与边框的距离，设置值是数值
- cellspacing属性 定义单元格与单元格之间的距离，设置值是数值
- align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right
<tr>标签：定义表格中的一行
<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
- align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
- valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
- colspan 设置单元格水平合并，设置值是数值
- rowspan 设置单元格垂直合并，设置值是数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<h1>表格</h1>
<table border="1" width = "300" height = "200" align="center">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<!--valign 垂直方向
top /middle / bottom-->
<td valign="top" align="center">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
页面布局概述
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
- table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
- HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
table布局
table来做整体页面的布局，布局的技巧归纳为如下几点：
- 按照设计图的尺寸设置表格的宽高以及单元格的宽高。
- 将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
- 针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
- 单元格中的元素或者嵌套的表格用align和valign设置对齐方式
- 通过属性或者css样式设置单元格中元素的样式
css
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS(Cascading Style Sheets)由此思想而诞生，CSS即层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
div{
width:100px;
height:100px;
color:red;
}
css页面引入方法
- 外联式：通过link标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css"> - 嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css"> div{ width:100px; height:100px; color:red; } </style> - 内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">......</div>
css文本设置
常用的应用文本的css样式：
- color 设置文字的颜色，如： color:black; 或者 color:(255,255,255); 或者color:#000;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:‘Microsoft Yahei’;
- font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- text-decoration:underline/none; 设置下划线/不设置下划线
- text-indent: 40px; 首行缩进2个汉字，假设一个汉字20px
- text-align: center/left/right;居中/靠左/靠右，注意<a>标签默认为文字长度，本身已居中，不能相对页面宽度居中
- line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px ‘Microsoft Yahei’;
css颜色表示法
css颜色值主要有三种表示方法：
- 颜色名表示，比如：red 红色，gold 金色
- rgb表示，比如：rgb(255,0,0)表示红色
- 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
css选择器
标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
*{
margin:0;
padding:0;
}
div{
height:100px;
width:100px;
}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
#box{
color:red;
}
<div id='box'></div> <!-- 只对应#box的样式，其他div不能应用此样式 -->
<div></div>
类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
.box1{
color:red;
}
<div class='box1'></div> <!-- 只对应.box1的样式，其他div不能应用此样式 -->
<div class='box2'></div>
层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
.box{
color:red;
}
.box .span{
color:blue;
font-weight:bold;
}
<div class='box'>
<span></span>
<a href="#"></a>
</div>
组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组选择器</title>
<style type="text/css">
/*相同地方用,隔开*/
.box01,.box02,.box03{
font-size: 20px;
text-indent: 40px;
}
.box01{
color:red;
}
.box02{
color:pink;
}
.box03{
color:gold;
}
</style>
</head>
<body>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
<div class="box03">这是第三个div</div>
</body>
</html>
伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 伪类选择器表示一种状态 -->
<title>伪类和伪元素选择器</title>
<style type="text/css">
.link{
font-size:30px;
text-decoration: none;
color:green;
}
/*.link:hover 伪类选择器,表示鼠标悬浮在元素上时的状态*/
.link:hover{
color:gold;
font-style:italic;
font-weight: bold;
}
.box01,.box02{
font-size:20px;
}
.box01:before{
content:"前面文字";
color:red;
}
.box02:after{
content:"后面文字 ";
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="link" title="baidu">百度链接</a>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
</body>
</html>
CSS盒子模型
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。下图为chrome中elements中的styles显示的盒模型，便于参考页面布局。
设置宽高
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框
以上边框为例
border-top-color:red; /* 设置顶部边框颜色为红色 */
border-top-width:10px; /* 设置顶部边框粗细为10px */
border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */
上面三句可以简写成一句：
border-top:10px solid red；
同理，如果4个边框同样设置
border:10px solid #fff
设置内间距padding
padding-top：20px; /* 设置顶部内间距20px */
padding-left:30px; /* 设置左边内间距30px */
padding-right:40px; /* 设置右边内间距40px */
padding-bottom:50px; /* 设置底部内间距50px */
同时设置4个内间距 四个值按照顺时针方向，分别设置的是 上 右 下 左
padding:20px 40px 50px 30px;
如果padding后跟3、2、1值，分别表示
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/
padding：20px; /* 设置四边内边距为20px */
设置外间距margin
外边距的设置方法和padding的设置方法相同。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.box{
/*注意这里，最终盒子宽度200px =width + padding*2+border*2,因此width取140,height同理*/
width:140px;
height:140px;
padding: 20px;
color:#000;
background-color: gold;
border:10px solid #000;
}
</style>
</head>
<body>
<div class='box'>
盒子里面的文字内容，距离边框有一定距离
</div>
</body>
</html>
提示：可以通过截图工具等来粗略测量盒子的尺寸
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style>
.box{
width:380px;
height:20px;
/*background-color: gold;*/
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
color: #333;
font-family: 'Microsoft Yahei' ;
padding:15px 20px;
/*文字默认存在行高，避免上下产生间距，可设置行高与字号一样*/
line-height: 20px;
/* 或者将行高设置为box的高度 也可以使文字居中
line-height:50px;
采用首行缩进方式，也可以达到左右布局改变的目的
text-indent:20px;*/
}
</style>
</head>
<body>
<div class='box'>新闻列表</div>
</body>
</html>
盒模型使用技巧及相关问题
margin相关技巧
- 设置元素水平居中： margin:x auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin技巧</title> <style type="text/css"> .box{ width:200px; height:200px; background-color:gold; /*margin:auto; 只能用于左右即水平自动居中*/ /*上50 下100 水平自动居中*/ margin:50px auto; } </style> </head> <body> <div class="box"></div> </body> </html> - margin负值让元素位移及边框合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin负值</title> <style type="text/css"> /* body默认8px的边距，box若想紧贴，需要设置body中margin*/ body{ margin-left:0px; } .box{ width:202px; height:156px; background-color:green; margin:50px auto 0; } .box div{ width:200px; height:30px; background-color:gold; border:solid 1px green; /*层叠样式表时，下边框可以设置为0,避免重复叠加*/ border-bottom:0px; } .box .last{ border-bottom:1px solid green; } /* 第二种方法，采用负值可以省略最后一个盒子的定义 box div{ width:200px; height:30px; background-color:gold; border:solid 1px green; /*层叠样式表时，下边框可以设置为0,避免重复叠加*/ /* margin-top:-1px; }*/ </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div class="last"></div> </div> </body> </html>
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
- 使用这种特性
- 设置一边的外边距，一般设置margin-top
- 将元素浮动或者定位
用下面案例来进行说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框合并</title>
<style>
.box{
margin:50px auto;
width:500px;
border:1px solid #000;
}
.box div{
/*通过利用这种特性，使得外盒子宽度达到502*/
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
<div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
</div>
</body>
</html>
margin-top 塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败
margin-top 塌陷
解决方法如下：
- 外部盒子设置一个边框
- 外部盒子设置 overflow:hidden
- 使用伪元素类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin-top塌陷</title>
<style type="text/css">
/*解决塌陷第三种方法，伪元素类，类似与第一种方法*/
.clearfix:before{
content:"";
display: table;
}
.con{
width:202px;
height:202px;
background-color:gold;
/* border:1px #000 solid; 解决塌陷第一种方法，外部盒子设置边框*/
/*overflow:hidden; 解决塌陷第二种方法，利用元素溢出设置overflow:hidden*/
}
.box{
width:120px;
height:50px;
background-color:green;
margin:75px auto ;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
css元素溢出
元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css">
.box{
width:300px;
height:200px;
border:1px #000 solid;
margin:50px auto 0;
background-color:gold;
line-height:30px;
overflow:auto;
}
</style>
</head>
<body>
<div class="box">当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。
</div>
</body>
</html>
auto 效果
块元素、内联元素、内联块元素
块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行、即使设置了宽度
内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
- 支持部分样式（不支持宽、高、margin上下、padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式
以a标签进行说明，当多个a标签并在一行时，会默认有间隙，解决内联元素间隙的方法
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0，内联元素自身再设置font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联元素</title>
<style type="text/css">
.box{
width:500px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
}
.box a{
background-color:gold;
text-decoration:none;
font-size:16px;
}
.box2{
width:500px;
height:100px;
border:1px solid #000;
margin:50px auto 0;
/*父元素可以用text-align属性设置子元素水平对齐方式*/
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<a href="#">链接文字一</a>
<a href="#">链接文字二</a>
<a href="#">链接文字三</a>
</div>
<div class="box2">
<a href="#">链接文字</a>
</div>
</body>
</html>
内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
- none 元素隐藏且不占位置
- block 元素以块元素显示
- inline 元素以内联元素显示
- inline-block 元素以内联块元素显示
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 694px;
margin:50px auto;
font-size:0;
}
.box div{
width:98px;
height: 48px;
font-size:16px;
font-family: 'Microsoft Yahei';
color:pink;
border: 1px solid gold;
display: inline-block;
text-align: center;
line-height: 48px;
margin-left:-1px;
}
.box div:hover{
background-color: gold;
color:white;
}
</style>
</head>
<body>
<div class="box">
<div>首页</div>
<div>公司简介</div>
<div>解决方案</div>
<div>公司新闻</div>
<div>行业动态</div>
<div>招贤纳士</div>
<div>联系我们</div>
</div>
</body>
</html>
浮动
浮动特性
- 浮动元素有左浮动(float:left)和右浮动(float:right)两种
- 浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- 相邻浮动的块元素可以并在一行，超出父级宽度就换行
- 浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
- 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
- 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
- 浮动元素之间没有垂直margin的合并
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height:40px;
width:400px;
border-bottom: 1px solid #ff8200;
margin:50px auto;
overflow: hidden;
}
.box .news{
width:80px;
height:40px;
font:16px/40px 'Microsoft Yahei';
color:#fff;
border:1px solid #ff8200;
float:left;
text-align: center;
background-color:#ff8200;
}
.box .more{
font:14px/40px 'Microsoft Yahei';
color:#666;
float:right;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<div class="news">新闻列表</div>
<a class="more">更多></a>
</div>
</body>
</html>
清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
/*解决IE不兼容问题，zoom:1表示网页默认不放大和缩小*/
.clearfix{
zoom:1;
}
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.con{
width:210px;
border:1px solid #000;
overflow:hidden;
}
.box{
width:50px;
height:50px;
margin:10px;
float:left;
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>
</body>
</html>
定位
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
定位
css的position属性来设置元素的定位类型(浏览器或者盒子左上角为（0,0），向下或向右坐标值递增)，postion的设置项如下：
- relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
- inherit 从父元素继承 position 属性的值。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级，Z-index 可用于将在一个元素放置于另一元素之后。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
案例：相对定位-元素本身相对自身原位置进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
}
.box01,.box02{
width:300px;
height:100px;
margin:10px;
}
.box01{
background-color:green;
position:relative;
left:50px;
top:50px;
}
.box02{
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
案例：绝对定位-相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
position:relative;
}
.box01,.box02{
width:300px;
height:100px;
margin:10px;
}
.box01{
background-color:green;
/*相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。*/
position:absolute;
left:50px;
top:50px;
}
.box02{
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
案例：固定定位-相对于浏览器窗口进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:50px auto 0;
}
.box01,.box02{
width:300px;
height:100px;
margin:10px;
}
.box01{
background-color:green;
/*相对于浏览器窗口进行定位*/
position:fixed;
left:50px;
top:50px;
}
.box02{
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style type="text/css">
.con{
width:100px;
height:100px;
background-color:gold;
margin:50px auto 0;
position:relative;
border-radius:14px;
}
.box{
width:28px;
height:28px;
background-color:red;
color:#fff;
text-align:center;
line-height:28px;
position:absolute;
left:86px;
top:-14px;
/*半径为14的圆*/
border-radius:14px;
}
</style>
</head>
<body>
<div class="con">
<div class="box">5</div>
</div>
</body>
</html>
案例:弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<style type="text/css">
.menu{
height:80px;
background-color:gold;
position:fixed;
width:960px;
top:0px;
/*fixed定位后，left：50%水平居中*/
left:50%;
margin-left:-480px;
}
p{
text-align:center;
}
.popup{
width:500px;
height:300px;
border:1px solid #000;
background:#fff;
position:fixed;
left:50%;
margin-left:-251px;
top:50%;
margin-top:-151px;
z-index:999;
}
.popup h2{
background-color:gold;
margin:10px;
height:40px;
}
.mask{
position:fixed;
width:100%;
height:100%;
background-color:#000;
left:0px;
top:0px;
/*opacity 透明度*/
opacity:0.5;
z-index: 998;
}
</style>
</head>
<body>
<div class="menu">菜单文字</div>
<div class="popup"><h2>弹框</h2></div>
<div class="mask"></div>
<p>网页文字</p>
<br>
<br>
<br>
<br>
<p>网页文字</p>
<br>
<br>
<br>
<br>
<p>网页文字</p>
<br>
<br>
<br>
<br>
<p>网页文字</p>
<br>
<br>
<br>
<br>
<p>网页文字</p>
<br>
<br>
<br>
<br>
<p>网页文字</p>
<br>
<br>
<br>
<br>
</body>
</html>
background属性
background是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
- scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed 当页面的其余部分滚动时，背景图像不会移动。
- inherit 规定应该从父元素继承 background-attachment 属性的设置。
实际应用中，background属性可以将上面所有的设置项放在一起，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
background-position的设置，可以在水平方向设置“left”、“center”、“right”，在垂直方向设置“top”、“center”、“bottom”，除了设置这些方位词之外，还可以设置具体的数值。
案例：电影雪碧图制作
通常会将所有图表制作为一整幅图即雪碧图，显示效果实际是整幅图通过调整背景图片的位置实现不同图标的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图列表</title>
<style type="text/css">
.list{
/* 清除li的圆点样式*/
list-style: none;
width:300px;
height:305px;
margin:50px auto 0;
padding:0px;
}
.list li{
height:60;
border-bottom:1px dotted;
line-height:60px;
text-indent: 50px;
/*由于下句针对每个li做出插入操作，因此需要对后续每个图进行微调*/
background:url(path) left 10px no-repeat;
}
.list .icon02{
background-position:0px -71px ;
}
.list .icon03{
background-position:0px -154px ;
}
.list .icon04{
background-position:0px -235px ;
}
.list .icon05{
background-position:0px -315px ;
}
</style>
</head>
<body>
<ul class="list">
<li>复仇者联盟</li>
<li class="icon02">复仇者联盟1</li>
<li class="icon03">复仇者联盟2</li>
<li class="icon04">复仇者联盟3</li>
<li class="icon05">待续....</li>
</ul>
</body>
</html>
特征布局实例
案例：翻页（所需知识点：盒模型、内联元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.page{
width:600px;
height:40px;
border:1px solid #666;
margin:50px auto;
text-align: center;
}
.page li{
list-style:none;
display: inline-block;
height:26px;
background-color:gold;
margin:7px 5px 0;
}
.page li a{
display:block;
line-height: 26px;
color:#000;
padding:0 10px;
font:bold 12px/26px 'Microsoft Yahei';
}
.page li a:hover{
background-color:blue;
color:white;
}
</style>
</head>
<body>
<ul class="page">
<li><a href="">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">...</a></li>
<li><a href="">17</a></li>
<li><a href="">18</a></li>
<li><a href="">19</a></li>
<li><a href="">20</a></li>
<li><a href="">下一页</a></li>
</ul>
</body>
</html>
案例：导航条01（所需知识点：盒模型、行内元素布局）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条01</title>
<style>
ul{
list-style:none;
margin:50px auto 0;
width:958px;
height:40px;
border:1px solid #000;
text-align: center;
padding:0;
font-size: 0;
}
ul li{
display:inline-block;
height:40px;
font-size:14px;
}
ul li a{
display: block;
text-decoration: none;
font:14px/40px 'Microsoft Yahei';
height: 40px;
}
ul li span{
display: block;
margin:0 20px;
font:14px/40px 'Microsoft Yahei';
}
ul li a:hover{
color:#ff8800;
}
</style>
</head>
<body>
<ul>
<li><a href="">首页</a></li>
<li><span>|</span></li>
<li><a href="">网站建设</a></li>
<li><span>|</span></li>
<li><a href="">程序开发</a></li>
<li><span>|</span></li>
<li><a href="">网络营销</a></li>
<li><span>|</span></li>
<li><a href="">企业VI</a></li>
<li><span>|</span></li>
<li><a href="">案例展示</a></li>
<li><span>|</span></li>
<li><a href="">联系我们</a></li>
</ul>
</body>
</html>
案例：导航条02（所需知识点：盒模型、浮动、定位、字体对齐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条02</title>
<style type="text/css">
.menu{
list-style:none;
margin:50px auto 0;
padding:0;
width:960px;
height:40px;
background-color:#55a8ea;
border:1px solid #000;
text-align:center;
font-size:0px;
position:relative;
}
.menu li{
float:left;
width:100px;
height:40px;
}
.menu li a{
display:block;
width:100px;
height:40px;
font:normal 14px/40px "Microsoft Yahei";
text-align:center;
color:#fff;
text-decoration:none;
}
.menu li a:hover{
color:#00619f;
}
.menu .new{
width:33px;
height:20px;
background:url(path) no-repeat;
position:absolute;
left:432px;
top:-10px;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
<!-- <li class="new"><img src="./images/new.png" alt="new标签" title="新动态"></li> -->
<li class="new"></li>
</ul>
</body>
</html>
前端页面开发流程
- 创建页面项目目录
- 使用Photoshop对效果图切图，切出网页制作中需要的小图片
- photoshop
- 将装饰类图像合并，制作成雪碧图
- 结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面
CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
- !important，加在样式属性值后，权重值为 10000
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： content、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
<style type="text/css">
div{
/*!important + 标签选择器 10000+1*/
color:red !important;
}
</style>
......
<!--内联样式 权重1000-->
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，
所以文字的最终颜色为red
-->
<style type="text/css">
#content div.main_content h2{
/*id选择器 100 标签选择器1 类选择器10 标签选择器1 */
color:red;
}
#content .main_content h2{
/*id选择器100 类选择器10 标签选择器1*/
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算： 100+1+10+1，结果为112；
第二条样式的权重计算： 100+10+1，结果为111；
h2标题的最终颜色为red
-->
CSS3新增选择器
-
E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
<style type="text/css"> /* 第2个子元素div匹配 */ .list div:nth-child(2){ background-color:red; } </style> ...... <div class="list"> <h2>1</h2> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> -
E:first-child：匹配元素类型为E且是父元素的第一个子元素
-
E:last-child：匹配元素类型为E且是父元素的最后一个子元素
-
E > F E元素下面第一层子集
-
E ~ F E元素后面的兄弟元素
-
E + F 紧挨着的后面的兄弟元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3新增选择器01</title> <style type="text/css"> /* 匹配第二个类型是div子元素 */ .con div:nth-child(2){ color:red; } .con div:nth-child(3){ color:pink; } /* .list li:nth-child(1){ background-color:red; } 等同于下面的写法： */ .list li:first-child{ background-color:red; } /* .list li:nth-child(8){ background-color:green; } 等同于下面的写法： */ .list li:last-child{ background-color:green; } /* 2n:偶数行; 2n+1:奇数行; */ .list2 li:nth-child(2n+1){ background-color:gold; } </style> </head> <body> <div class="con"> <h3>标题</h3> <div>这是一个div</div> <div>这是第二个div</div> </div> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <ul class="list2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3新增选择器02</title> <style type="text/css"> /*E > F E元素下面第一层子集 E ~ F E元素后面的兄弟元素 E + F 紧挨着的后面的兄弟元素*/ .box > div{ border:1px solid red; padding:10px; margin:10px; } .box2 .title2{ color:red; } .box2 .title2 ~ p{ color:pink } /* .box2 .title2 + p{ color:gold; }*/ .box2 .title1 + p{ color:green; } </style> </head> <body> <div class="box"> <div> <div>这是div里面的文字</div> </div> </div> <div class="box2"> <h3 class="title1">这是标题一</h3> <p>这是段落一</p> <h3 class="title2">这是标题二</h3> <p>这是段落二</p> <p>这是段落二二</p> <h3>这是标题三</h3> <p>这是段落三</p> </div> </body> </html> ``` **属性选择器：** * E[attr] 含有attr属性的元素 ```html <style type="text/css"> div[data-attr='ok']{ color:red; } </style> ...... <div data-attr="ok">这是一个div元素</div> -
E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
-
E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
-
E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
-
E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3新增选择器03</title> <style type="text/css"> /* 匹配所有有class属性的div */ .con div[class]{ background-color:gold; margin-bottom:10px; } /* 匹配class属性值是ok的div */ .con div[class="ok"]{ background-color:pink } /* 匹配class属性值是“ok”开头的div */ .con div[class^="ok"]{ text-indent:30px; } /* 匹配class属性值是“ok”结尾的div */ .con div[class$="ok"]{ font-size:30px; } /* 匹配class属性值含有“ok”的div */ .con div[class*="ok"]{ border-bottom:2px solid #000; } </style> </head> <body> <div class="con"> <div class="ok">1</div> <div class="okabc">2</div> <div class="abcok">3</div> <div class="abcok123">4</div> <div>5</div> </div> </body> </html>
CSS3圆角、rgba
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时按顺时针方向分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%
rgba（新的颜色值表示法）
盒子透明度表示法：
.box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
- transition-property 设置过渡的属性，比如：width height background-color
- transition-duration 设置过渡的时间，比如：1s 500ms
- transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
- transition-delay 设置动画的延迟
- transition: property duration timing-function delay 同时设置四个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画</title>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:gold;
/*1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性*/
/*设置多个动作,通过延迟*/
transition:width 1s ease,height 1s ease 1s,background-color 1s ease 2s;
}
.box:hover{
width:600px;
height:500px;
background-color:red;
}
.box2{
width:100px;
height:100px;
background-color:gold;
margin-top:50px;
/*all为全部变化属性的关键字*/
/*transition:width 1s ease,height 1s ease,background-color 1s ease;*/
transition:all 1s ease ;
}
.box2:hover{
width:600px;
height:500px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
案例：当鼠标移入时候，显示提示弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.con{
width:325px;
height:327px;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.bg_img{
width:325px;
height:160px;
position:absolute;
left:0;
top:327px;
background-color: rgba(0,0,0,0.3);
padding:0;
color:gold;
transition:all 1s ease;
}
.con:hover .bg_img{
top:163px;
}
</style>
</head>
<body>
<div class="con">
<img src='./1589079349(1).jpg'></img>
<div class='bg_img'>
<h3>html简介</h3>
<p>HTML称为超文本标记语言，是一种标识性的语言</p>
</div>
</div>
</body>
</html>
CSS3 transform变换
transform为静态效果，主要设置属性如下：
- translate(x,y) 设置盒子位移
- scale(x,y) 设置盒子缩放
- rotate(deg) 设置盒子旋转
- skew(x-angle,y-angle) 设置盒子斜切
- perspective 设置透视距离
- transform-style flat | preserve-3d 设置盒子是否按3d空间显示
- translateX、translateY、translateZ 设置三维移动
- rotateX、rotateY、rotateZ 设置三维旋转
- scaleX、scaleY、scaleZ 设置三维缩放
- tranform-origin 设置变形的中心点
- backface-visibility 设置盒子背面是否可见
案例：变换中心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变换中心</title>
<style type="text/css">
.box01,.box02,.box03,.box04{
width:200px;
height:200px;
border:3px solid #000;
background:gold;
margin:30px;
float:left;
transition:all 500ms ease;
}
.box02{
/*左边的中心*/
transform-origin:left center;
}
.box03{
/*左上角*/
transform-origin:left top;
}
.box04{
/*右下角*/
transform-origin:right bottom;
}
.box01:hover,.box02:hover,.box03:hover,.box04:hover{
transform:rotate(45deg);
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
<div class="box03"></div>
<div class="box04"></div>
</body>
</html>
案例：三维旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三维旋转</title>
<style type="text/css">
/* 旋转轴向
X:从左往右
Y:从上往下
Z:从屏幕内向外
判断旋转方向:让轴向对着自己,顺时针方向*/
.box{
width:300px;
height:300px;
background-color:gold;
border:3px solid #000;
margin:50px auto 0;
/*transform-style flat | preserve-3d 设置盒子是否按3d空间显示*/
transform-style:preserve-3d;
/*rotateX、rotateY、rotateZ 设置三维旋转*/
/*perspective 设置透视距离 800为经验值*/
/*transfrom 后顺序不同,执行效果不同*/
/*做变形动画需要设置初始值,否则会出现跳变的bug*/
transform:perspective(800px) rotateY(0deg) ;
transition:all 500ms ease;
}
.box:hover{
transform:perspective(800px) rotateY(45deg) ;
}
.box2{
width:300px;
height:300px;
background-color:gold;
border:3px solid #000;
margin:50px auto 0;
transform-style:preserve-3d;
/*rotateX、rotateY、rotateZ 设置三维旋转*/
/*perspective 设置透视距离 800为经验值*/
/*transfrom 后顺序不同,执行效果不同*/
/*做变形动画需要设置初始值,否则会出现跳变的bug*/
transform:perspective(800px) rotateX(0deg) ;
transition:all 500ms ease;
}
.box2:hover{
transform:perspective(800px) rotateX(45deg) ;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
CSS3 animation动画
- @keyframes 定义关键帧动画
- animation-name 动画名称
- animation-duration 动画时间
- animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
- animation-delay 动画延迟
- animation-iteration-count 动画播放次数 n|infinite
- animation-direction 动画结束后是否反向还原 normal|alternate
- animation-play-state 动画状态 paused(停止)|running(运动)
- animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
- animation:name duration timing-function delay iteration-count direction;同时设置多个属性
案例：风车动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>风车动画</title>
<style type="text/css">
@keyframes rotating{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.rotation{
display:block;
width:400px;
height:400px;
margin:50px auto 0;
animation:rotating 1s infinite linear normal;
}
</style>
</head>
<body>
<img src="./images/fengche.png" alt="风车" class="rotation">
</body>
</html>
案例：走路动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路动画</title>
<style type="text/css">
@keyframes walking{
from{
left:0px;
}
to{
/*960px 为整个图片大小*/
left:-960px;
}
}
.box{
width:120px;
height:180px;
border:1px solid #ddd;
margin:50px auto 0;
overflow:hidden;
position:relative;
}
.box img{
position:absolute;
left:0;
top:0;
animation:walking 1s steps(8) infinite;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/walking.png" alt="走路动画">
</div>
</body>
</html>
移动端与PC端页面布局区别
视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta:vp + tab -->
<!-- name = 视口,设备宽度,允许用户缩放,初始缩放屏幕大小,最大缩放大小,最小缩放大小 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>视口</title>
<style type="text/css">
.box{
width:300px;
height:300px;
background-color:gold;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
pc端与移动端渲染网页过程：
视网膜屏幕（retina屏幕）清晰度解决方案
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
背景图强制改变大小，可以使用background新属性
background新属性
background-size:
- length：用长度值指定背景图像大小。不允许负值。
- percentage：用百分比指定背景图像大小。不允许负值。
- auto：背景图像的真实大小。
- cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
- contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图设置</title> <style type="text/css"> .box{ width:200px; height:300px; border:2px solid #000; margin:50px auto 0; background:url(./images/apple.png) no-repeat; /* background-size: length：用长度值指定背景图像大小。不允许负值。 percentage：用百分比指定背景图像大小。不允许负值。 auto：背景图像的真实大小。 cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。 contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。*/ /*background-size:300px 300px;*/ /*background-size:100% 100%;*/ /*background-size:auto;*/ /*background-size:cover;*/ background-size:contain; } </style> </head> <body> <div class="box"></div> </body> </html>
适配布局类型
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
- content-box 默认的盒子尺寸计算方式
- border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
拉伸页面窗口可以试试效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>流体布局</title> <style type="text/css"> body{ margin:0px; } /*流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，*/ .con a{ display:block; /*可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);*/ /*4px 为边框重合的像素大小*/ width:calc(25% - 4px); height:100px; background-color:gold; text-align:center; line-height: 100px; float:left; text-decoration: none; color:#333; font-size:18px; border:2px solid #000; } </style> </head> <body> <div class="con"> <a href="#">菜单文字</a> <a href="#">菜单文字</a> <a href="#">菜单文字</a> <a href="#">菜单文字</a> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>流体布局02</title> <style type="text/css"> body{ margin:0px; } /*流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，*/ .con a{ display:block; /* box-sizing 1、content-box 默认的盒子尺寸计算方式 content+padding+border 2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内*/ height:100px; width:25%; background-color:gold; text-align:center; line-height: 100px; float:left; text-decoration: none; color:#333; font-size:18px; border:2px solid #000; box-sizing:border-box; } </style> </head> <body> <div class="con"> <a href="#">菜单文字</a> <a href="#">菜单文字</a> <a href="#">菜单文字</a> <a href="#">菜单文字</a> </div> </body> </html>
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>响应式布局</title>
<style type="text/css">
body{
margin:0px;
}
.con div{
width:23%;
border:solid 2px #000;
background-color:gold;
height:200px;
margin:1%;
float:left;
box-sizing: border-box;
}
/*屏幕宽度小于800时,采用以下布局*/
@media (max-width:800px){
.con div{
width:46%;
margin:2%;
}
}
/*屏幕宽度小于400时,采用以下布局*/
@media (max-width:400px){
.con div{
width:94%;
margin:3%;
}
}
</style>
</head>
<body>
<div class="con">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
- 全适配：响应式布局+流体布局
- 移动端适配：
- 流体布局+少量响应式
- 基于rem的布局
CSS3 浏览器前缀
浏览器样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
自动添加浏览器前缀
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
可以在Sublime text中通过package control 安装 autoprefixer
Autoprefixer在Sublime text中的设置：
preferences/key Bindings-User
{ “keys”: [“ctrl+alt+x”], “command”: “autoprefixer” } 设置快捷键，ctrl+alt+x可以根据自己习惯设置不同的快捷键
Preferences>package setting>AutoPrefixer>Setting-User
{
"browsers": ["last 7 versions"],
"cascade": true,
"remove": true
}
last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀
HTML5新增标签
新增语义标签
- <header> 页面头部、页眉
- <nav> 页面导航
- <article> 一篇文章
- <section> 文章中的章节
- <aside> 侧边栏
- <footer> 页面底部、页脚
音频视频
- <audio>
- <video>
PC端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>
基于rem的布局
em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>em单位</title>
<style type="text/css">
.box01{
/*chrome默认font-size为 12px,小于12默认以12为font-size*/
font-size:15px;
/*20em 为20*15px 即300px*/
width:20em;
height:10em;
background-color:gold;
}
.box02{
font-size:20px;
width:20em;
height:10em;
background-color:green;
}
p{
font-size:20px;
text-indent:2em;
}
</style>
</head>
<body>
<div class="box01"></div><br><br>
<div class="box02"></div>
<p>首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。</p>
</body>
</html>
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目
链接
进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
配置参数
参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", “.less”, “.sass”]。
<!DOCTYPE html>
<html lang="en" style="font-size:20px">
<!-- ，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小 -->
<head>
<meta charset="UTF-8">
<title>rem单位</title>
<style type="text/css">
.box01{
/*chrome默认font-size为 12px,小于12默认以12为font-size*/
font-size:15px;
/*20em 为20*15px 即300px*/
width:20rem;
height:10rem;
background-color:gold;
}
.box02{
font-size:20px;
width:20rem;
height:10rem;
background-color:green;
}
p{
font-size:20px;
text-indent:2rem;
}
</style>
</head>
<body>
<div class="box01"></div><br><br>
<div class="box02"></div>
<p>首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。</p>
</body>
</html>
rem布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="./js/set_root.js"></script>
<title>rem布局</title>
<style type="text/css">
body{
margin:0px;
}
.header{
height:2.5rem;
background-color:gold;
text-align:center;
line-height:2.5rem;
font-size:20px;
}
</style>
</head>
<body>
<div class="header">头部文字</div>
</body>
</html>
set_root.js
(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
}
calc();
window.addEventListener('resize',calc);
})();
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
