目录
HTML
编写软件：VS code
浏览器自动刷新插件：Live Server
浏览器快捷打开插件：Open In Browser 快捷键 alt+B
svg自动代码补全插件：SVG
实用软件：PxCook
<!DOCTYPE html> <!--文档声明,解析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> <!--页面标题-->
</head>
<body> <!--内容-->
</body>
</html>标签
分类
父子标签 兄弟标签
规定子标签比父标签多层缩进
单双标签
<br> <hr> 为单标签 <h1></h1> 为双标签
不同功能标签
<body> <!--内容-->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<p>段落标签</p>
<p>
缩进一个字母的空格
     缩进一个汉字的空格
</p>
<p align = center>文字居中属性</p> <!--align 属性名：对齐方式 center 属性值 ：居中-->
<img src="cc.png" alt="老师" title="老师照片"> <!--图片标签 属性名：src（sourse） 图片地址(相对地址/绝对地址) 属性名：alt 破损图片文本提示 属性名：title 图片标题名-->
<a href="链接地址">链接名</a> <!--a（anchor）锚点标签 外部链接 href（Hypertext Reference 超文本引用）-->
<p id="123"></p>
<a href="#123"></a> <!--a（anchor）锚点标签 内部跳转链接-->
<!-- 修饰文本标签 --> <!---->
<b>加粗 （bold ）</b> <strong>增强显示(加粗)</strong> <!--strong加重语气-->
<i>倾斜（italic）</i> <em>强调倾斜（empnasize）</em> <!--em 增加爬虫搜索-->
<s>删除线文本（strike）</s> <del>删除线文本（delete）</del> <!--html5已不支持s标签-->
<u>文本下划线（underline）</u>
<sub>下角标标签（subscript）</sub> <sup>上角标标签（superscript）</sup>
<!--列表标签--> <!---->
<ol type="A" start="1"> <!--order list 有序列表 注意，ol只能嵌套li--> <!--type 属性：A a（英文字母顺序）I i （罗马数字顺序）1（阿拉伯数字）start 属性 设定从第几个顺序开始-->
<li>--内容--</li> <!--list item 列表-->
</ol>
<ul type=""> <!--unorder list 无序列表 注意，ul只能嵌套li--> <!--type属性： disc 默认 circle 圆圈 none 隐藏项目符 square 方块-->
<li>--内容--</li>
</ul>
<dl> <!--definition list 自定义列表 注意，dl只能嵌套dt和dd-->
<dt> </dt> <!--definition term 自定义术语--> <!--dt和dd不能脱离使用-->
<dd></dd> <!--definition description 自定义描述-->
</dl>
</body>快速创建标签小技巧 （Emmet）
标签名{标签文本内容}+tab或回车键 自动代码补全
创建多个相同标签并且标签里面有文本
标签名${标签内容$}*n $为自动排序 n为标签个数
嵌套结构标签
父标签名>子标签名{子标签文本内容}*子标签重复次数
父标签名*子标签重复次数 >子标签名{子标签文本内容}
表格基础
快捷键 alt+鼠标左键，增加光标· ctrl+alt+方向键，向不同方向增加光标
crtl或alt+鼠标中键，光标增加列
选中标签内容 按住 ctrl+d 会自动全选相同内容
<!--列表标签-->
<!---->
<ol type="A" start="1">
<!--order list 有序列表 注意，ol只能嵌套li-->
<!--type 属性：A a（英文字母顺序）I i （罗马数字顺序）1（阿拉伯数字）start 属性 设定从第几个顺序开始-->
<li>--内容--</li>
<!--list item 列表-->
</ol>
<ul type="">
<!--unorder list 无序列表 注意，ul只能嵌套li-->
<!--type属性： disc 默认 circle 圆圈 none 隐藏项目符 square 方块-->
<li>--内容--</li>
</ul>
<dl>
<!--definition list 自定义列表 注意，dl只能嵌套dt和dd-->
<dt> </dt>
<!--definition term 自定义术语-->
<!--dt和dd不能脱离使用-->
<dd></dd>
<!--definition description 自定义描述-->
</dl>
<!--表格标签-->
<!---->
<table border=1 width=500 height=150 cellspacing="0" cellpadding="0" align="center" valign=top bgcolor="red"
bordercolor="black">
<!--border 定义线条粗细 width 定义表格高度 height 定义表格宽度 cellspacing 定义单元格之间距离 cellpadding 定义单元格边框和文本之间的距离
align 单元格文字左右对齐方式 valign 上下对齐方式 top/middle/bottom/baseline bgcolor 表格背景色 bordercolor 表格线框色-->
<tr>
<!--行属性也能设置，优先级次高 行无宽度属性-->
<th></th>
<!--单元格属性也能设置 优先级最高-->
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<table border=1>
<!--表格合并-->
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td rowspan="3">合并第二行</td>
<td>单元格</td>
<!--列合并-->
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td colspan="3">单元格</td>
<!--colum span 行合并-->
</tr>
</table>
<table border="1" align="center" width="600" bgcolor="#cde7ed" cellspacing="0" cellpadding="0" bordercolor="#ffffff">
<!--表格分组-->
<!---->
<caption> 标题标签 </caption> <!--设置表标题-->
<colgroup span="1" bgcolor="#91c5d4"></colgroup> <!--列分组标签 第一列分组-->
<thead>
<!--表头标签-->
<tr>
<th rowspan="2">序号</th>
<th colspan="6">--内容--</th>
</tr>
<tr>
<th>--内容--</th>
<th>--内容--</th>
<th>--内容--</th>
<th>--内容--</th>
<th>--内容--</th>
<th>--内容--</th>
</tr>
</thead>
<tbody>
<!--表身标签-->
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
<tr>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
<td>--内容--</td>
</tr>
</tbody>
<tfoot>
<!--表尾标签-->
<tr bgcolor="#d7e1c5">
<th bgcolor="B0cc7f">--内容--</th>
<th colspan="6">--内容--</th>
</tr>
</tfoot>
</table>颜色值表示
十六进制颜色表示
rgb颜色表示
长度单位表示
绝对长度单位：固定，表示的长度会显示设置的尺寸
厘米、毫米、英寸（in）、px
高分辨率1px为多个像素
相对长度单位：指相对于一个长度计算出来的长度，一般用来适配不同的设备
百分比（%）
块级元素和内连元素
显示值：块元素（block-level 块） 行内元素（inline 内联）
块级元素独占一行 <p></p> <h1><h6> <ol><ul><li><dl><dt><dd>
div标签 div意为分块，是个2盒子，容器 内部都居中了
<div align="center">
<p>你好</p>
<p>世界</p>
</div>
内联元素 不会独占一行 只占用必要的宽度
范围内联标签，代替b标签 <span></span> 注意：内联元素里不能嵌套块级元素
<b title="inline">加粗显示</b><p></p>
<span title="inline">内联显示部分内容</span> <!--不加粗，鼠标划过，显示文本内容--> <p></p>表单 （采集用户信息）
分组控件
单行文本框控件
多行文本框控件
单选框控件
多选框控件
下拉框控件
文件选择控件
普通按钮控件
自定义按钮控件
表单使用form定义
鼠标定位当前行
按住alt+shift不放，按几次下方向键复制几次
<!--表单标签--> <!---->
<form action="">
<label for="001"> 输入练习： <input type="text" id="001"></label> <!--增强选择和显示 for 属性内容为关联的控件id-->
<br>
请输入用户名：<input type="text"> <!--单行文本框控件 普通文本框-->
<br>
请输入密码： <input type="password"> <!--单行文本框控件 密码文本框--> <!-- 属性值 type = password 输入内容被屏蔽-->
<hr>
请输入详细地址：
<textarea name="" id="" cols="30" rows="10"></textarea> <!--多行文本框控件--> <!--cols 30：指定文本区域指定宽度为30 rows 10：指定文本区域可见行数为10-->
<hr>
请输入取值：<input type="radio" name="gender" checked> 男 <input type="radio" name="gender"> 女 <!--单选按钮取值控件 type=radio -->
<!--name分组，同组控件内容一致 cherked 设置默认选中-->
<br>
请输入取值：<input type="checkbox" name="choice"> A <input type="checkbox" name="choice"> B
<input type="checkbox" name="choice"> C <input type="checkbox" name="choice"> D <!--多选按钮取值控件 type=checkbox-->
<!--name分组，同组控件内容一致 checked 设置默认选中-->
<br>
出生日期：
<select name="" id="" multiple> <!--下拉菜单标签 multiple 多个选择值-->
<option value="" >1991</option> <!--下拉选项 selected 设置默认选中-->
<option value="">1992</option>
<option value="" selected>1993</option>
<option value="">1994</option>
<option value="">1995</option>
<option value="">1996</option>
<option value="">1997</option>
<option value="">1998</option>
<option value="">1999</option>
</select>
<br>
<select name="" id="" multiple size="8"> <!--下拉菜单标签 size=8 设置可见值为8-->
<option value="">音乐</option>
<option value="">电影</option>
<option value="">短视频</option>
<option value="">游戏</option>
<option value="">漫画</option>
<option value="">盲盒</option>
<option value="">小说</option>
<option value="">前段</option>
<br>
附件：
<input type="file"> <!--文件选择控件-->
只读： <input type="text" readonly value="只能复制此内容"> <!--文本控件设置只读属性 readonly： 值为默认值： value-->
<br>
禁用：<input type="radio" disabled> 保密
</select>
</form>
<br>
<!--分组标签--> <!---->
<fieldset> <!--字段集（表单控件分组）-->
<legend> 标题标签</legend> <!--说明 给组框定义标题-->
用户名：<input type="text">
密码：<input type="password">
</fieldset>
<hr>
<!--按钮标签-->
<form action="" target="_blank"> <!--action 行动：，表示点提交后表单要执行的内容，值通常为服务器地址，不定义action，则默认当前页面为地址值-->
<!--target: 保留输入内容值不刷新，可以为：_blank/_self-->
姓名：<input type="text"> <br>
邮箱：<input type="text"> <br>
提交：<input type="submit" value="注册"> <!--提交按钮 type=submit-->
重置：<input type="reset"> <!--提交按钮 type=reset-->
<input type="button" value="普通按钮"> <!--普通按钮 type=reset-->
<br>
图像按钮 <input type="image" src="cc.png" width="30" height="30"> <!--图像按钮 （提交方式变为点击图像） type=image src：图片地址-->
<button>button按钮</button> <!--双标签button按钮默认有提交属性，若增加属性为button，那么提交表单的功能会消失-->
<button type="button"> 提交消失</button>
</form><form action="服务器地址" method="post">
<!--method属性：get：默认值，浏览器会把收集好的表单数据，加入到服务器地址的后面，提交给服务器 post： 不但能收集表单数据，而且不会在地址栏里暴露隐私数据。-->
手机号：<input type="text" name="pnumber"><br>
密码框：<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>其他实用标签
<!--其他实用标签--> <!---->
<hr width="300" size="10px" noshade="" color="red" align="left" > <!--水平线标签-->
<!--width/size ：分别控制水平线的宽度和高度 noshade：用来去掉水平线阴影 color：用于定义水平线的颜色 align：用来调整水平线的水平对齐方式-->
<br>
<pre> <!--preformatted 预格式化的文本 按照源代码内容显示-->
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
<br> <!---->
<map name=""> <!--图片映射标签 name属性与图片usemap属性对应-->
<area shape="" coords="" href="" alt="" coords=""><!--热点区域标签-->
<!--herf：用来定义热点区域链接的目标地址 shape： 用来定义区域的形状（rect：矩形 circle：圆形 poly：多边形） coords：用来定义可点击区域坐标（原点为图片左上角
需要与shape搭配：poly x1，y1，x2，y2，x3，y3，x4，y4 circle x1,y1,o1）-->
</map>
<img src="cc.png" alt="" usemap="#teacher">
<map name="teacher">
<area shape="rect" coords="0,0,110,220" href="dd.png" alt="">
<area shape="circle" coords="129,161,10" href="ee.png" alt="">
</map>
iframe 内联框架元素
<hr><!--内联框架元素-->
<iframe src="http://qfedu.com/" frameborder="1" width="800" height="600" scrolling="auto" name="iframe_a"></iframe>
<!--src：资源地址 width 引入页面宽度 height 引入页面高度 frameborder：框架边框粗细 scrolling：滚动条是否包含 auto/yes/no-->
<div>
(a[href target=iframe_a]>b)*3 <!--emmet语法-->
<a href="http://qfedu.com/" target="iframe_a"><b> 千峰教育 </b></a>
<a href="http://qfedu.com/html5/" target="iframe_a"><b> 千峰五大前端 </b></a>
<a href="https://www.bilibili.com/video/BV1oU4y1278g?p=43&vd_source=0dbe9423fd8d597c15808467a3863e8f" target="iframe_a"><b> b站好程序员 </b></a>
</div>SVG
Scalable Vector Graphics 可缩放矢量图
svg属于对图像的形状描述 本质上为文本文件，体积较小
<!--svg矢量图元素--> <!---->
<svg width="800" height="600"></svg> <!--定义矢量图画布大小-->svg绘制图形
<!--svg绘制图形-->
<svg width="400" height="200">
<rect width="100" height="20" fill="red" stroke-width="inherit" stroke="blue" x="100" y="100" fill-opacity="0.5" stroke-opacity="0.5"/> <!--矩形-->
<!--width：定义矩形的宽度 height：定义矩形的高度 fill：定义矩形的填充颜色 stroke-width：定义矩形的边框宽度 stroke：定义矩形边框的颜色-->
<!--x：定义矩形左边位置 y：定义矩形右边位置 fill-opacity：定义填充颜色不透明度（0-1）stroke-opacity:定义描边元素不透明度-->
</svg>
<br>
<svg width="400" height="200">
<rect width="100" height="100" x=50 y=50 opacity="0.2" rx="10" ry="10" /> <!--opacity：定义整个元素不透明度大小 rx/ry:圆角(rx!=ry圆角为椭圆)大小-->
</svg>
<br>
<svg width="400" height="200"> <!--定义圆标签-->
<circle cx=50 cy=50 r=40 stroke="black" stroke-width="5" fill="red"/> <!--cx，cy ：圆形坐标 r： 半径-->
</svg>
<br>
<svg width="400" height="200"> <!--定义椭圆标签-->
<ellipse cx=50 cy=50 rx=40 ry="20" stroke="purple" stroke-width="5" fill="yellow"/> <!--cx，cy ：椭圆圆心坐标 rx/ry： 水平垂直半径-->
</svg>svg绘制多段线
<br> <!--定义多线段-->
<svg width="500" height="250">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" stroke="black" stroke-width="5" fill="none"/> <!--多段线-->
</svg>svg绘制文本
<br> <!--绘制文本--> <!---->
<svg width="500" height="250" >
<text x="0" y="15" text-anchor="start" font-size="20" fill="red" transform="rotate(30 20,40)">I love SVG!</text>
<!--x/y 文本起点坐标（文本下面）text-anchor：定义坐标在文本位置（start：开头 middle：中间 end：末尾）font—size：文本高度 transform：定义文本变换（rotate(30 20,40)：旋转30度，基点为20,40）-->
</svg >
<br> <!--tspan属性：增加不同格式文本-->
<svg width="500" height="250">
<text x="20" y="30">
severalline
<tspan x=0 y="15">oneline</tspan>
<tspan x=10 y="70">twoline</tspan>
</text> <!--多段线-->
</svg>svg增加文本链接
<br> <!--增加text链接-->
<svg width="500" height="250" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="https://www.bilibili.com/video/BV1oU4y1278g?p=47&spm_id_from=pageDriver&vd_source=0dbe9423fd8d597c15808467a3863e8f" target="_blank">
<text x="20" y="30"> b站好程序员</text> <!--text链接-->
</a>
</svg>svg绘制路径
<br> <!--svg绘制路径--> <!---->
<svg width="400" height="210">
<path d="M150 0 L75 200 L225 200" /> <!--path:路径 d为定义绘制路径命令（draw） M（moveto）：（x,y） L(lineto):路径点 ML 大写代表绝对定位，小写代表相对定位-->
</svg>
<br> <!--svg绘制贝塞尔曲线--> <!---->
<svg width="400" height="400">
<path d="M100 350 q 150 -300 300 0" /> <!--q：quadratic Nezier curve 二次贝塞尔曲线 需定义控制点和终点的坐标-->
</svg>
<br> <!--svg g标签包裹公共属性--> <!--贝塞尔曲线辅助绘制-->
<svg width="450" height="400">
<path d="M 100 350 l 150 -300 " stroke=red stroke-width="3" fill="none"/>
<path d="M 250 50 l 150 300 " stroke=red stroke-width="3" fill="none"/>
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
<path d="M100 350 q 150 -300 300 0" stroke="blue" stroke-width="3" fill="none" />
<g fill="black"><!--三个小圆点-->
<circle cx="100" cy="350" r="3"/>
<circle cx="250" cy="50" r="3"/>
<circle cx="400" cy="350" r="3"/>
</g>
<g font-size="30" fill="black" text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dx="-10">B</text>
<text x="400" y="350" dx="-30">C</text>
</g>
</svg>
SVG描边属性
<br> <!--svg描边属性-->
<svg width="300" height="80">
<g fill="none"> <!--描边颜色-->
<path stroke="red" d="M5 20 l215 0"/>
<path stroke="black" d="M5 40 l215 0"/>
<path stroke="blue" d="M5 60 l215 0"/>
</g>
</svg>
<svg width="300" height="80">
<g fill="none" stroke="black"> <!--描边宽度-->
<path stroke-width="2" d="M5 20 l215 0"/>
<path stroke-width="4" d="M5 40 l215 0"/>
<path stroke-width="6" d="M5 60 l215 0"/>
</g>
</svg>
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="6"> <!--线帽属性-->
<path stroke-linecap="butt" d="M5 20 l215 0"/>
<path stroke-linecap="round" d="M5 40 l215 0"/>
<path stroke-linecap="square" d="M5 60 l215 0"/>
</g>
</svg>
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="4"> <!--虚线属性 内容为虚线打断长度-->
<path stroke-dasharray="5,5" d="M5 20 l215 0"/>
<path stroke-dasharray="10,10" d="M5 40 l215 0"/>
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0"/>
</g>
</svg>svg模糊和阴影效果
</svg>
<br> <!--svg 高斯模糊--> <!---->
<svg width="110" height="110">
<defs> <!--definitions-->
<filter x="0" y="0" id="f1"> <!--filter ：过滤器 id属性：识别过滤器-->
<feGaussianBlur stdDeviation="15"/> <!--高斯模糊滤镜 stdDeviation：定义模糊数量-->
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)">
</svg>
<br> <!--svg 阴影--> <!---->
<svg width="140" height="140">
<defs> <!--definitions-->
<filter x="0" y="0" width="200" height="200" id="f2"> <!--filter ：过滤器 id属性：识别过滤器-->
<feoffset dx="10" dy="10" in="SourceAlpha"/> <!--偏移滤镜 dx/dy:偏移量 in:阴影来源（sourceAlpha：黑色阴影 sourceGraphic：原始图像为来源）-->
<feGaussianBlur stdDeviation="5"/> <!--模糊顺序不能放反-->
<feBlend in="SourceGraphic"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)">
</svg>
svg线性渐变和径向渐变
<br> <!--svg 渐变--> <!---->
<svg width="400" height="150">
<defs> <!--definitions-->
<linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1"> <!--表示水平渐变-->
<stop offset="0%" stop-color="rgb(255,255,0)"/> <!--offset 设置渐变颜色及相对位置-->
<stop offset="100%" stop-color="rgb(255,0,0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" >
</svg>
<br> <!--svg 渐变--> <!---->
<svg width="400" height="150">
<defs> <!--definitions-->
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="grad2"> <!--表示垂直渐变-->
<stop offset="0%" stop-color="rgb(255,255,0)"/> <!--stop属性：设置渐变颜色 offset 设置渐变颜色及相对位置-->
<stop offset="100%" stop-color="rgb(255,0,0)"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2 )" >
</svg>
<br> <!--svg 渐变--> <!---->
<svg width="500" height="150">
<defs> <!--definitions-->
<radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad3"> <!--表示径向渐变 cxcy代表最外面的圆 fxfy代表最里面的圆-->
<stop offset="0%" stop-color="rgb(255,255,255)"/> <!--stop属性：设置渐变颜色 offset 设置渐变颜色及相对位置 0%表示从圆心开始-->
<stop offset="100%" stop-color="rgb(0,0,255)"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3 )" >
</svg>CSS样式
Cascading Style Sheets 层叠样式表
用于描述HTML元素在屏幕、纸张或其他媒体上的显示方式
CSS规则
选择器：需要定义样式的html元素
声明块：包含一个或多个声明，在大括号内，每个声明包括一个css属性名和值，用冒号隔开
每个声明之间用分号隔开 注意：属性名和属性值中间为一个整体，中间不能有空格和换行！
<title>Document</title> <!--在标题下面新增style标签，内部写入css语句-->
<!--页面标题-->
<style>
p {
color: brown;
text-align: center;
}
</style>行内样式为内联样式
<body>
<!-- 行内样式 -->
<h1 style="color:blue;text-align:center;">程序员想跳槽，什么公司不能去？</h1>
<p style="color: #76c0d1;">
一个公司好的HRBP代表的公司的形象，HRBP做的好可以提高offer的接受率，增加员工幸福感，减少员工的离职率，但博主碰到的一个公司的HRBP却给人留下一种坏印象，一种公司和员工是雇主和员工的印象，还动不动套路员工，哎算了，心中的痛。
</p>
</body>CSS选择器
元素选择器
根据元素名称来选择html元素
内部样式解决了行内样式（内联样式）代码分离的问题
<!-- css内部样式 -->
<style>
body {
background-color: linen;
}
/* css设置页面背景颜色为亚麻色 */
h1 {
color: maroon;
margin-left: 40px; /* 定义标题元素位于父容器左侧40个像素的距离 */
}
/* */
p {
color: seagreen;
text-align: center;
}
</style>也有弊端：1.只能作用于一个页面。
2.随着代码编辑量的增加，需要不断滚动屏幕增加样式
外部样式：将css代码放在一个独立的.css文件中，需要css样式。
优先级
内联样式高于外部样式和内部样式，
内部样式和外部样式优先级按照最后读取优先级高
默认样式优先级最低
简单选择器
根据元素名称，ID名称，类别选择元素
<style>
/* (*) 通用选择器 给全局添加样式*/
* {
background-color: yellow;
}
html, body {
background-color: lightblue;
}
/* 两组样式定义用空行分隔 */
h1 {
color: navy;
margin-left: 20px;
}
p {
color: red;
}
/* ID选择器 */
#para {
text-align: center;
}
/* 类选择器 */
/* .italic {
font-style: italic;
} */
/* 将p元素名称加在前面。选择的类更具体 */
p.deco {
text-decoration: underline;
}
/* 分组选择器 ，隔开元素*/
h1,#para {
font-style: italic;
}
</style>组合选择器
后代选择器：匹配作为指定元素后代的所有元素
子选择器：只能选择作为某元素的子元素，不能选择到孙辈的元素
<style>
/* 后代选择器 div空格元素 ：匹配作为指定元素后代的所有元素*/
div h3 {
color: blue;
}
div li p { /* div的后代li的后代p为蓝色 */
color: blue;
}
/* 子选择qi */
div>p {
color: red; /* div的子代的第一类p为红色 */
}
</style>
<body>
<h1 >去哪里就业好呢</h1>
<div>
<h3>你好啊</h3>
<p> 哈哈哈哈哈哈</p>
<p >呵呵呵呵呵</p>
<ol>
<li>
<p>嘻嘻嘻嘻</p>
</li>
</ol>
</div>
</body>
CSS伪类选择器
伪类选择器属于类选择器中的一种，根据特定状态选取元素
| 状态 | 格式 | 备注 |
| 鼠标点击前 | :link | |
| 鼠标点击后 | :visited | |
| 鼠标悬停时 | :hover | |
| 鼠标点击时 | :active |
注意：
1.冒号和后面的鼠标行为，没有任何空格，必须连接在一起；
2.四个伪类选择器必须按照以上介绍的顺序书写(:link,:visited,hover,active)，否则在浏览器中部分样式不能实现；
3.伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上面。
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: skyblue;
}
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
div:link {
color: red;
}
div:visited {
color: green;
}
div:hover {
color: yellow;
}
div:active {
width: 100px;
height: 100px;;
}
</style>
</head>
<body>
<a href="#">王者英雄最强出装</a>
<div>
普通div标签
</div>
</body>css伪元素选择器
/* 伪元素选择器 */
/* 设置第一行元素样式 */
div::first-line{
color: blue;
font-size: 30px;
}
/* 向前插入样式 */
div::before {
content: "我是向前添加";
font-size: 30px;
}
/* 向后插入样式 */
div::after {
content: "我是向后添加";
font-size: 30px;
}
/* 鼠标选中样式 */
div::selection{
color: brown;
background-color: skyblue;
}注意：selection伪元素现择其只支持以下几个样式声明：color（文本颜色），background（背景），cursor（鼠标样式），outline（描边效果）
CSS属性选择器
四种属性：
注意：该属性值只能有一个，不能有多个
简单选择器和组合选择器，可以完成元素的查找。
其他选择器可以更加精准高效地查找元素，从而能提高我们编码速度。
属性选择器，在实际开发的过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。
[type] {
width: 20px;
height: 20px;
}
[name=sex] {
width: 30px;
}
[class|=box] {
background-color: blue;
}
CSS文本
CSS文本颜色和大小写转换
body {
color: rgb(red, 0,0);
/* 一个页面的默认文本颜色是在body选择器中定义的 */
}
h1 {
color:blue; /* 标题文本颜色 */
}
/*段落文本颜色 */
p.transform {
text-transform:uppercase; /* 字母全大写*/
text-transform:lowercase; /* 字母全小写*/
text-transform:capitalize; /* 首字母大写*/
}CSS设置文本对齐和文本间距
line-height设置行高为基线 line-height设为1等于没有行距
p {
/* 文本对齐方式 水平*/
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
/* 每一行都被拉长类似报纸排版 */
}
p {
/* 文本对齐方式 垂直 基于四线三格*/
vertical-align: baseline; /*基线 倒数第二行对齐*/
vertical-align: text-top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: super;
}
p {
/* 文本间距 */
text-indent: 2em; /*用于设置文本首行缩进 空两个 em：字符倍数*/
letter-spacing: 10px; /* 用于指定中文文字或英文字母之间的空隙 */
font-size:medium; /* 设置中文字体大小 */
line-height: normal; /*用于指定行与行之间高度 normal:默认值 数字：几倍倍当前字符 绝对值：20px*/
word-spacing: normal; /* 用于指定 文本中单词的间距，只对英文有效*/
white-space:nowrap;
/*指定了如何处理元素内部的空白 nowrap:不管包含文本的元素宽度为多少，文本都不会换行，直到遇见<br>标签为止 */
}CSS文本装饰
p {
/* 文本添加下划线*/
text-decoration-line:overline;
/* overline在文本上方添加 line-through在文本中间添加线条修饰 underline 文本下方*/
text-decoration-line: overline underline; /*可同时添加 */
/* 定义下划线厚度 */
text-decoration-thickness: 50%;
/* auto：默认值 px：绝对值 %：相对值*/
/*定义下划线的颜色 */
text-decoration-color: azure;
/* 定义下划线风格 */
text-decoration-style: solid ;
/* solid：实线 double：双实线 dotted：圆点线 dashed 虚线 wavy 波浪线 */
/* 简化写法 */
text-decoration: underline red double 5px;
/* 分别对应：line color style thickness 无顺序要求，但必须设置underline*/
text-decoration: none; /*去除下划线*/
}CSS设置字体和字号
p {
/* 定义字体名称 英文五类字体*/
font-family: 'Courier New', Courier, monospace;
/* Serif：有衬线字体 Sans-serif：无衬线字体 Monospace：单空格字体（等宽字体）*/
/* Cursive： 草书字体 Fantasy：幻想字体*/
/* ，隔开可防止电脑无字体，增加备用字体 */
/* 设定字体大小 绝对 px 相对 em % 相对父元素继承的大小*/
font-size: 20px;
font-size: rem; /*继承根元素（html元素）*/
}CSS设置字体风格和样式
p {
/* 设置字体倾斜 */
font-style: normal;
/* normal：正常显示 itialic：意大利倾斜 oblique：倾斜（浏览器支持度较低）*/
/* 指定字体粗细*/
font-weight: 100;
/* 名称： lighter 细体 normal 正常 bold 加粗 bolder 更粗 对应1479*/
/* 数值：100 200 300 400 500 600 700 800 900 */
/* 小型 大写字母显示*/
font-variant: small-caps; /*normal/small-caps*/
/* 可一次全定义，但字体大小和字体名称必须的 */
font: oblique 100 small-caps 30px/30px 华文仿宋;
/* style variant weight font-size/line-height family*/
}CSS谷歌字体和Icon图标
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong&effect=neon|outline|fire|shadow-multiple">
<link rel="stylesheet" href="mystyle.css">p.a {
font-family:"Sofia",Serif;
}
p.b {
font-family:"Audiowide",sans-serif;
}
p.c{
font-family:"Trirong" ,sans-serif;
}|:设置或者类别 &设置其他样式
icon图标可以当成字体添加样式
<title>Document</title>
<link rel="stylesheet" href="引用谷歌字体地址">
<link rel="stylesheet" href="mystyle.css">
<!-- 引用图标库代码 -->
<script src="图标代码" crossorigin="anonymous"></script>
</head>
<body>
<p>
<i class="fas fa-cloud" style="color: red;"></i>
</p>
</body>图标网： iconfont-阿里巴巴矢量图标库
在线ps网站：稿定【在线PS】PS软件网页版，ps在线图片处理工具photopea-稿定设计PS (gaoding.com)稿定
icon图标使用
iconfont字体图标的使用 - 发闪电 - 博客园 (cnblogs.com)
CSS选择器的权重
优先级
计算权重：
补充
块 行内 行内块
显示模式转换
/* 转成块 */
display: block;
/*转成行内块 */
display: inline-block;
/* 转成行内 */
display: inline; 元素显示规范
CSS特性
继承性
控制文字属性的都能继承，不是控制文字的都不能继承
继承失效情况
即自有的特性一般不继承
层叠性
优先级
color: blue !important;权重叠加计算
盒子模型
内容区：蓝色
Emmet 快捷输入：W400+H400+bgc Tab键
注意，边框会撑大盒子尺寸！
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
新浪导航案例：
<!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>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a {
/* padding：可变盒子大小 省略width*/
padding: 0 16px;
/* width: 80px; */
height: 40px;
/* 推荐先加上，可以清楚看到文字在什么位置 */
/* background-color:#edeef0; */
display: inline-block;
font-size: 12px;
text-align: center;
line-height: 40px; /* line-height 属性设置行间的距离（行高） */
color:#4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内原则：先宽高和背景色，再放内容，调节内容的位置，控制文字的细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
</body>
</html>页边距：
div {
width: 300px;
height: 300px;
background-color:pink;
/* 添加了四个方向的内边距 */
padding: 50px;
/* padding 属性可以当做复合属性使用，表示单独设置某个方向的内边距 */
/* 顺时针 上 右 下 左 */
padding: 10px 20px 30px 40px ;
/* 上 左右 下 */
padding: 10px 20px 30px ;
/* 上下 左右 */
padding: 10px 20px ;
/* 会撑大盒子的元素：padding border */
}
div {
width: 300px;
height: 300px;
background-color:pink;
border: 10px solid #000;
padding: 20px;
/* 内减模式：变为css3的盒子模型，自动减盒子高宽 */
box-sizing:border-box;
}默认内外边距的清除
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 300px;
height: 300px;
margin: 0 auto;/*左右居中*/
}案例：新闻
<!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-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
background-color: #fff;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom:1px solid #ccc;
font-size: 30px;
/* 行高是1倍，就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
.news li {
list-style: none;
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<div class="news">
<h2>最新文章/News Articles </h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">体验javascript的魅力</a></li>
<li><a href="#">jQuery世界来临</a></li>
<li><a href="#">网页设计师的梦想</a></li>
<li><a href="#">jQuery中的链式编程是什么</a></li>
</ul>
</div>
</body>
</html>外边距折叠现象
行内元素垂直方向内外边距不生效
margin或padding的top和bottom不生效
结构伪类选择器
内容：
注意：
伪元素 *
内容：
通过css创建标签，装饰性不重要的小图
标准流
内容：
浮动
浏览器解析html行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离。
浮动能解决换行问题
浮动的作用
网页布局
float:left/right;
浮动的特点
浮动元素默认顶对齐
浮动后的标签具备行内块的特点
快捷键： .left+.right Tab
效果：
<div class="left"></div>
<div class="right"></div>CSS写顺序
1.浮动/display
2.盒子模型：margin border padding 宽度高度背景色
3.文字样式
使用浮动，如果盒子块=空间不够，会自动换行
主导航必须使用<li></li>标签包裹<a></a>标签
清除浮动
受影响情况：例如父子标签，子级浮动，父级没有高度，后面的标签流盒子会受影响，显示到上面的位置
双伪标签可同时解决父子块元素塌陷问题和浮动问题
项目构建
创建目录
学成在线项目 CSS
/* index.css是用来美化首页的 */
/* css布局：浮动/display; 盒子模型；文字样式 */
/* 版心 (外套)*/
.wrapper {
width: 1200px;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
/* 内减模式 */
box-sizing: border-box;
}
/*清除无序列表符号 */
li {
list-style: none;
}
/* 清除a标签下划线 */
a {
text-decoration: none;
}
/*清除浮动 和 解决外边距塌陷问题*/
.clearfix::before,.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
body {
background-color: #f3f5f7;
}
/* 头部 */
.header {
height: 42px;
/* background-color:pink; */
/* margin-top:30px;
margin-bottom:30px; */
margin: 30px auto; /*第二种写法，左右为auto*/
}
h1 {
float: left;
}
/*导航*/
.nav {
float: left;
margin-left: 70px;
height: 42px;
/* background-color: green; */
}
.nav li {
float: left;
margin-right: 26px;
}
.nav li a {
display: block;
padding: 0 9px;
height: 42px;
line-height: 42px;
font-size: 18px;
color: #050505;
}
.nav li a:hover {
border-bottom: 2px solid #00a4ff;
}
/* 搜索 */
.search {
float: left;
margin-left: 59px;
width: 412px;
height: 40px;
border: 1px solid #00a4ff;
}
.search input {
float: left;
padding-left: 20px;
/* 左右加一起的尺寸要小于等于父级的410 */
width: 360px;
height: 38px;
border: 0;
}
/*控制placeholder样式 */
.search input::placeholder {
font-size: 14px;
}
.search button {
float: left;
width: 50px;
height: 40px;
background-image: url(../images/btn.png);
border: 0;
}
.user {
float: right;
margin-right: 35px;
height: 42px;
line-height: 42px;
}
.user img {
/* 调节图片垂直对齐方式 居中 */
vertical-align: middle;
}
/* 轮播图 */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner .wrapper {
height: 420px;
background-image: url(../images/banner2.png);
}
.banner .left {
float: left;
padding: 0 20px;
width: 190px;
height: 420px;
background-color: rgba(0, 0, 0, 0.3);
/* 行高属于控制文字的属性，能继承 */
line-height: 44px;
}
.banner .left span {
float: right;
}
.banner .left a:hover {
color: #00a4ff;
}
.banner .left a {
font-size: 14px;
color: #fff;
}
.banner .right {
float: right;
margin-top: 50px;
width: 228px;
height: 300px;
background-color: #fff;
}
.banner .right h2 {
height: 48px;
background-color: #9bceea;
text-align: center;
line-height: 48px;
font-size: 18px;
color:#fff;
}
.banner .right .content {
padding: 0 18px;
}
.banner .right .content dl {
padding: 12px 0;
border-bottom: 2px solid #e5e5e5;
}
.banner .right .content dt {
font-size: 16px;
color: #4e4e4e;
}
.banner .right .content dd {
font-size: 14px;
color: #4e4e4e;
}
.banner .right .more {
display: block;
/* margin: 4px 14px 0; */
margin: 4px auto 0;
width: 200px;
height: 40px;
border: 1px solid #00a4ff;
font-size :16px;
color: #00a4ff;
font-weight: 700;
line-height: 40px;
text-align: center;
}
/* 精品推荐 */
.goods {
margin-top: 8px;
padding-left: 34px;
padding-right: 26px;
/* width: 600px; */
height: 60px;
background-color: #ffffff;
box-shadow: 0px 2px 2px 0px
rgba(118, 118, 118, 0.2);
line-height: 60px;
}
.goods h2 {
float: left;
font-size: 16px;
color: #00a4ff;
font-weight: 400;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods li a {
border-left: 1px solid #bfbfbf;
padding: 0 30px;
font-size: 16px;
color: #050505;
}
.goods .xingqu {
float: right;
font-size: 14px;
color: #00a4ff;
}
/* 精品课程 */
.box {
margin-top: 35px;
}
.box .title {
height: 40px;
}
.box .title h2 {
float: left;
font-size: 20px;
color: #494949;
font-weight: 400;
}
.box .title a {
float: right;
margin: right 30px;
font-size: 12px;
color: #a5a5a5;
}
.box .content li {
float: left;
margin-right: 15px;
margin-bottom: 15px;
width: 228px;
height: 270px;
background-color: #fff;
}
.box .content li:nth-child(5n) {
margin-right: 0;
}
.box .content li h3 {
padding: 20px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box .content li p {
padding: 0 20px;
font-size: 12px;
color: #999;
}
.box .content li span {
color: #ff7c2d;
}
/* 版权 */
.footer {
margin-top: 48px;
height: 417px;
background-color: #fff;
}
.footer .left {
float: left;
}
.footer .right {
float: right;
}
.footer .left p {
margin: 20px 0 10px;
font-size: 12px;
color:#666;
}
.footer .left a {
display: inline-block;
width: 120px;
height: 35px;
border: 1px solid #000;
text-align: center;
line-height: 36px;
font-size: 16px;
color: #00a4ff;
}
.footer .right {
float: right;
}
.footer .right dl {
float: left;
margin-left: 120px;
}
.footer .right dt {
text-align: center;
line-height: 36px;
font-size: 16px;
color: #333333;
}
.footer .right dd {
text-align: center;
line-height:25 px;
font-size: 12px;
color: #00a4ff;
}
学成在线项目 HTML
<!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>学成在线首页</title>
<!-- 网站的首页，所有网站的首页都叫index.html,因为服务器都是找html -->
<!-- 布局：从外到内，从上到下，从左到右 -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 header 负责头部区域的样式，wrapper只负责版心效果-->
<div class="header wrapper">
<h1>
<a href="#"> <img src="./images/logo.png" alt=""></a>
</h1>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="输入关键词" >
<button> </button>
</div>
<!-- user -->
<div class="user">
<img src="./images/user.png" alt="">
<span>lilei</span>
</div>
</div>
<!-- 轮播图区域 banner-->
<div class="banner">
<div class="wrapper">
<div class="left">
<ul>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
</ul>
</div>
<div class="right">
<h2>我的课程表</h2>
<div class="content">
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
</div>
<a href="#" class="more">全部课程</a>
</div>
</div>
</div>
<!-- 精品推荐 -->
<div class="goods wrapper">
<h2>精品推荐</h2>
<ul>
<li><a href="#">jQuery</a></li>
</ul>
<ul>
<li><a href="#">Spark</a></li>
</ul>
<ul>
<li><a href="#">MySQL</a></li>
</ul>
<ul>
<li><a href="#">JavaWeb</a></li>
</ul>
<ul>
<li><a href="#">MySQL</a></li>
</ul>
<ul>
<li><a href="#">JavaWeb</a></li>
</ul>
<a href="#" class="xingqu">修改兴趣</a>
</div>
<!-- 精品推荐课程 -->
<div class="box wrapper" >
<div class="title">
<h2>精品推荐</h2>
<a href="">查看全部</a>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<img src="./images/course07.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="./images/course01.png" alt="">
<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
<p><span>高级</span> • 1125人在学习</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 版权 注意要清除浮动的影响，课程的li 的父级-->
<!-- li都浮动了，脱标，撑不开父级的高度 -->
<div class="footer">
<div class="wrapper">
<div class="left">
<img src="./images/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="#">下载APP</a>
</div>
<div class="right">
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作导师</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作导师</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作导师</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>定位
使用步骤
相对定位 注意：
/* 如果left和right都有，以left为准 如果top和right都有，以top为准*/
/* css书写：1.定位/浮动/display; 2.盒子模型；3.文字属性 */
.box {
position: relative;
left: 100px;
top: 200px;
right: 300px;
bottom: 100px;
/* 1.占有原来的位置
2.仍然具备标签原有的显示模式特点
3.改变位置相对原来的位置定位 */
width: 200px;
height: 200px;
background-color: #fff;
}绝对定位
绝对定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位
绝对定位与margin混合使用
居中
.box {
/*1. 绝对定位的盒子不能使用margin auto 居中*/
position: absolute;
/* margin: 0 auto; */
left: 50%;
margin-left: -150px;
/* 盒子宽度一半 */
top: 50%;
margin-top: -150px;
/* 盒子高度一半 */
/* 位移，自己宽高的一半 */
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background-color: blue;
}css
/* 位移，自己宽高的一半 */
transform: translate(-50%,-50%); 可以自动计算宽高的一半
绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0
固定定位
层级关系
设置层级
将相同定位布局 元素分层级显示
/*默认情况下，定位的盒子 后来者居上，
设置层级属性：
z-index：整数；取值越大，显示顺序越靠上 ，
z-index的默认值是0 */
box1 {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
box2 {
position: absolute;
left: 10px;
top: 10px;
} 
装饰
对齐
浏览器把行内和行内块当做文字处理，默认基线对齐
光标
边框圆角
溢出效果
元素本身隐藏
设置鼠标悬停显示：
元素整体透明度
边框合并
伪类选择器
小兔鲜项目
CSS精灵图
精灵图使用
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
/* 添加背景图片 */
background-image: url(taobao.png);
/* 背景图位置属性 */
background-position:-3px 0;/*-3 水平左移 ；0 垂直 （往左往上，都给负数）*/
}
b {
display: block;
width: 20px;
height: 24px;
background-color: green;
/* 添加背景图片 */
background-image: url(taobao.png);
/* 背景图位置属性 */
background-position:0px -90px;/*-3 水平左移 ；0 垂直 （往左往上，都给负数）*/
}背景图大小
.box {
width: 400px;
height: 300px;
background-color: pink;
background-image: url(1.jpg);
/* 防止图片复制 */
background-repeat: no-repeat;
/* 如果图的宽或高与盒子的尺寸相同，另一个方向停止缩放
导致盒子可能有留白 */
/* background-size： cover */
/* 保证宽或高和盒子尺寸完全相同，导致图片显示不全 */
/* background-size: cover; */
background-size: 400px 300px;
}
文字阴影
盒子阴影
过渡
/* 过渡配合hover使用 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200，悬停的时候宽度500，花费1s钟 */
transition: width 1s,background-color 2s;
}
.box:hover {
width: 500px;
background-color: red;
}
项目前置认知
网页与网站的关系
骨架 结构标签
SEO三大标签
icon图标
版心
CSS书写顺序
文件和目录准备
基础公共样式
项目结构搭建
index页面骨架
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
