03-CSS3
2018-10-26 本文已影响53人
枫林残忆168
CSS教程
01-CSS入门基础
课程概要
1、CSS介绍
2、CSS基础语法
3、CSS高级语法
4、CSS派生选择器
5、CSS id选择器
6、CSS类选择器
7、CSS属性选择器
一、CSS介绍
CSS概述
- CSS指层叠样式表
- CSS样式表极大地提高了工作效率
二、CSS基础语法
selector
selector{
property（属性）:value（属性值）
}
三、高级语法
1、选择器分组
h1,h2,h3,h4,h5,h6{
color:red;
}
2、继承
body{
color:green;
}
四、派生选择器
派生选择器
- 通过依据元素在其位置的上下文关系来定义样式
五、id选择器
1、id选择器
- id选择器可以为标有id的HTML元素指定特定的样式
- id选择器以“#”来定义
2、id选择器和派生选择器
- 目前比较常用的方式是id选择器常常用于建立派生选择器
六、CSS类选择器
1、类选择器
- 类选择器以一个点"."来显示
2、class也可以用作派生选择器
- 目前比较常用的方式是类选择器常常用于建立派生选择器
七、CSS属性选择器
属性选择器
[title]{
color:red;
}
属性和值选择器
[title=xxx]{
color:black;
}
02-CSS基本样式讲解
课程概要
1、CSS背景
2、CSS文本
3、CSS字体
4、CSS链接
5、CSS列表
6、CSS表格
7、CSS轮廓
一、CSS背景
CSS背景属性
CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
| 属性 | 描述 | 默认值 | 可能取值 |
|---|---|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 | scroll | scroll | fixed | inherit |
| background-color | 设置元素的背景色 | transparent | transparent | color_name |hex_number |rgb_number |inherit |
| background-image | 把图片设置为背景 | url('URL') | url('URL') | none |inherit |
| background-position | 设置背景图片的起始位置 | 0% 0% | 0% 0% | x% y% | xpos ypos |
| background-repeat | 设置背景图片是否及如何重复 | repeat | repeat|repeat-x |repeat-y |no-repeat |inherit |
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
CSS3背景属性
| 属性 | 描述 | 默认值 | 可能取值 |
|---|---|---|---|
| background-size | 规定背景图片得尺寸 | auto | length | percentage | cover | contain |
| background-origin | 规定背景图片得定位区域 | padding-box | padding-box |border-box | content-box |
| background-clip | 规定背景得绘制 | border-box | border-box | padding-box |content-box |
注释：1、IE9+、Firefox、Opera、Chrome 以及 Safari 支持；2、Internet Explorer 8 以及更早的版本不支持。
二、CSS文本
CSS文本属性
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
| word-spacing | 字间距 |
CSS3文本效果
- text-shadow：向文本添加阴影
- word-wrap：规定文本的换行规则
三、CSS字体
CSS字体
CSS字体属性定义文本的字体系列、大小、加粗、风格及变形
| 属性 | 描述 |
|---|---|
| font-family | 设置字体系列 |
| font-size | 设置字体尺寸 |
| font-style | 设置字体风格 |
| font-variant | 以小型大写字体或正常字体显示文本 |
| font-weight | 设置字体的粗细 |
四、CSS链接
CSS链接的四种状态
- a:link 普通的、未被访问的链接
- a:visited 用户已访问的链接
- a:hover 鼠标指针位于链接的上方
- a:active 链接被点击的时刻
常见的链接方式
- text-decoration属性大多数用于去掉链接中的下划线
五、CSS列表
CSS列表
CSS列表属性允许你设置、改变列表标志，或者将图像作为列表项标志
| 属性 | 列表 |
|---|---|
| list-style | 简写 |
| list-stle-image | 列表项图像 |
| list-style-position | 列表标志位置 |
| list-style-type | 列表类型 |
六、CSS表格
1、CSS表格
CSS表格属性可以帮助我们极大的改善表格的外观
2、表格边框
border：设置边框
3、折叠边框
border-collapse：边框折叠
4、表格宽高
5、表格文本对齐
6、表格内边距
7、表格颜色
表格案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS表格</title>
<style type="text/css">
#tb{
border-collapse: collapse;/* 合并表格边框（折叠边框） */
width:500px;
}
#tb td,#tb th{
border: 1px solid bisque; /* 表格边框 */
}
#tb th{
text-align: right;
background-color: aqua;
color: #fff;
}
#tb tr.alt td{
color: black;
background-color: aquamarine;
}
</style>
</head>
<body>
<table id="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>25</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>25</td>
<td>男</td>
</tr>
<tr class="alt">
<td>小王</td>
<td>25</td>
<td>男</td>
</tr>
</table>
</body>
</html>
效果
CSS表格.png
七、CSS 轮廓
1、CSS轮廓
主要用来突出元素的作用
| 属性 | 描述 |
|---|---|
| outline | 设置轮廓属性 |
| outline-color | 设置轮廓颜色 |
| outline-style | 设置轮廓样式 |
| outline-width | 设置轮廓的宽度 |
03-CSS定位
课程概要
1、CSS定位
2、CSS浮动
3、浮动的应用
一、CSS定位
1、CSS定位
改变元素在页面三的位置
2、CSS定位机制
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动（后续）
绝对布局（后续）
3、CSS定位属性
| 属性 | 描述 |
|---|---|
| position | 把元素放在一个静态的、相对的、绝对的、或固定的位置中 |
| top | 元素向上的偏移量 |
| left | 元素向左的偏移量 |
| right | 元素向右的偏移量 |
| bottom | 元素向下的偏移量 |
| overflow | 设置元素溢出其区域发生的事情 |
| clip | 设置元素显示的形状 |
| vertical-align | 设置元素垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
1). CSS position属性：
- static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
二、CSS浮动
1、CSS浮动
- float属性可用的值：
- left：元素向左浮动
- right：元素向右浮动
- none：元素不浮动
- inherit：从父级继承浮动属性
2、clear属性
- 去掉浮动属性（包括继承来的属性）
- clear属性：
- left、right：去掉元素向左、向右浮动
- both：左右两侧均去掉浮动
- inherit：从父级继承来clear的值
三、浮动的应用
瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#div1{
width: 950px;
height: auto;
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/product7.jpg" ></li>
<li><img src="img/product8.jpg" ></li>
<li><img src="img/product1.jpg" ></li>
</ul>
<ul>
<li><img src="img/product6.jpg" ></li>
<li><img src="img/product5.jpg" ></li>
<li><img src="img/product1.jpg" ></li>
</ul>
<ul>
<li><img src="img/product2.jpg" ></li>
<li><img src="img/product3.jpg" ></li>
<li><img src="img/product4.jpg" ></li>
</ul>
</div>
</body>
</html>
04-CSS盒子模型
课程概要
1、CSS盒子模型概述
2、CSS内边距
3、CSS边框
4、CSS外边距
5、CSS外边距合并
6、盒子模型应用
一、CSS盒子模型概述
1、盒子模型的内容范围包括：
margin、border、padding、content部分组成
盒子模型.jpg
二、CSS内边距
1、CSS内边距
内边距四在content外，边框内
2、内边距属性
| 属性 | 描述 |
|---|---|
| padding | 设置所有内边距 |
| padding-bottom | 设置底内边距 |
| padding-left | 设置左内边距 |
| padding-right | 设置右内边距 |
| padding-top | 设置底顶边距 |
三、CSS边框
1、CSS边框
我们创建出效果出色的边框，并且可以应用于任何元素
2、边框样式
border-style：定义了10个不同的非继承样式，包含none
3、边框的单边样式
border-top-style \ border-left-style \ border-right-style \ border-bottom-style
4、边框的宽度
border-width
5、边框单边的宽度
border-top-width \ border-left-width \ border-right-width \ border-bottom-width
6、边框的颜色
border-color
7、边框单边的颜色
border-top-color \ border-left-color \ border-right-color \ border-bottom-color
8、CSS3边框
border-radius：设置圆角边框
border-shadow：边框阴影
border-image：边框图片
四、CSS外边距
1、CSS外边距
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位、百分数值
2、外边距常用属性
| 属性 | 描述 |
|---|---|
| margin | 设置所有外边距 |
| margin-bottom | 设置底外边距 |
| margin-left | 设置左外边距 |
| margin-right | 设置右外边距 |
| margin-top | 设置顶外边距 |
五、CSS外边距合并
1、外边距合并
外边距合并就是一个叠加的概念
外边距合并.gif
六、盒子模型应用
盒子模型应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS盒子模型</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top{
width: 100%;
height: 50px;
background-color: #000;
}
.top-content{
width: 75%;
height: 50px;
margin: 0 auto;
background-color: blue;
}
.body{
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: antiquewhite;
}
.body-img{
width: 100%;
height: 400px;
background-color: aqua;
}
.body-content{
width: 100%;
height: 1100px;
background-color: blueviolet;
}
.body-no{
width: 100%;
height: 50px;
background-color: brown;
}
.footing{
width: 75%;
height: 400px;
background-color: indigo;
margin: 0 auto;
}
.footing-content{
width: 100%;
height: 330px;
background-color: darkcyan;
}
.footing-subnav{
width: 100%;
height: 70px;
background-color: #000;
}
</style>
</head>
<body>
<div class="top">
<div class="top-content"></div>
</div>
<div class="body">
<div class="body-img"></div>
<div class="body-content">
<div class="body-no"></div>
</div>
</div>
<div class="footing">
<div class="footing-content"></div>
<div class="footing-subnav"></div>
</div>
</body>
</html>
05-CSS常用操作
课程概要
1、对齐操作
2、尺寸操作
3、分类操作
4、导航栏
5、图片操作
一、对齐操作
1、使用margin属性进行水平对齐
2、使用position属性进行左右对齐
3、使用float属性进行左右对齐
对齐操作案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对齐操作</title>
<style type="text/css">
*{
margin: 0px;
}
.div{
width: 70%;
height: 100px;
background-color: red;
/* 使用margin属性 */
/* margin-left: auto;
margin-right: auto; */
/* position */
/* position: absolute;
left: 0; */
/* float */
float: left;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
二、尺寸操作
1、属性
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| line-height | 设置行高 |
| max-height | 设置元素最大高度 |
| max-width | 设置元素最大高度 |
| min-height | 设置元素最小高度 |
| min-width | 设置元素最小宽度 |
| width | 设置元素宽度 |
三、分类操作
1、属性
| 属性 | 描述 |
|---|---|
| clear | 设置一个元素的侧面是否允许其他浮动元素 |
| cursor | 规定当指向某元素时显示的指针类型（鼠标的显示类型） |
| display | 设置是否显示及如何显示元素 |
| float | 定义元素在哪个方向浮动 |
| position | 把元素放置到一个静态的、相对的、绝对的、固定的位置 |
| visibility | 设置元素是否可见或不可见 |
四、导航栏
1、垂直导航栏
2、水平导航栏
3、导航栏效果
导航栏案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<style type="text/css">
*{
margin: 0px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
background-color: burlywood;
width: 250px;
text-align: center;
}
a:link,a:visited{
text-decoration: none;
/* display: block; */
background: burlywood;
color: aliceblue;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: red;
}
li{
display: inline;
padding: 3px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
五、图片操作
图片操作案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片操作</title>
<style type="text/css">
body{
margin: 10px auto;
width: 80%;
height: auto;
}
.image{
border: 1px solid darkgray;
width: auto;
float: left;
text-align: center;
margin: 5px;
}
img{
margin: 5px;
}
.text{
font-size: 12px;
margin-bottom: 5px;
}
a:hover{
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
<div class="image">
<a href="#" target="_self">
<img src="img/tibet-1.jpg" >
</a>
<div class="text">图片标题</div>
</div>
</div>
</body>
</html>
06-CSS选择器
课程概要
1、元素选择器
2、选择器分组
3、类选择器详解
4、ID选择器详解
5、属性选择器详解
6、后代选择器
7、子元素选择器
8、相邻兄弟选择器
一、元素选择器
1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器
例如：h1{ } 、a{ }
二、选择器分组
1、例子
h1,h2{ }
2、通配符
*{ }
三、类选择器详解
1、类选择器允许以一种独立与文档元素的方式来指定样式
例如：.class{ }
2、结合元素选择器
例如：a.class{ } /* 样式为class的a标签 */
3、多类选择器
例如：.class.class{ }
四、ID选择器详解
1、ID选择器
ID选择器类似于类选择器，不过也有一些差别
例如：#id{ }
2、类选择器和ID选择器区别
ID只能在文档总使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js时候，需要用到id
五、属性选择器详解
1、简单属性选择
例如：[title]{ }
2、根据具体属性值选择
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素；
例如：a[href="http://www.jikexueyuan.com"]{ }
3、属性和属性值必须完全匹配
4、根据部分属性值选择
例如：[title~="title"]{ } /* 类似模糊查询，意思为title属性里面包含“title”字符串 */
六、后代选择器
1、后代选择器
后代选择器可以选择作为某元素后代的元素（可以选择所有后代元素）
例如：p strong{ } /* 中间用空格隔开 */
p i{ } /* 隔代选择 */
七、子元素选择器
1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素(只能找子元素)
例如：h1>strong{ } /* 只能选择下一代 */
h1>strong>i{ } /* 选择隔代 */
八、相邻兄弟选择器
1、相邻兄弟选择器
可以选择紧接在另一个元素后的元素，且二者有相同父元素
例如：li+li{ } /* 设置li元素后面的li元素，必须在相同的父级元素下面 */
07-CSS动画—页面特效
课程概要
1、2D、3D转换
2、过渡
3、动画
4、多列
5、CSS瀑布流效果
一、2D\3D转换
1、通过CSS3转换，我们能够对元素进行移动、缩放、移动、拉长或拉伸
转换是使元素改变形状、尺寸和位置的一种效果
可以使用2D、3D来转换元素
2、2D转换方法
- translate(xpos,ypos)：移动（x轴，y轴）
- rotate(xdeg)：旋转（角度）
- scale(width,height)：缩放（缩放宽度，高度）
- skew(xdeg,ydeg)：倾斜 (围绕X轴旋转的角度，围绕Y轴旋转的角度)
- matrix()：矩阵变化
3、3D转换方法
- rotateX(xdeg)
- rotateY(ydeg)
二、过渡
1、通过使用CSS3，可以给元素添加一些效果
2、CSS3过渡是元素从一种样式转换成另一种样式
-
动画效果的CSS
-
动画执行的时间
3、属性
| 属性 | 描述 |
|---|---|
| transition | 设置四个过渡 |
| transition-property | 过渡的名称 |
| transition-duration | 过渡效果花费的时间 |
| transition-timing-function | 过渡效果的时间曲线 |
| transition-delay | 过渡效果开始的时间 |
4、过渡案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>过渡效果</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: aqua;
-webkit-transition: width 2s,height 2s,transform 2s;
transition: width 2s,height 2s,transform 2s;
/* 延时 */
/* -webkit-transition-delay: 2s;
transition-delay: 2s; */
margin: 300px auto;
}
/* 鼠标放上去 */
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
/* 鼠标移出 */
div:visited{
width: 100px;
height: 100px;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、动画
1、通过CSS3，也可以进行创建动画
2、CSS3的动画需要遵循@keyframes规则
- 规定动画的时长
- 规定动画的名称
3、动画案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动画效果</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: darkred;
position: relative;
animation: anim 10s infinite alternate;
-webkit-animation: anim 10s infinite alternate;
margin: 300px auto;
}
@keyframes anim {
0% {
background-color: red;
left: 0;
top: 0;
}
25% {
background-color: blue;
left: 200px;
top: 0;
}
50% {
background-color: aqua;
left: 200px;
top: 200px;
}
75% {
background-color: antiquewhite;
left: 0;
top: 200px;
}
100% {
background-color: red;
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<div>动画效果</div>
</body>
</html>
四、多列
1、在CSS3中，可以创建多列来对文本或者区域进行布局
2、属性
column-count：属性规定元素应该被分隔的列数
column-gap：属性规定列之间的间隔
column-rule：属性设置列之间的宽度、样式和颜色规则
五、CSS瀑布流效果
1、CSS瀑布流案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS瀑布流</title>
<style type="text/css">
.container {
column-width: 250px;
-webkit-column-width: 250px;
column-gap: 5px;
-webkit-column-gap: 5px;
margin: 10px auto;
background-color: dimgray;
}
.container div {
width: 250px;
margin: 5px 0;
}
.container p{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div><img src="img/19.jpg"><p>标签</p></div>
<div><img src="img/107.jpg"></div>
<div><img src="img/19.jpg"><p>标签</p></div>
<div><img src="img/107.jpg"></div>
<div><img src="img/s58.jpg" ></div>
<div><img src="img/19.jpg"><p>标签</p></div>
<div><img src="img/107.jpg"></div>
<div><img src="img/19.jpg"><p>标签</p></div>
<div><img src="img/107.jpg"></div>
<div><img src="img/s58.jpg" ></div>
<div><img src="img/s58.jpg" ></div>
<div><img src="img/s58.jpg" ></div>
<div><img src="img/19.jpg"><p>标签</p></div>
<div><img src="img/107.jpg"></div>
<div><img src="img/s58.jpg" ></div>
</div>
</body>
</html>
08-HTML与CSS简单页面效果实例
1、HTML与CSS简单页面源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>极客学院</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: snow;
}
.wrapper {
width: 80%;
height: 900px;
background-color: antiquewhite;
margin: 0px auto;
}
.heading {
width: 100%;
height: 90px;
background-color: snow;
margin: 0px auto;
}
.heading-title {
float: left;
font-family: arial, helvetica, sans-serif;
font-size: 30px;
color: burlywood;
}
.heading-nav {
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
height: 30px;
position: relative;
}
ul {
margin-left: 40px;
float: left;
list-style-type: none;
padding-top: 6px;
padding-bottom: 6px;
}
li {
padding-left: 10px;
display: inline;
}
a:link,
a:visited {
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;
}
a:hover,
a:active {
color: dimgrey;
}
.heading-img img {
border-radius: 30px;
display: inline;
width: 26px;
height: 26px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
float: right;
}
.heading-soptlight form{
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 100px;
}
form input{
height: 26px;
border-radius: 30px;
}
.body{
width: auto;
height: auto;
padding: 30px;
}
.body-title h3{
font-size: 30px;
font-family: arial, helvetica, sans-serif;
color: darkgray;
}
.body-title p{
margin-top: 20px;
margin-bottom: 20px;
}
.footing{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 10px;
color: darkgray;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading-nav">
<div class="heading-title">极客学院</div>
<div class="heading-navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">职业课程</a></li>
<li><a href="#">技术问答</a></li>
<li><a href="#">VIP会员</a></li>
</ul>
</div>
<div class="heading-img">
<img src="img/jokul.jpg" >
</div>
<div class="heading-soptlight">
<form><input type="text"></form>
</div>
</div>
</div>
<div class="body">
<div class="body-title">
<h3>熟悉极客学院</h3>
<p>加入极客学院，学习最新实战教程，全面提升你的技术能力！</p>
</div>
<hr >
<hr >
</div>
</div>
<div class="footing">@极客学院</div>
</div>
</body>
</html>
2、效果展示
HTML与CSS简单页面效果实例.png
09-CSS3选择器讲解（一）
课程概要
1、CSS3属性选择器
2、CSS3结构性伪类选择器
3、CSS3选择器root、not、empty和target
一、CSS3属性选择器
1、属性选择器
在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]、[att$=val]，使得属性选择器有了通配符的概念。
