文章目录
一、CSS是什么?
一个网页页面由html,css,javascript组成
html相当于一个简陋的骨架,css相当于对这个骨架进行化妆修饰的
css 层叠样式表 cascading style sheets
二、CSS的三种引入方式
CSS三种引入方式:①行内样式②内联样式③外联样式
使用CSS的目的:为了修饰标签的,让标签更好看
2.1行内样式
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 行内样式的写法,目的是为了修饰div标签的
学过的每一个标签,都有这个属性叫style
style属性值写的是css语法格式
css语法格式:
属性1:属性值1;属性2:属性值2;属性3:属性值3;
eg:border:边框大小 子属性 solid:边框颜色
width:宽度
height:高度
background-color:背景颜色
color:字体颜色
-->
<div style="border:0.25rem solid gold; width: 31.25rem; height: 25rem; background-color: aqua; color: red;">
一望无际的沙漠里,简直就是一个极度喧嚣的世界,一幕幕优美的画面和热闹的舞台剧总是在轮番
登场,令人心醉神怡。可是,它们的生存,却给人们留下了太多、太深、太久远的启示和忠告。不信?
你看,在沙漠里,有一种植物叫胡杨,它是沙漠地区特有的珍贵森林资源,因其超顽强的生命力,还被
人们赞誉为“长着千年不死,死后千年不倒,倒地千年不腐”的英雄树。为了近观胡杨的独特风范,我
和我的同伴曾走向塔克拉玛干沙漠的深处,在那荒凉的戈壁滩里,映入眼帘的是晶莹剔透的飞沙,迎接
我们的是难忍的饥渴和孤独,以及炽热的煎熬,动物、植被的残骸四处呈现,而胡杨则展现出与天地抗
争的勇气和执着!它们顽强的生命,实在是悲壮又令人惊叹!还有一种叫百岁兰的植物,它一生只生长两
片叶子,但每一片叶子都可以活到百余年甚至上千年的时间;当然,譬如仙人掌、梭梭、红柳树……无不
让人惊奇和赞颂!
</div>
</body>
</html>
结果如下(示例):
2.2内联样式
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css内联样式的写法</title>
<!-- 内联样式的写法是在head标签中,有一个子标签叫style
在style标签中去写CSS样式去修饰标签
-->
<style>
/* 这个是css里面的注释,和html不一样 */
/* 首先找到被修饰的标签,然后写大括号,在大括号里面写css语法格式 */
div{
width: 6.25rem;
height: 6.25rem;
background-color: darkgoldenrod;
}
/* 修饰p标签 */
p{
width: 18.75rem;
height: 18.75rem;
background-color: gold;
}
/* 修饰span标签 */
span{
/* 专门讲一下颜色表示方式
1.html规定好的颜色的英文单词
2.十六进制的表示形式 0-F
R G B
00 00 00 黑色
FF 00 00 红色
00 FF 00 绿色
00 00 ff 蓝色
十六进制组成了好好的颜色
一般用吸色器把颜色吸出来*/
color:#E1251B;
}
</style>
</head>
<body>
<div>
仰天大笑出门去,我辈岂是蓬蒿人
</div>
<p>离开你一百个星期,我回到了这里,寻找我们爱过的证据,
没有人愿意提起,玫瑰花它的过去,今天这里的主题,我把它叫做回忆
</p>
<div>
</div>
<span>
天生我材必有用,千金散尽还复来。
</span>
</body>
</html>
结果如下(示例):
2.3外联样式
首先在当前html文件所在的文件夹里面创建一个名为test.css的CSS文件
文件内容为:
footer{
width: 12.5rem;
height: 12.5rem;
background-color: tomato;
color: #7FFFD4;
}
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部的css文件
在head头里面写一个link标签,目的是为了引入外部的css文件
属性:
rel:连接文件的类型 样式表
type:css文件类型
href:外部的css所在路径
-->
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<!-- 外联样式
在文件的外部写一个后缀为css的文件
引入到我们的当前页面中
-->
<footer>东风不与周郎便,铜雀春深锁二乔</footer>
</body>
</html>
结果如下(示例):
三、CSS的选择器
目的:为了找到这个被修饰的标签的。
如果连标签都找不到,何谈修饰?好比你买了化妆品,要给你女朋友化妆,。突然想到自己没有女朋友。很扎心。首先找到女朋友,对她进行化妆
1.标签选择器
2.class选择器
3.id选择器
4.层级选择器
5.组合选择器
6.通配选择器
7.伪类选择器
3.1标签选择器
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<!-- 内联样式的写法 -->
<!-- 标签选择器,通过标签的名字获取找到标签的 -->
<style>
/* span就是html标签的名字
对span的内容进行修饰
*/
span{
color: red;
}
div{
color: yellow;
}
footer{
color: blue;
}
</style>
</head>
<body>
<span>蓦然回首,那人却在灯火阑珊处</span>
<div>借问酒家何处有,牧童遥指杏花村</div>
<div></div>
<footer>风萧萧兮易水寒,壮士一去兮不复返</footer>
</body>
</html>
结果如下(示例):
3.2class选择器
每一个标签都有一个class属性
给class起一个属性的名字,咱们可以通过这个=属性值可以找到这个标签
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class选择器
是在标签中写一个class属性
属性值是自己定义的
通过.属性值 在{}中找到当前标签进行修饰
*/
.nb{
color: red;
}
.sb{
color: blue;
}
.qb{
color: #7FFFD4;
}
</style>
</head>
<body>
<!-- 任何一个标签都有class属性
class的属性值可以随便写
class可以写多个值,中间使用空格隔开
例如:
<div class="wwb wabf nb">
<!-- class有三个值:
1.wwb
2.wabf
3.nb
这是我自己定义的三个属性值
-->
<div class="wwb wabf nb">君不见黄河之水天上来,奔流到海不复回</div>
<div class="sb">烹羊宰牛且为乐,会须一饮三百杯</div>
<p class="qb">
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
</p>
</body>
</html>
结果如下(示例):
3.3id选择器
每一个标签都有id属性 class style name属性
给一个标签写一个id属性,然后给一个id值。通过这个id值找到这个标签
#id值{}
【注意】:id值必须是唯一的,class的值可以重复
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
/* id选择器 使用关键字 #id值
id值必须是唯一的
*/
#xkh{
color: gold;
width:12.5rem;
height: 12.5rem;
background-color: aqua;
}
</style>
</head>
<body>
<div id="xkh">落霞与孤鹜齐飞,秋水共长天一色</div>
<div>天生我才必有用,千金散尽还复来</div>
</body>
</html>
结果如下(示例):
3.4组合选择器
要修饰多个标签的时候,而且修饰的样式是一样的,这个时候可以写组合选择器
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style>
/* 要修饰多个标签,而且修饰的样式是一样的,
这个时候可以写组合选择器
*/
/* 组合选择器,用的很多,页面上面很多都是一样的样式
这个时候就可以使用组合选择器。使用逗号隔开
*/
#div1, .span1, p, footer{
color: #f30213;
}
</style>
</head>
<body>
<div id="div1">众里寻他千百度,蓦然回首,那人却在灯火阑珊处</div>
<span class="span1">但使龙城飞将在,不教胡马度阴山</span>
<p>
桃花坞里桃花庵,桃花庵里桃花仙。桃花仙人种桃树,又摘桃花卖酒钱。
酒醒只在花前坐,酒醉还来花下眠。半醒半醉日复日,花落花开年复年。
但愿老死花酒间,不愿鞠躬车马前。车尘马足富者趣,酒盏花枝贫者缘。
若将富贵比贫贱,一在平地一在天。若将贫贱比车马,他得驱驰我得闲。
别人笑我太疯癫,我笑他人看不穿。不见五陵豪杰墓,无花无酒锄作田。
</p>
<footer>呵呵哒</footer>
<header>嘻嘻哒</header>
</body>
</html>
结果如下(示例):
3.5层级选择器
标签是可以嵌套标签的,一层一层的找
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style>
/* 一层一层的往下找
层级选择器是用空格,每一个标签都是有关系的,子标签的关系
*/
/* 我在找标签的时候,为什么不直接找到你呢?而是通过父类的标签找到你
但是语法格式有这样的要求,有存在的意义。
有的时候层级太深,单纯的直接的去找一个标签,是找不到的,
必须通过他的父类的标签,找到他
*/
#div1 .div2 div{
color: red;
}
#div4{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">
<div class="div2">
<div>
仰天大笑出门去,我辈岂是蓬蒿人
</div>
</div>
<div id="div3">
<div id="div4">
磨刀霍霍向猪羊
</div>
</div>
</div>
</body>
</html>
结果如下(示例):
3.6通配选择器
所有的标签都可以生效
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配选择器</title>
<style>
/* 所有的标签都会生效
*代表所有的
以后会用
优先级比较低
*/
#div2{
color: blue;
}
* {
color: red;
/* 开发的时候一般这样来用通配符
设置内边距和外边距为0.目的是让我们整个网页充满整个电脑屏幕的页面
*/
margin: 0;
padding: 0;
}
div{
color: green;
}
.div1{
color: yellow;
}
/*
优先级:id选择器 > class > 标签 > 通配
*/
</style>
</head>
<body>
<div>
我好困啊!!!
</div>
<div class="div1">我想去睡觉</div>
<div id="div2">我去睡觉吧!!!</div>
<span>云想衣裳花想容,春风拂槛露华浓 </span>
</body>
</html>
结果如下(示例):
3.7伪类选择器
伪类选择器和a标签(超链接)有关系
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置链接字体的颜色的
伪类选择器的语法格式比较特殊
几种状态
*/
/* link不能放在最后 */
/*
link:访问之前的状态
*/
a:link{
color: red;
}
/*
visited:访问过后的状态
*/
a:visited{
color: pink;
}
/*
hover:鼠标悬停的一个状态
*/
a:hover{
color: blue;
}
/*
active:鼠标点上去不松手的一个状态
*/
a:active{
color: green;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">去淘宝</a>
</body>
</html>
结果如下(示例):
四、CSS的属性
color:设置字体的颜色
width:设置宽度
height:设置高度的
background-color:设置背景颜色的
4.1背景图片的css属性
background-coclor 背景颜色
background-image 背景图片 会平铺的
background-repeat 平铺的方式
background-attachment 背景图片的动态效果
background-position 图片的位置
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
body{
/*
background-image:url(背景图片的路径):背景图片
会平铺整个页面 网页背景图片
首先找一张图片放在当前项目的文件夹中,后缀名为jpg
*/
background-image: url(1.jpg);
/* 平铺的方式 background-repeat
repeat-x:横向平铺
repeat-y:纵向平铺
no-repeat:不平铺
*/
background-repeat: no-repeat;
/* 图片的位置 background-position
两个值 第一个是x轴的偏移(离左边的距离)
第二个是y轴的偏移(离上面的距离)
*/
background-position: 6.25rem 12.5rem;
/* 图片的动态效果 background-attachment
scroll 图片和文字相对静止
fixed 图片相对文字是动态的
*/
background-attachment:fixed ;
}
</style>
</head>
<body>
<p>
我望着这些灯,灯光带着昏黄色,似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯,它们,似乎只有它们默默地在散布一点点的光和热,
不仅给我,而且还给那些寒夜里不能睡眠的人,和那些这时候还在黑暗中摸索的行路人,
大片的飞雪飘打在我的脸上,我的皮鞋不时陷在泥泞的土路中,风几次要把我摔倒在污泥里,
我似乎走进了一个迷阵,永远找不到出口。但是我始终挺起身子向前迈步,因为我看见了一点豆大的灯光。
灯光,不管是哪个人家的灯光,那可以给行人——甚至像我这样的一个异乡人指路。
我爱这样的灯光,几盏灯甚或一盏灯的微光固然不能照彻黑暗,可是它会给寒夜里一些不眠的人带来一点勇气,一点温暖。
孤寂的海上的灯塔挽救了许多船只的沉没,任何航行的船只都可以得到那灯光的指引。
哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯,虽然不曾唤回那个航海远去的弟弟,可是不少捕鱼归来的邻人都得到了它的帮助。
光驱散了我心灵的黑暗,热促成它的发育。一个朋友说:“我们不是单靠吃米活着的。”
我自然也是如此。我的心常常在黑暗的海上漂浮,要不是得着灯光的指引,它有一天也会永沉海底。
</p>
<p>
我望着这些灯,灯光带着昏黄色,似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯,它们,似乎只有它们默默地在散布一点点的光和热,
不仅给我,而且还给那些寒夜里不能睡眠的人,和那些这时候还在黑暗中摸索的行路人,
大片的飞雪飘打在我的脸上,我的皮鞋不时陷在泥泞的土路中,风几次要把我摔倒在污泥里,
我似乎走进了一个迷阵,永远找不到出口。但是我始终挺起身子向前迈步,因为我看见了一点豆大的灯光。
灯光,不管是哪个人家的灯光,那可以给行人——甚至像我这样的一个异乡人指路。
我爱这样的灯光,几盏灯甚或一盏灯的微光固然不能照彻黑暗,可是它会给寒夜里一些不眠的人带来一点勇气,一点温暖。
孤寂的海上的灯塔挽救了许多船只的沉没,任何航行的船只都可以得到那灯光的指引。
哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯,虽然不曾唤回那个航海远去的弟弟,可是不少捕鱼归来的邻人都得到了它的帮助。
光驱散了我心灵的黑暗,热促成它的发育。一个朋友说:“我们不是单靠吃米活着的。”
我自然也是如此。我的心常常在黑暗的海上漂浮,要不是得着灯光的指引,它有一天也会永沉海底。
</p>
<p>
我望着这些灯,灯光带着昏黄色,似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯,它们,似乎只有它们默默地在散布一点点的光和热,
不仅给我,而且还给那些寒夜里不能睡眠的人,和那些这时候还在黑暗中摸索的行路人,
大片的飞雪飘打在我的脸上,我的皮鞋不时陷在泥泞的土路中,风几次要把我摔倒在污泥里,
我似乎走进了一个迷阵,永远找不到出口。但是我始终挺起身子向前迈步,因为我看见了一点豆大的灯光。
灯光,不管是哪个人家的灯光,那可以给行人——甚至像我这样的一个异乡人指路。
我爱这样的灯光,几盏灯甚或一盏灯的微光固然不能照彻黑暗,可是它会给寒夜里一些不眠的人带来一点勇气,一点温暖。
孤寂的海上的灯塔挽救了许多船只的沉没,任何航行的船只都可以得到那灯光的指引。
哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯,虽然不曾唤回那个航海远去的弟弟,可是不少捕鱼归来的邻人都得到了它的帮助。
光驱散了我心灵的黑暗,热促成它的发育。一个朋友说:“我们不是单靠吃米活着的。”
我自然也是如此。我的心常常在黑暗的海上漂浮,要不是得着灯光的指引,它有一天也会永沉海底。
</p>
<p>
我望着这些灯,灯光带着昏黄色,似乎还在寒气的袭击中微微颤抖。有一两次我以为灯会灭了。
但是一转眼昏黄色的光又在前面亮起来。这些深夜还燃着的灯,它们,似乎只有它们默默地在散布一点点的光和热,
不仅给我,而且还给那些寒夜里不能睡眠的人,和那些这时候还在黑暗中摸索的行路人,
大片的飞雪飘打在我的脸上,我的皮鞋不时陷在泥泞的土路中,风几次要把我摔倒在污泥里,
我似乎走进了一个迷阵,永远找不到出口。但是我始终挺起身子向前迈步,因为我看见了一点豆大的灯光。
灯光,不管是哪个人家的灯光,那可以给行人——甚至像我这样的一个异乡人指路。
我爱这样的灯光,几盏灯甚或一盏灯的微光固然不能照彻黑暗,可是它会给寒夜里一些不眠的人带来一点勇气,一点温暖。
孤寂的海上的灯塔挽救了许多船只的沉没,任何航行的船只都可以得到那灯光的指引。
哈里希岛上的姐姐为着弟弟点在窗前的长夜孤灯,虽然不曾唤回那个航海远去的弟弟,可是不少捕鱼归来的邻人都得到了它的帮助。
光驱散了我心灵的黑暗,热促成它的发育。一个朋友说:“我们不是单靠吃米活着的。”
我自然也是如此。我的心常常在黑暗的海上漂浮,要不是得着灯光的指引,它有一天也会永沉海底。
</p>
</body>
</html>
结果如下(示例):
4.2边框的css属性
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框的css属性</title>
<style>
div{
width: 6.25rem;
height: 6.25rem;
/*
边框的样式 border-style
属性值:solid(实线)等
*/
/* border-style: solid; */
/*
边框的颜色 border-color 各种颜色英文单词或16进制数字
*/
/* border-color: red; */
/*
边框的宽度 boder-width
*/
/* border-width: 0.625rem; */
/*
边框的简写 border:属性值1 属性值2 属性值3
包含了边框的样式 颜色 宽度
一个属性带三个属性值,相当方便
但是规定border-style是必须写的
*/
border: solid 0.625rem #0000FF;
/* 边框是四个边,咱们还可以对单独边进行设置 不用记!! */
/* border-top-style: dashed;
border-left-style: dotted;
border-right-style: double;
border-bottom-style: groove; */
/* 设置边框的圆角 border-radius 圆角的半径 不用记 */
border-radius: 1.25rem;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
结果如下(示例):
4.3文本和字体的css属性
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本和字体的css属性</title>
<style>
#div1{
width: 62.5rem;
height: 18.75rem;
border: 0.625rem solid red;
/* 设置字体的颜色 color */
color: blue;
/* 设置字体的大小 font-size */
/* font-size: 3.125rem; */
/* 设置字体的样式 font-style
normal 正常的字体
italic 斜体
*/
/* font-style: italic; */
/* 设置字体的权重 font-weight 是否加粗*/
/* font-weight: bold; */
/* 规定文本的系列()字体族. font-family 楷体 宋体 微软雅黑*/
/* font-family: 楷体; */
/*
字体简写的写法
font-size和font-family的值是必须写的
*/
font: bold 30px 楷体;
/* 文本线的形状 text-decoration
line-through 中间线
overline 上划线
underline 下划线
none 去除文本线 a标签有下划线 可以使用这去除
*/
text-decoration: underline;
/* 文本的缩进 好多文章 第一句话空两格写 */
/* text-indent: 3.125rem; */
/* 文本的对齐方式 text-align
left right center */
text-align: center;
/* 控制行高 line-height
文本的高度问题
如果想要文本居中对齐,值必须是div的高度
*/
line-height: 300px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="div1">你不醉我不醉马路牙子谁来睡</div>
<a href="http://www.baidu.com">点击跳转到百度</a>
</body>
</html>
结果如下(示例):
4.4盒子模型(内边距和外边距)
内边距:
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内边距</title>
<style>
div{
width: 12.5rem;
height: 12.5rem;
border: 0.1875rem solid skyblue;
background-color: darkred;
/* 开始加内边距 关键字 padding-XXX
一个数据的时候:上下左右都是这个值
两个数据的时候:第一个数据是上下 第二个是左右的内边距
三个数据的时候: 上 左右 下
四个数据的时候: 上 右 下 左(顺时针的)
*/
padding: 2.5rem 5rem 10rem 20rem;
/* 单独去指定某一边的内边距 */
/* padding-left: 1.875rem;
padding-right: 2.5rem;
padding-top: 3.125rem;
padding-bottom: 6.25rem; */
}
</style>
</head>
<body>
<div>若非群玉山头见,会向瑶台月下逢。</div>
</body>
</html>
结果如下(示例):
外边距:
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外边距</title>
<style>
div{
width: 12.5rem;
height: 12.5rem;
border: 0.1875rem solid skyblue;
background-color: darkred;
/* 外边距margin
和内边距一样
*/
margin: 0.625rem 5rem;
/* 外边距用的不多,两个div之间的空间变大一些 */
}
</style>
</head>
<body>
<div>云想衣裳花想容,春风拂槛露华浓。</div>
</body>
</html>
结果如下(示例):
4.5浮动
代码如下(示例1):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
img{
/* 浮动
如果不浮动的话,图片和其他元素就对不齐
*/
float: left;
}
</style>
</head>
<body>
<p><img src="1.jpg" alt="W3School" style="width: 170px;height: 170px;margin-left: 15px;">
在我们这个星球上,每天都要发生许多变化,有人倒霉了;有人走运了;有人在创造历史,历史也在成全或者抛弃某些人。
可是对大多数人来说,生活的变化是缓慢的。也许人生仅仅有那么一两个辉煌瞬间——甚至一生都可能在平淡无奇中度过……不过,
细想过来,每个人的生活同样也是一个世界。即使最平凡的人,也要得为他那个世界的存在而战斗。从这个意义上说,
在这些平凡的世界里,也没有一天是平静的。
一般说来,包工头不喜欢上过学的农村青年。念书人的叫苦精神总是令人怀疑的。但读书的愿望一下了变得如此强烈,使孙少平简直无法控制。
他思谋:能不能找个办法既能读书又不让人发现呢?只有一个途径较为可靠,那就是他晚上能单独睡在一个地方——那个刚盖起的那一层没有窗的楼房里。
来到“新居”以后他点亮蜡烛,就躺在墙角麦秸草上的那一堆破被褥里,马上开始读一本小说。周围一片寂静,人们都已经沉沉地入睡了。
带着凉意的晚风从洞开的窗户中吹进来,摇曳着豆粒般的烛光。
这时天已经微微地亮出了白色。他吹灭蜡烛,出了这个没安门窗的房子。他站在院子里一堆乱七八糟的建筑材料上,
肿胀的眼睛张望着依然在熟睡中的城市,各种建筑物模糊的轮廓隐匿在一片广漠的寂寥之中。他突然感到了一片荒凉的孤独;
他希望天能快些大亮,太阳快快从古塔山后面露出少女般的笑脸;大街上重新挤满了人群……他很想立刻能找到田晓霞,和她说些什么。
总之,他澎湃的心潮一时难以平静下来……
</p>
</body>
</html>
结果如下(示例1):
代码如下(示例2):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动2</title>
<style>
/* 如果没有浮动 上下排列 div是一个块级标签 */
/* 浮动就是把块变成了行进行排列的
div是一个块级标签不可能在一行上面的,但是可以通过浮动让他们在一行上面*/
#div1{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left;
}
#div2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
结果如下(示例2):
清除浮动
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<style>
/* 清除浮动的目的 把行级标签变成块级标签,刚好和浮动相反 */
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h1>不使用 clear</h1>
<div class="div1">div1</div>
<div class="div2">div2 - 请注意,在 HTML 代码中 div2 在 div1 之后。不过,由于 div1 向左浮动,div2 中的文本会流动到 div1 周围。</div>
<br><br>
<h1>使用 clear</h1>
<div class="div3">div3</div>
<div class="div4">div4 - 在此处,clear: left; 把 div4 移动到浮动的 div3 下方。值 "left" 会清除向左浮动的元素。您也可以清除 "right" 和 "both"。</div>
</body>
</html>
结果如下(示例):
4.6定位
①固定定位
②相对定位
③绝对定位
①固定定位
position: fixed
top: 0
left: 0
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style>
div.fixed{
position: fixed;
top: 0;
left: 0;
width: 300px;
border: 6px solid #73AD21;
}
</style>
</head>
<body>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<p>设置 position: fixed; 的元素会相对视口定位,这意味着即使页面滚动也会停留在某个位置:</p>
<div class="fixed">
我是固定的,滑动页面,我也不动
</div>
</body>
</html>
结果如下(示例):
①相对定位
参照物是亲父节点
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
div{
width: 200px;
height: 200px;
}
#div1{
background-color: #008000;
}
#div2{
background-color: yellowgreen;
}
#div2:hover{
/* 相对div1来定位,最近的那个亲父节点 */
position: relative;
background-color: yellow;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div style="background-color: #0000FF;"></div>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
结果如下(示例):
①绝对定位
参照物是body标签
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style>
div{
width: 100px;
height: 100px;
}
/* 和body标签有关系 */
#div1{
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
#div3{
background-color: green;
position: absolute;
top: 10px;
left: 10px;
}
/* div4在div3中
相对于最近的祖先元素进行定位的
*/
#div4{
background-color: red;
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
<div id="div4"></div>
</div>
</body>
</html>
结果如下(示例):
4.7对ul标签进行浮动的效果
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对ul标签添加浮动</title>
<style>
a{
text-decoration: none;
color: red;
font-size: 30px;
}
li{
float: left;
padding-left: 30px;
}
div{
clear: both;
}
</style>
</head>
<body>
<div id="div1">
<ul type="none">
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠卷</a></li>
<li><a href="#">plus会员</a></li>
<li><a href="#">品牌闪购</a></li>
</ul>
<!-- 这个div必须放在下一行,不能在右边放了,要另起一行 -->
<div>今天是个好日子,天气不冷不热</div>
</div>
</body>
</html>
结果如下(示例):
总结
提示:这里对文章进行总结:没有想好总结