第二部分 CSS3
Cascading Style Sheet 层叠样式表CSS:负责显示逻辑
Hyper Text Marked Language 超文本标记语言HTML:负责数据逻辑
CSS主要有两大类的功能:
- 对页面的字体、颜色、外观控制的非常细腻,让网页更加有活力
- 通过CSS来控制整个网页的风格
CSS可以向HTML一样单独成文件使用,xxx.css,或者嵌入到html当中使用
2.1 CSS样式表的基本使用
2.1.1 链接外部样式文件
通过link标签将外部的css文件导入到我们当前的html文件中。
好处:将数据和显示分离,同一份css文件也可以被多个html共用。
坏处:浏览器先加载数据信息,再读取数据信息中的link标签,再加载link所导入的文件,相对而言比较慢
/*将来 在使用该css文件的html中 所有的table都是背景黄色 宽度为400px*/
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "楷体";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>
</body>
</html>
2.1.2 导入外部样式文件
通过@import导入,但是不推荐这么使用,有些浏览器不支持此操作的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
@import url("outer.css");
</style>
</head>
<body>
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>
</body>
</html>
2.1.3 使用内部样式定义
好处:统一加载,相对较快
坏处:数据和样式揉在一起,不方便管理,而且css样式也不方便变共享
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "楷体";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>
</body>
</html>
2.1.4 使用内联样式
直接写在相对应的标签style属性中
坏处:冗余过大
好处:针对性最强,总有几个特别的不跟大部队走
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
<style>
table {
background-color: rgb(255, 0, 13);
width: 400px;
}
</style>
</head>
<body>
<table >
<tr>
<td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行一列</td>
<td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">一行二列</td>
</tr>
<tr>
<td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行一列</td>
<td style="background-color: #00f;font-family: '楷体';font-size: 20px;text-shadow: 20px 6px 2px #333;">二行二列</td>
</tr>
</table>
</body>
</html>
2.2 CSS选择器
名称 {
属性:属性值;
...
}
选择器的作用是啥?指定符合要求的一些元素进行样式的变化
2.2.1 元素选择器
选择元素标签
标签名 {
属性:属性值;
...
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "楷体";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>一行一列</td>
<td>一行二列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
</tr>
</table>
</body>
</html>
2.2.2 属性选择器
根据标签中属性的特点来进行选择的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
<style>
/*所有的div们*/
div {
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
/*具有id属性的div们*/
div[id] {
background-color: #aaa;
}
/*具有id属性且id属性值中包含xx的div们*/
div[id*=xx] {
background-color: #999;
}
/*具有id属性且id属性值中以xx开头的div们*/
div[id^=xx] {
background-color: #555;
}
/*具有id属性且id属性值中以xx结尾的div们*/
div[id$=xx] {
background-color: #333;
}
/*具有id属性且id属性值等于xx的div们*/
div[id=xx] {
background-color: #111;
color: aliceblue;
}
</style>
</head>
<body>
<div>没有任何属性的div</div>
<div id="a">带id属性的div 属性和xx无关</div>
<div id="zzxxyy">带id属性但包含xx的div</div>
<div id="xxyy">带id属性且以xx开头的div</div>
<div id="zzxx">带id属性且以xx结尾的div</div>
<div id = "xx">带id属性且等于xx的div</div>
</body>
</html>
2.2.3 id选择器
通过id值来进行选择
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 10px;
}
/*id为xx的标签们*/
#xx {
border: 2px dotted lightblue;
background-color: tomato;
}
/*id为xx的p标签*/
p#xx {
border: 2px dotted aqua;
background-color: indigo;
}
/*id为yy的p标签*/
p#yy {
border: 2px dotted rgb(0, 255, 157);
background-color: rgb(235, 252, 8);
}
</style>
</head>
<body>
<div>
和我啥关系也没有
</div>
<div id="xx">
我的id是xx
</div>
<p id="xx">
我是p
</p>
<div id="yy">
我是yy的div
</div>
<p id="yy">
我是p
</p>
</body>
</html>
2.2.4 类选择器
类选择器主要看的是class属性,基本上每个标签都有id、class、style属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
/*所有class属性为myclass的标签们*/
.myclass {
width: 240px;
height: 40px;
background-color: #ddd;
}
/*class属性为myclass的div标签*/
div.myclass {
border: 1px double black;
background-color: #888;
}
</style>
</head>
<body>
<div class="myclass">
class属性为myclass的div
</div>
<p class="myclass">
class属性为myclass的p
</p>
</body>
</html>
2.2.5 包含选择器
指的是在某一个元素之下的所有元素的选择
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 300px;
background-color: #ddd;
margin: 5px;
}
/*在div之下所有class为a的标签*/
div .a{
width: 200px;
background-color: #888;
border: 1px dotted lightcoral;
}
/*在div之下所有section标签*/
div section {
border: 10px solid yellow;
}
</style>
</head>
<body>
<div>
没有任何元素的div
</div>
<div>
<p class="a">
在div中的p,class为a
</p>
<section>
<div class="a">
在seciton中的div class为a
</div>
</section>
</div>
<section>
<div>
在section中的div
</div>
</section>
</body>
</html>
2.2.6 子选择器
父子关系
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 350px;
height: 60px;
background-color: #ddd;
margin: 5px;
}
/*div标签下所有class属性为a的子标签*/
div>.a {
width: 200px;
height: 35px;
border: 1px dotted black;
background-color: #888;
}
/*div标签下所有span子标签*/
div>span{
font-family: "楷体";
font-size: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<p class="a">
我是div中的p class为a
</p>
</div>
<div>
<section>
<p class="a">
我是div中的seciton中的p class为a
</p>
</section>
</div>
<div>
<span>我是span1</span>
<span>我是span2</span>
<p>
<span>我是span3</span>
</p>
</div>
</body>
</html>
2.2.7 兄弟选择器
同级别
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
#android ~ .long {
background-color: khaki;
}
</style>
</head>
<body>
<div class="long">呵呵1</div>
<div id="android">呵呵2</div>
<div class="long">呵呵3</div>
<p class="long">呵呵4</p>
<p class="long">呵呵5</p>
</body>
</html>
2.2.8 选择器组合
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div , #xx , .myclass {
width: 200px;
height: 20px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>div</div>
<p id="xx">p</p>
<span class="myclass">span</span>
</body>
</html>
2.2.9 伪元素选择器
不是元素,但是也可被更改的一些内容
- :first-letter:首字母,只针对块级元素,如果要使用到内联元素上,要么指定宽高,要么将position属性设置为absolute、或者将display属性定义为block
- :first-line:首行,只针对块级元素,如果要使用到内联元素上,要么指定宽高,要么将position属性设置为absolute、或者将display属性定义为block
- :before:在元素之前
- :after:在元素之后
变首字母的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
span {
display: block;
}
span::first-letter {
color: #f00;
font-size: 50px;
}
p::first-letter {
color: #f00;
font-size: 50px;
}
</style>
</head>
<body>
<span>这是span</span>
<p>这是p</p>
</body>
</html>
变首行的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
span {
display: block;
}
span::first-line {
color: #f00;
font-size: 50px;
}
p::first-line {
color: #f00;
font-size: 50px;
}
</style>
</head>
<body>
<span>这是span第一行<br>第二行</span>
<p>这是p第一行<br>第二行</p>
</body>
</html>
before与after结合content属性来使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div::before {
content:"这是一个div"
}
div::after {
content: url("logo.jpg");
}
div>div.no:after {
content:"牛B Plus";
}
p {
counter-increment: pcounter;
}
p::before {
content: "第" counter(pcounter) "页";
}
p::after {
content: counter(pcounter,lower-roman);
}
/*decimal lower-alpha lower-roman upper-xx*/
</style>
</head>
<body>
<div>div01</div>
<div>div02</div>
<div>div03</div>
<div>
<div class="no">
是不是我?
</div>
</div>
<p>这是第1端</p>
<p>这是第2端</p>
<p>这是第3端</p>
<p>这是第4端</p>
</body>
</html>
2.2.10 伪类选择器
标签的状态!
- :link:超链接点击之前
- :visited:超链接访问之后
- :hover:鼠标悬浮的时候
- :active:当点击的时候
- :focus:当获取焦点时
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
a:link {
color: red;
font-size: 30px;
}
a:visited {
color: gray;
font-size: 30px;
}
a:hover {
color: greenyellow;
font-size: 50px;
}
a:active {
color: yellow;
font-size: 30px;
}
img:hover {
width: 100px;
}
</style>
</head>
<body>
<a href="http://www.123.com">呵呵呵呵呵呵呵</a>
<div>
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
</div>
</body>
</html>
2.3 文字与文本相关属性
2.3.1 文字相关属性
- color:文字的颜色
- font-family:文字的字体
- font-size:文字的大小 px或pt(打印机模式下的单位)
- font-weight:文字的加粗
- lighter:细的
- normal:普通的默认的
- bold:加粗
- bolder:更粗
- 设置数值
- font-decoration:文字划线
- none无样式
- underline下划线
- line-through:中划线
- overline:上划线
- blink:闪烁(目前的浏览器不太支持了)
- font-style:文字的样式
- text-shadow:文字的阴影 复合属性
- color:阴影颜色
- xoffset:阴影横向的偏移量 正值向右
- yoffset:阴影纵向的偏移量 正值向下
- radius:阴影的模糊程度
- text-transform:文字的大小写(英文)
- none默认
- capitalize:首字母大写
- uppercase:所有字母大写
- lowercase:所有字母小写
- line-height:文字的行高
- letter-spacing:字符之间的间距
- word-spacing:单词之间的间距
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 150px;
height: 40px;
border: 1px solid red;
font-size: 20px;
font-family: '隶书';
}
</style>
</head>
<body>
<span style="color: blue;">测试文字</span><br>
<span style="color: #FFF;">测试文字</span><br>
<span style="color: #123456;">测试文字</span><br>
<span style="color: rgb(255, 0, 0);">测试文字</span><br>
<span style="color: rgba(255, 0, 0, 0.5);">测试文字</span><br>
<span style="color: hsl(280, 100%, 50%);">测试文字</span><br>
<span style="color: hsla(280, 100%, 50%, 0.5);">测试文字</span><br>
<span style="font-family: '楷体';">测试文字</span><br>
<span style="font-family: '华文行楷';">测试文字</span><br>
<span style="font-family: '幼圆';">测试文字</span><br>
<span style="font-size: 20pt;">测试文字</span><br>
<span style="font-style:italic;">测试文字</span><br>
<span style="font-style: oblique;">测试文字</span><br>
<span style="font-weight: lighter;">测试文字</span><br>
<span style="font-weight: bold;">测试文字</span><br>
<span style="font-weight: bolder;">测试文字</span><br>
<span style="font-weight: 300px;">测试文字</span><br>
<span style="text-decoration: underline;">测试文字</span><br>
<span style="text-decoration: overline;">测试文字</span><br>
<span style="text-decoration: line-through;">测试文字</span><br>
<span style="text-decoration: blink;">测试文字</span><br>
<span style="text-transform: lowercase;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="text-transform: uppercase;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="text-transform: capitalize;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="line-height: 50px;">测试文字</span><br>
<span style="letter-spacing:10px;">
Hello eveyone my name is zhangsan how are you<br>
I am fine 3Q~
</span><br>
<span style="word-spacing:10px;">
Hello eveyone my name is zhangsan how are you<br>
I am fine 3Q~
</span><br>
<hr>
<!--x偏移量 y偏移量 阴影模糊度 颜色-->
<div style="text-shadow: 10px 10px 2px red;">
测试文字
</div>
<div style="text-shadow: 10px 10px 10px red;">
测试文字
</div>
<div style="text-shadow: -10px -10px 2px red;">
测试文字
</div>
<div style="text-shadow: 0px 0px 10px red;color: red;">
测试文字
</div>
<div style="text-shadow: 10px 10px 0px red , 20px 20px 0px yellow, 30px 30px 0px blue;">
测试文字
</div>
</body>
</html>
2.3.2 文本相关属性
- text-indent:文本的缩进
- text-overflow:文本溢出
- clip溢出剪裁,前提overflow:hidden
- ellipse溢出剪裁,剪裁的部分用…表示,前提overflow:hidden
- vertical-align:垂直对齐方式
- auto:自动对齐
- baseline:基线对齐
- sub:与文本下标对齐
- super:与文本上标对齐
- top:顶端对齐
- middle:中间对齐
- bottom:低端对齐
- length:偏移距离
- text-align:水平对齐方式
- left
- right
- center
- justify两端对齐
- work-break:文本换行方式
- normal:依赖于浏览器的换行行为
- keep-all:只能在半角空格或连字符地方换行
- break-all:允许在单词中间换行
- white-space:空格处理方式-什么是是否换行
- normal:默认,到达容器边界再换行
- nowrap:强制在同一行直至结束,如果遇到
<br>
再换行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
width: 200px;
height: 50px;
font-size: 15px;
}
</style>
</head>
<body>
<div>
测试文字,测试文字,测试文字,测试文字
</div>
<div style="text-indent: 20px;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="text-align: left;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="text-align: center;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="text-align: right;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="white-space: normal;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="white-space: nowrap;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="white-space: nowrap;overflow:hidden;text-overflow: clip;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
测试文字,测试文字,测试文字,测试文字
</div>
<div style="word-break: keep-all;">
Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
</div>
<div style="word-break: break-all;margin-top: 50px;">
Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
</div>
</body>
</html>
2.4 背景与边框相关属性
2.4.1 背景相关属性
- background:是一种复合属性,可以设置背景色,也可以设置背景图,还可以设置背景图重复模式
- background-color:背景色
- background-image:背景图
- background-attachment:背景图是否可以滚动
- scroll:滚动
- fixed:固定
- background-position:背景图的位置
- background-repeat:平铺
- repeat横纵平铺
- no-repeat不平铺
- repeat-x:横向平铺
- repeat-y:纵向平铺
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
height: 200px;
width: 200px;
color: aqua;
}
</style>
</head>
<body style="background-image: url(bg.jpg);background-attachment: fixed;">
<div style="background-color: beige;">
测试图片
</div>
<div style="background-image: url(logo.jpg);">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat-x;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat-y;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50% 50%;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 10% 10%;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50px 50px;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right center;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right bottom;">
测试图片
</div>
</body>
</html>
新增的几个属性
- background-clip:背景的覆盖范围
- border-box:覆盖有边框 内边距 内容
- no-clip:同上
- padding-box:内边距 内容
- content-box:内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-clip: border-box;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-clip: padding-box;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-clip: content-box;">
测试图片
</div>
</body>
</html>
- background-origin:背景覆盖的开始
- border:从边框开始
- padding:从内边距开始
- content:从内容开始
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
测试图片
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: border;background-repeat: no-repeat;">
测试图片
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: padding;background-repeat: no-repeat;">
测试图片
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: content;background-repeat: no-repeat;">
测试图片
</div>
</body>
</html>
- background-size:背景图片的大小
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size:50% 50%;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 80% auto;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto 30%;">
测试图片
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 100% 100%;">
测试图片
</div>
</body>
</html>
多背景的设置
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
height: 200px;
width: 200px;
background-image: url(logo.jpg),url(bg.jpg);
background-repeat: no-repeat,no-repeat;
background-position: center center,left center;
background-size: 50% 50%, 80% 80%;
}
</style>
</head>
<body>
<div>
测试图片
</div>
</body>
</html>
2.4.2 边框相关属性
- border:复合属性 可以设置边框粗细、线型、颜色
- border-width
- border-style
- none
- hidden
- dotted 点
- dashed 虚线
- soild 实线
- double 双实线
- groove:3D凹槽
- ridge:3D凸槽
- inset:3D凹入
- outset:3D凸出
- border-color
- border-top|right|left|bottom-width|style|color
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
margin-top: 20px;
height: 100px;
width: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div style="border: 5px solid #666;">
测试文字
</div>
<div style="border: 5px dashed #666;">
测试文字
</div>
<div style="border: 5px double #666;">
测试文字
</div>
<div style="border: 5px groove #666;">
测试文字
</div>
<div style="border: 5px ridge #666;">
测试文字
</div>
<div style="border: 5px inset #666;">
测试文字
</div>
<div style="border: 5px outset #666;">
测试文字
</div>
<div style="border-width: 5px;border-color: chartreuse;border-style: solid;">
测试文字
</div>
<!--5px 上下 10px左右-->
<div style="border-width: 5px 10px;border-color: chartreuse;border-style: solid;">
测试文字
</div>
<!--5px上 10px左右 15px下-->
<div style="border-width: 5px 10px 15px;border-color: chartreuse;border-style: solid;">
测试文字
</div>
<!--5px上 10px右 15px下 20px左-->
<div style="border-width: 5px 10px 15px 20px;border-color: chartreuse;border-style: solid;">
测试文字
</div>
<div style="border-width: 5px 10px 15px 20px;
border-color: #111 #555 #999#CCC;
border-style: solid dashed dotted double;">
测试文字
</div>
<div style="border: 2px solid red;border-radius: 5px;">
测试文字
</div>
<div style="border: 2px solid red;border-radius: 10px;">
测试文字
</div>
<div style="border: 2px solid red;border-radius: 15px;">
测试文字
</div>
<div style="border: 2px solid red;border-radius: 5px 10px 15px 20px;">
测试文字
</div>
<div style="border: 2px solid red;
border-top-left-radius: 5px;border-top-right-radius: 10px;
border-bottom-right-radius: 15px;border-bottom-left-radius: 20px;">
测试文字
</div>
</body>
</html>
2.5 表格与列表相关属性
2.5.1 表格相关属性
- border-collapse:行货单元格边框的显示方式
- seperate分开
- collapse合并
- border-spacing:单元格与单元格之间的距离 前提是分开的
- caption-side:表标题的位置 top bottom
- empty-cells:单元格如果没有内容时是否显示
- show
- hide
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
table {
width: 400px;
border: 1px solid black;
}
td {
background-color: #ccc;
border: 1px solid black;
}
</style>
</head>
<body>
<table style="border-collapse: collapse;caption-side: bottom;">
<caption>表的标题</caption>
<tr>
<td>哈哈哈哈哈哈哈</td>
<td>呵呵呵呵呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td>嘿嘿嘿嘿嘿嘿嘿</td>
</tr>
</table>
<table style="border-collapse: separate;empty-cells: hide;">
<caption>表的标题</caption>
<tr>
<td>哈哈哈哈哈哈哈</td>
<td>呵呵呵呵呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td></td>
</tr>
</table>
<table style="border-collapse: separate;empty-cells: hide;border-spacing: 10px;">
<caption>表的标题</caption>
<tr>
<td>哈哈哈哈哈哈哈</td>
<td>呵呵呵呵呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td></td>
</tr>
</table>
</body>
</html>
- table-layout:表格宽度的布局 auto自动 fixed固定
在fixed情况下:
- 通过col或colgroup设置宽度,表的宽度就是所有列宽度的总和
- 第一行所有单元格设置宽度,标的宽度就是第一行单元格宽度的总和
- 直接平均分配,忽略实际宽度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
table {
width: 400px;
border: 1px solid black;
table-layout: fixed;
}
td {
background-color: #ccc;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>哈哈哈哈哈哈哈</td>
<td>呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td>嘿嘿嘿</td>
</tr>
</table>
<table>
<col style="width:250px">
<col style="width: 50px;">
<tr>
<td>哈哈哈哈哈哈哈</td>
<td>呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td>嘿嘿嘿</td>
</tr>
</table>
<table>
<tr>
<td style="width: 250px;">哈哈哈哈哈哈哈</td>
<td style="width: 50px;">呵呵呵</td>
</tr>
<tr>
<td>嘻嘻嘻嘻嘻嘻嘻</td>
<td>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</td>
</tr>
</table>
</body>
</html>
2.5.2 列表相关属性
- list-style:符合属性
- list-style-image:让列表编号以图片显示
- list-style-position:编号的位置 是在元素之前 outside 在元素之内inside
- list-style-type:列表编号文字样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
li {
background-color: crimson;
margin: 5px;
}
</style>
</head>
<body>
<ul style="list-style-image: url(logo.jpg);">
<li>来了</li>
<li>嗯 来了</li>
<li>来不</li>
<li>来</li>
</ul>
<ul style="list-style-image: url(logo.jpg);list-style-position: inside;">
<li>来了</li>
<li>嗯 来了</li>
<li>来不</li>
<li>来</li>
</ul>
<ol style="list-style-type:cjk-ideographic">
<li>来了</li>
<li>嗯 来了</li>
<li>来不</li>
<li>来</li>
</ol>
</body>
</html>
2.5.3 控制光标相关属性
- cursor:用户控制鼠标的样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
display: inline-block;
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div style="cursor: all-scroll;">
十字箭头
</div>
<div style="cursor: col-resize;">
列拉伸
</div>
<div style="cursor: crosshair;">
十字
</div>
<div style="cursor: move;">
移动箭头
</div>
<div style="cursor: help;">
求助问号
</div>
<div style="cursor:no-drop">
禁止拖拽
</div>
<div style="cursor:not-allowed">
不允许-禁止
</div>
<div style="cursor:pointer">
手指
</div>
<div style="cursor:progress">
圆圈进度
</div>
<div style="cursor:row-resize">
水平拉伸
</div>
<div style="cursor:text">
插入文本
</div>
<div style="cursor:vertical-text">
垂直插入文本
</div>
<div style="cursor:wait">
圆圈进度
</div>
<div style="cursor:n-resize">
南北拉伸
</div>
<div style="cursor:ne-resize">
东北拉伸
</div>
<div style="cursor:se-resize">
东南拉伸
</div>
</body>
</html>
2.6 变形与动画相关属性
2.6.1 变形相关属性
主要用于控制组件的旋转、位移、倾斜、缩放,也可以使用矩阵来进行变形处理
- transform:设置变形
- translate(tx,ty):设置位移,组件从当前位置 横向移动tx 纵向移动ty,ty值可以忽略,横纵移动都是tx
- translateX(tx)
- translateY(ty)
- scale(sx,sy):设置缩放,sy可以忽略,默认都是sx
- scaleX(sx)
- scaleY(sy)
- skew(sx,sy):设置倾斜,sx和sy都是角度值,sy可以忽略默认是sx
- skewX(sx)
- skewY(sy)
- rotate(angle):旋转angle角度
- transform-origin:变形的基点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 60px;
height: 60px;
background-color: aqua;
margin: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
测试变形
</div>
<div style="transform: rotate(30deg);">
测试变形
</div>
<div style="transform: translate(10px,10px)">
测试变形
</div>
<div style="transform: scale(1.2);">
测试变形
</div>
<div style="transform: scale(1.5,0.5);">
测试变形
</div>
<div style="transform: skew(30deg);">
测试变形
</div>
<div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">
测试变形
</div>
<div style="transform: skew(45deg) scale(1.2,0.8) translate(10px,10px) rotate(60deg);">
测试变形
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 60px;
height: 60px;
background-color: aqua;
margin: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
测试变形
</div>
<div style="transform: rotate(30deg);">
测试变形
</div>
<div style="transform: translate(10px,10px)">
测试变形
</div>
<div style="transform: scale(1.2);">
测试变形
</div>
<div style="transform: scale(1.5,0.5);">
测试变形
</div>
<div style="transform: skew(30deg);">
测试变形
</div>
<div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">
测试变形
</div>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<div>
测试变形
</div>
<div style="transform: rotate(45deg);">
测试变形
</div>
<div>
测试变形
</div>
<div style="transform-origin: left center; transform: rotate(45deg);">
测试变形
</div>
<div>
测试变形
</div>
<div style="transform-origin: right center; transform: rotate(45deg);">
测试变形
</div>
<div>
测试变形
</div>
<div style="transform-origin: left bottom; transform: rotate(30deg);">
测试变形
</div>
</body>
</html>
</body>
</html>
2.6.2 Transition动画属性
控制组件的某个属性发生改变时,会经历一段时间来进行变化,这个过程Transition动画-补间动画
- transition-property:针对的属性
- transition-duration:变化的时长
- transition-timing-function:渐变速度
- ease:慢-快-慢
- linear:匀速
- ease-in:慢-快
- ease-out:快-慢
- cubic-bezier(x1,y1,x2,y2):贝奇挨曲线控制
- transition-delay:延迟时间
<演示代码中包含JS代码>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: green;
margin: 10px;
transition: background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
div:hover {
background-color: yellow;
}
img {
position: absolute;
transition: left 3s linear , top 3s linear;
}
p {
width: 300px;
height: 100px;
background-color: red;
transition: background-color 2s ease,width 2s ease,height 2s ease;
}
</style>
</head>
<body>
<div>
测试背景颜色的动画
</div>
<img id="aim" src = "logo.jpg">
<script>
//先找到图片标签这个对象
var aim = document.getElementById("aim");
aim.style.left = "0px";
aim.style.top = "0px";
//设置全局的点击事件
document.onmousedown = function(evt) {
aim.style.left = evt.pageX + "px";
aim.style.top = evt.pageY + "px";
}
</script>
<p id = "lala">
测试三个属性的动画效果
</p>
<script>
var originWidth = 300;
var originHeight = 100;
var lala = document.getElementById("lala");
var zoom = function(scale,bgColor) {
lala.style.width = originWidth * scale + "px";
lala.style.height = originHeight * scale + "px";
lala.style.backgroundColor = bgColor;
}
</script>
<button onclick="zoom(1.5,'blue')">放大</button>
<button onclick="zoom(0.5,'yellow')">缩小</button>
<button onclick="zoom(1.0,'red')">恢复</button>
</body>
</html>
2.6.3 Animation动画属性
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
@keyframes animation01 {
0% {
left: 100px;
}
10% {
left: 150px;
}
20% {
left: 75px;
}
30% {
left: 150px;
}
40% {
left: 75px;
}
50% {
left: 150px;
}
60% {
left: 75px;
}
70% {
left: 150px;
}
80% {
left: 75px;
}
100% {
left:100px;
}
}
div {
background-color: gray;
border: 1px solid red;
position: absolute;
left: 100px;
width: 200px;
height: 60px;
}
div:hover {
animation-name: animation01;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes animation02 {
0% {
transform: rotate(0deg) scale(1);
background-color: #f00;
}
40% {
transform: rotate(720deg) scale(0.1);
background-color: #ff0;
}
60% {
transform: rotate(1080deg) scale(4);
background-color: #f0f;
}
100% {
transform: rotate(0deg) scale(1);
background-color: #f00;
}
}
p {
background-color: #f00;
border: 1px solid black;
width: 60px;
height:60px;
}
p:hover {
animation-name: animation02;
animation-duration: 8s;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div>
Animation01
</div>
<p>
Animation02
</p>
</body>
</html>
2.7 盒子模型与布局相关属性
2.7.1 布局相关属性
- float:控制目标组件是否浮动以及如何浮动,如果某一个组件被设置为浮动,则该组件当做块级元素处理。
- left:左浮动
- right:右浮动
- clear:设置组件的左右是否允许出现其他浮动的对象
- none两边都允许
- left左边不允许出现
- right右边不允许出现
- bot两边都不允许出现
- overflow:组件内容不够容纳时,剩下的内容如何处理
- visible默认 不剪裁 也不添加滚动条
- auto如果容纳不下自动添加滚动条
- hidden剪裁超出的部分
- scoll:总是显示出滚动条
- overflow-x:控制水平方向上overflow
- overflow-y:控制垂直方向上overflow
- visibility:组件是否显示,若不显示时,其所占用的空间依旧存在
- display:设置组件如何显示
浮动的问题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
border: 1px solid black;
width: 300px;
height: 80px;
padding: 5px;
}
</style>
</head>
<body>
<div style="float: left;">
div元素1
</div>
<div style="float: left;">
div元素2
</div>
<div style="float: right;">
div元素3
</div>
<div style="float: right;">
div元素4
</div>
</body>
</html>
用float属性实现多栏布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1080px;
margin: auto;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div style="float: left;width: 220px;">
<h2>第一栏</h2>
<p>
北国风光,千里冰封,万里雪飘,望长城内外,惟余莽莽,大河上下,顿失滔滔,山舞银蛇,原驰蜡象,欲与天公试比高,须晴日,看红装素裹,分外妖娆,江山如此多娇,引无数英雄竞折腰,惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚,一代天骄,成吉思汗,只识弯弓射大雕,俱往矣,数风流人物,还看今朝。
</p>
</div>
<div style="float: left;width: 500px;">
<h2>第二栏</h2>
<ul>
<li><a href="#">最热新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
</ul>
</div>
<div style="float: left;width: 240px;">
<h2>第三栏</h3>
<figure>
<figcaption>美女图片</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
clear属性实现换行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div {
width: 220px;
padding: 5px;
margin: 2px;
float: left;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<div>
div元素1
</div>
<div>
div元素2
</div>
<div style="clear: both;">
div元素3
</div>
<div>
div元素4
</div>
</div>
</body>
</html>
滚动条的问题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div {
white-space: nowrap;
width: 200px;
height: 50px;
padding: 5px;
margin: 50px;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<div>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
</div>
<div style="overflow: hidden;">
div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
</div>
<div style="overflow: auto;">
div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
</div>
<div style="overflow-x: hidden;">
div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
</div>
<div style="overflow-y: hidden;">
div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
</div>
</div>
</body>
</html>
2.7.2 盒子模型与display属性
两种最基本的盒子模型:
- block:块级元素,占据一行,可以设置宽高 div p
- inline:内联元素,不占据一行,多个内联元素在同一行,放不下则换行,不可以设置宽高 span a img
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
</head>
<body>
<div style="display: inline;">div元素</div>
<div style="display: inline;">div元素</div>
<span style="display: block;">span元素</span>
<span style="display: block;">span元素</span>
</body>
</html>
- none值 隐藏的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
width: 300px;
height: 40px;
background-color: #ddd;
border:1px solid black;
}
</style>
</head>
<body>
<div id="test1">
div01
</div>
<input type="button" value="显示"
onclick="document.getElementById('test1').style.display=''">
<input type="button" value="隐藏"
onclick="document.getElementById('test1').style.display='none'">
<div id="test2">
div02
</div>
<input type="button" value="显示"
onclick="document.getElementById('test2').style.visibility='visible'">
<input type="button" value="隐藏"
onclick="document.getElementById('test2').style.visibility='hidden'">
</body>
</html>
- inline-block:不占据一行,但也可以设置宽高
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1080px;
margin: auto;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 220px;">
<h2>第一栏</h2>
<p>
北国风光,千里冰封,万里雪飘,望长城内外,惟余莽莽,大河上下,顿失滔滔,山舞银蛇,原驰蜡象,欲与天公试比高,须晴日,看红装素裹,分外妖娆,江山如此多娇,引无数英雄竞折腰,惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚,一代天骄,成吉思汗,只识弯弓射大雕,俱往矣,数风流人物,还看今朝。
</p>
</div>
<div style="width: 500px;">
<h2>第二栏</h2>
<ul>
<li><a href="#">最热新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
</ul>
</div>
<div style="width: 240px;">
<h2>第三栏</h3>
<figure>
<figcaption>美女图片</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
导航样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body>div {
text-align: center;
margin: auto;
}
div>div {
display: inline-block;
border:1px solid black;
width: 100px;
height: 50px;
}
a {
text-decoration: none;
/**/
display: block;
width: 100px;
height: 50px;
background-color: #eee;
}
a:hover {
background-color: #aaa;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">百度</a>
</div>
<div>
<a href="#">百度</a>
</div>
<div>
<a href="#">百度</a>
</div>
<div>
<a href="#">百度</a>
</div>
</div>
</body>
</html>
- inline-table盒子模型
将表格变为内联元素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
table {
border: 1px solid black;
display: inline-table;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
前面的内容
<table>
<tr>
<td>呵呵呵呵</td>
<td>呵呵呵呵</td>
</tr>
<tr>
<td>呵呵呵呵</td>
<td>呵呵呵呵</td>
</tr>
</table>
后面的内容
</body>
</html>
表格相关的盒子模型
- table:将组件显示为表格样式
- table-caption:将组件显示为表标题样式
- table-cell:将组件显示为单元格样式
- table-row:将组件显示为行的样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div>div{
display: table-cell;
border: 1px solid black;
}
</style>
</head>
<body>
前面的内容
<div style="display: table;border: 1px solid black;width: 400px;">
<div style="display: table-caption;">表格的标题</div>
<div>
<div>呵呵呵呵</div>
<div>呵呵呵呵</div>
</div>
<div>
<div>呵呵呵呵</div>
<div>呵呵呵呵</div>
</div>
</div>
后面的内容
</body>
</html>
2.7.3 给盒子模型加阴影
- box-shadow属性
- hOffset:水平偏移
- vOffset:垂直偏移
- blurlength:阴影的模糊程度
- scaleLength:阴影的缩放程度
- color:阴影的颜色
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
width: 300px;
height: 50px;
border: 1px solid black;
margin-top: 30px;
}
</style>
</head>
<body>
<div style="box-shadow: 10px 10px 5px #ddd;"></div>
<div style="box-shadow: -10px -10px 5px #ddd;"></div>
<div style="box-shadow: 10px 10px 5px 10px #ddd;"></div>
<div style="box-shadow: 10px 10px 5px 20px #ddd;"></div>
</body>
</html>
2.7.4 多栏布局
CSS新增的分栏布局
将一个组件的内容分成若干个部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
/*将组件内容分成3部分 横向分*/
column-count:3;
/*分开的部分之间的间距*/
column-gap: 50px;
/*分开的部分之间的分隔条 宽度 样式 颜色*/
column-rule: 10px inset #aaa;
}
</style>
</head>
<body>
<div>
呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
</div>
</body>
</html>
使用盒子模型来实现多栏布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1200px;
border: 1px solid black;
/*设置容器组件为box样式*/
display: -webkit-box;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 220px;">
<h2>第一栏</h2>
<p>
北国风光,千里冰封,万里雪飘,望长城内外,惟余莽莽,大河上下,顿失滔滔,山舞银蛇,原驰蜡象,欲与天公试比高,须晴日,看红装素裹,分外妖娆,江山如此多娇,引无数英雄竞折腰,惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚,一代天骄,成吉思汗,只识弯弓射大雕,俱往矣,数风流人物,还看今朝。
</p>
</div>
<div style="width: 500px;">
<h2>第二栏</h2>
<ul>
<li><a href="#">最热新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">国际新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
</ul>
</div>
<div style="width: 240px;">
<h2>第三栏</h3>
<figure>
<figcaption>美女图片</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
2.7.5弹性盒子和栅格布局
弹性盒子
是一种完全根据屏幕尺寸需求来实现自适应动态布局的样式
需要两种东西:弹性容器+弹性子元素
弹性容器默认有一行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
.flex-container {
/*将div设置为弹性的容器*/
display: flex;
width: 400px;
height: 250px;
background-color: lightblue;
/*弹性子元素在弹性容器中的排列方式 row column -reverse*/
flex-direction: row;
/*水平对齐方式
flex-start 从左到右紧凑
flex-end
center 紧凑居中
spacing-bewteen 平均分布
*/
justify-content: space-between;
/*垂直对齐*/
align-items:center;
}
.flex-item {
background-color: red;
width: 50px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item01</div>
<div class="flex-item">item02</div>
<div class="flex-item">item03</div>
<div class="flex-item">item04</div>
</div>
</body>
</html>
栅格布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
.box {
border: 1px solid black;
/*使用栅格样式布局*/
display: grid;
/*设置栅格中列的宽度*/
grid-template-columns: 20% 20% 20% 20%;
grid-template-columns: 200px 200px 200px 200px;
/*也可以在确定栅格宽度的情况下 利用百分比来设定宽度*/
width: 500px;
grid-template-columns: repeat(5,1fr);
height: 400px;
grid-template-rows: repeat(3,1fr);
/*单元格之间的间距*/
grid-gap: 10px;
}
.box>div {
border: 1px solid red;
}
.test {
/*
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
*/
/*一笔带过*/
grid-area: 2/2/3/5;
}
</style>
</head>
<body>
<div class="box">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div class="test">07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
官方推荐的一种栅格布局案例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
#content {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: minmax(100px,auto);
max-width: 960px;
margin: 0px auto;
grid-gap:10px;
grid-template-areas:
"header header header header"
"aside . main main"
"nav . main main"
"section section section section"
"section section section section"
"footer footer footer footer";
}
#content>* {
background-color: #3bbced;
padding: 30px;
}
header {grid-area: header;}
main {grid-area: main;}
section {grid-area: section;}
aside {grid-area: aside;}
nav {grid-area: nav;}
footer {grid-area: footer;}
</style>
</head>
<body>
<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>
</body>
</html>