文章目录
CSS 指层叠样式表 (Cascading Style Sheets),美化页面
CSS入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style> 可以编写CSS代码,每一个声明最好使用 ; 结尾
语法:
选择器{
声明1;
声明2;
声明3;
...
}
-->
<style>
h1{
color: crimson;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
最好把HTML文件和CSS文件分开
CSS的优点:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
CSS的三种导入方式
- 行内样式: 在标签元素中,编写一个style属性,编写样式
- 内部样式:在 标签内,
优先级:就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--2.内部样式:-->
<style>
h1{
color: gold;
}
</style>
<!--3.外部样式:
链接式:
-->
<link rel="stylesheet" href="css/style.css">
<!--3.外部样式:
导入式
-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<!--优先级,就近原则 -->
<!--1.行内样式: 在标签元素中,编写一个style属性,编写样式-->
<h1 style="color: blue">我是标题</h1>
</body>
</html>
/*3.外部样式 使用 <link rel="stylesheet" href="css/style.css"> 引用
href: 指的是css文件的路径
*/
h1{
color: crimson;
}
拓展:外部样式的两种写法
-
链接式
<link rel="stylesheet" href="css/style.css">
-
导入式
<style> @import url("css/style.css"); </style>
选择器(重点)
基本选择器***
- 标签选择器
标签选择器:会选择这个页面上所有的这个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
/*标签选择器:会选择这个页面上所有的这个标签*/
h1{
color: gold; /*字体颜色*/
background: blue; /*背景颜色*/
border-radius: 24px; /*设置四个边角的弧度*/
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>Java</h1>
<h1>Python</h1>
<p>hello</p>
</body>
</html>
- 类选择器
类选择器的格式 .class的名称{}
可以多个标签归类,同一个class,可以复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
/*类选择器的格式 .class的名称{}
优点:可以多个标签归类,同一个class,可以复用
*/
.sgl{
color: gold;
}
.coco{
color: crimson;
}
</style>
</head>
<body>
<h1 class="sgl">标题1</h1>
<h2 class="coco">标题2</h2>
<h3 class="sgl">标题3</h3>
<p class="sgl">p标签</p>
</body>
</html>
- id选择器
id选择器: id必须保证全局唯一!否则就报错 #id的名称{}
优先级:id选择器 > 类选择器 > 标签选择器 不遵循就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
/*id选择器 id必须保证全局唯一!否则就报错
#id的名称{}
优先级:
不遵循就近原则
id选择器 > 类选择器 > 标签选择器
*/
#sgl{
color: crimson;
}
.style1{
color: gold;
}
h1{
color: aqua;
}
</style>
</head>
<body>
<h1 class="style1" id="sgl">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
层次选择器
- 后代选择器
后代:指的是所有后代
body p{
background: gold;
}
- 子选择器
指的是 一代
body>p{
background: antiquewhite;
}
- 相邻兄弟选择器
相邻(向下) 只有一个
.active + p{
background: green;
}
- 通用选择器
当前选中的元素的向下所有的兄弟元素
.active~p{
background: lightslategrey;
}
具体代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #a72d2d;*/
/*}*/
/*后代选择器*/
/*body p{*/
/* background: gold;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: antiquewhite;*/
/*}*/
/*相邻兄弟选择器 相邻(向下) 只有一个*/
/*.active + p{*/
/* background: green;*/
/*}*/
/*通用选择器 当前选中的元素的向下所有的兄弟元素*/
.active~p{
background: lightslategrey;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
伪类:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 不适应类和id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*ul的第最后一个子元素*/
ul li:last-child{
background: #3e23a0;
}
/*选中p1 : 定位到父元素,选择当前的第一个元素
p:nth-child(1) : 选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才可以!!!
*/
p:nth-child(2){ /*有h1标签在前,选择第一个不会生效,因为h1是body标签的第一个子元素了,选择第二个才定位到p1*/
background: gold;
}
/*选中父元素下的p元素的第一个类型*/
p:nth-of-type(2){ /*type表示类型,当前为p类型,所以选择第一个可以生效,对应的就是p元素的第几个了*/
background: #8b411f;
}
/*了解即可*/
/*a:hover{*/
/* background: #b40d50;*/
/*}*/
</style>
</head>
<body>
<!-- <a href="">伪类</a>-->
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
效果:
属性选择器***
id 和 class结合
格式:a[]{}
= 是绝对等于
*= 是包含这个元素
^= 以什么开头的元素
$= 以什么结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{ /*后代选择器 .demo定位到p标签 和 p a{} 一样*/
float: left; /*float 浮动*/
display: block; /*成为块元素*/
height: 50px; /*高度和宽度*/
width: 50px;
border-radius: 10px; /*四个边角的弧度*/
background: #3e23a0;
text-align: center; /*居中对其*/
color: lightslategrey;
text-decoration: none; /*去掉数字下的下划线*/
margin-right: 5px; /*外边距的宽度、*/
font: bold 20px/50px Arial; /*blod粗体 20px字体的大小 50字体在哪个位置*/
}
/*属性名 或者 属性名 = 属性值(正则)
= 是绝对等于
*= 是包含这个元素
^= 以什么开头的元素
$= 以什么结尾
*/
/*存在id属性的元素 a[]{} */
/*a[id]{*/
/* color: gold;*/
/*}*/
/*id=first*/
/*a[id=first]{*/
/* background: #66a71c;*/
/*}*/
/*class 中有links的元素 = 是绝对等于 *= 是包含这个元素*/
/*a[class*="links"]{*/
/* background: #d94019;*/
/*}*/
/*选中href中以http开头的元素 ^= 以什么开头的元素*/
/*a[href^=https]{*/
/* background: gold;*/
/*}*/
/*选中以pdf结尾的 $= 以什么结尾*/
/*a[href$=pdf]{*/
/* background: #14f580;*/
/*}*/
</style>
</head>
<body>
<p class="demo">
<!--以下href都是随意写的,为了测试属性选择器-->
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item">10</a>
</p>
</body>
</html>
美化网页元素
- span标签:重要突出的文字,使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
#title1{
font-size: 50px; /*字体大小*/
}
</style>
</head>
<body>
欢迎学习<span id="title1">CSS</span>
</body>
</html>
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family 字体
color 字体颜色
font-size 字体大小
font-weight 字体的粗细
-->
<style>
body{
font-family:"Arial Black",楷体; /*字体*/
color: #8b411f; /*字体颜色*/
}
h1{
font-size: 50px; /*字体大小*/
}
.p1{
font-weight: bold; /*字体的粗细*/
}
#p2{
font: oblique bolder 12px "斜体" ; /*字体粗细 大小 字体样式*/
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
小鸡带着小兔走了一会儿就出了森林。小兔说:“谢谢你,我来时在河对岸的山坡下藏了一个苹果,你跟我一起去,我请你吃苹果。”
</p>
<p>
“哦,太好了,谢谢你!”小河马高兴地说。
</p>
<p>
In our parents'generation,there are less people who have the eyesight problem
</p>
<p id="p2">
这时,一只小河马游到岸边,说道:“我送你们过河吧!”“太感谢你了!”小兔、小鸡齐声说
</p>
</body>
</html>
文本样式
- 颜色 color
- 文本对齐方式 text-align=center
- 首行缩进 text-indent:2em
- 行高 line-height 单行文字上下居中
- 装饰 text-decoration
- 文本图片水平对齐方式 vertical-align: middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family 字体
color 字体颜色
font-size 字体大小
font-weight 字体的粗细
-->
<style>
h1{
color: green;
text-align: center; /*文本居中center 右right 左left等等*/
}
.p1{
text-indent: 2em; /*首行缩进*/
}
.p3{
background: gold;
height: 300px;
line-height: 300px; /*行高 和 块高 高度一致就可以居中*/
}
.l1{
text-decoration: underline; /*下划线*/
}
.l2{
text-decoration: line-through; /*中划线*/
}
.l3{
text-decoration: overline; /*上划线*/
}
a{
text-decoration: none; /*超链接去下划线*/
}
img,span{
vertical-align: middle; /*使文字在照片右边的中间*/
}
</style>
</head>
<body>
<p class="l1">11111111</p>
<p class="l2">22222222</p>
<p class="l3">33333333</p>
<a href="">44444</a> /*a标签默认右下划线*/
<h1>故事介绍</h1>
<p class="p1">
小鸡带着小兔走了一会儿就出了森林。小兔说:“谢谢你,我来时在河对岸的山坡下藏了一个苹果,你跟我一起去,我请你吃苹果。”
</p>
<p>
“哦,太好了,谢谢你!”小河马高兴地说。
</p>
<p class="p3">
In our parents'generation,there are less people who have the eyesight problem
</p>
<p id="p2">
这时,一只小河马游到岸边,说道:“我送你们过河吧!”“太感谢你了!”小兔、小鸡齐声说
</p>
<p>
<img src="images/2.jpg" alt="">
<span>123456789</span>
</p>
</body>
</html>
阴影
/*text-shadow:阴影的颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: #5b35e5 10px -10px 2px;
}
超链接伪类
a:hover{} 最为常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: #65c222;
font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
color: #f30a0a;
}
/*访问完后的颜色*/
/*a:visited{*/
/* color: gold;*/
/*}*/
/*text-shadow:阴影的颜色,水平偏移,垂直偏移,阴影半径*/
#price{
text-shadow: #5b35e5 10px -10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/3.png" alt="">
</a>
<p>
<a href="#">码出高效: Java开发手册</a>
</p>
<a href="">作者:孤尽老师</a>
<p id="price">¥99</p>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
#nav{
width: 250px;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* 颜色,图片,平铺方式,图片位置*/
background: #f30a0a url("../images/6.png") no-repeat 210px 10px;
}
/*list-style:
none:去掉原点(也可以去掉有序列表的数字)
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/j.png");
background-repeat: no-repeat;
background-position: 150px 0px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
效果图:
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
div{
width: 800px;
height: 500px;
border: 1px solid red;
background-image: url("images/2.jpg"); /*默认是全部平铺的 repeat*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
渐变
网站(直接复制代码即可测试): https://www.grabient.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<!--径向家渐变,原型渐变
网站(直接复制代码即可测试): https://www.grabient.com/
-->
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
小测试:
修改百度的背景颜色 选中百度的body标签,添加渐变代码即可
盒子模型
- margin:外边距
- border:边框
- padding:内边距
边框border
border:粗细,样式(边框线的样式), 颜色;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边框margin:0*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border:粗细,样式(边框线的样式) 颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background: #FFCC70;
line-height: 30px;
margin-top: 0px;
}
form{
background: #65c222;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed midnightblue;
}
div:nth-of-type(3) input{
border: 2px dashed #d70c3b;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
内外边距
内外边距原理一样
margin:4px; 上下左右分别具有4像素
margin:2px 4px; 上下为二像素,左右为4像素
margin:10px 20px 30px 上:10px 左、右:20px 下:30px
margin:1px 2px 3px 4px 上:1px 右:2px 下:3px 左:4px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边框margin:0*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border:粗细,样式(边框线的样式) 颜色*/
/*外边距的用处: 居中元素
margin:0 auto
auto:表示居中对齐
*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background: #FFCC70;
line-height: 30px;
margin-top: 10px;
}
form{
background: #65c222;
}
input{
border: 1px solid red;
}
div:nth-of-type(1){
padding: 0px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="password">
</div>
<div>
<span>邮箱:</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
圆角边框
4个角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*左上 右上 右下 左下 顺时针方向
圆圈: 圆角 = 半径
*/
div{
width: 100px;
height: 100px;
border: 5px solid red;
border-radius: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
阴影
box-shadow: 10px 10px 100px 100px yellow;
box-shadow属性接收一个由5个参数组成的值,每个值的意思如下:
h-shadow: 水平阴影的位置。
v-shadow:垂直阴影的位置。
blur:模糊距离
spread:阴影的尺寸
color:阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
text-align: center; /*居中*/
}
img{
width: 100px;
height: 100px;
border: 1px solid yellow;
border-radius: 90px;
box-shadow: 10px 10px 100px 100px yellow;
}
</style>
</head>
<body>
<div>
<img src="images/2.jpg" alt="">
</div>
</body>
</html>
浮动
块级元素:独占一行
h1~h6 p div 列表...
行内元素:不独占一行
span a img strong em ...
行内元素 可以被包含在 块级元素中,反之,不可以!!
display
- display:
block: 块元素
inline:行内元素
inline-block:是块元素 但是可以内联,在一行
none: 消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*display:
block: 块元素
inline:行内元素
inline-block:是块元素 但是可以内联,在一行
none: 消失
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div标签</div>
<span>span标签</span>
</body>
</html>
float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/2.jpg" alt=""></div>
<div class="layer02"><img src="images/66.jpeg" alt=""></div>
<div class="layer03"><img src="images/661.jpeg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或者另一个浮动盒子为止
</div>
</div>
</body>
</html>
1、左右浮动
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: left;
}
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
效果显示: 上面出现黑色的父级边框问题,在 父级边框塌陷的问题 中解决
解决后的效果: 下面 父级边框塌陷问题 有具体代码添加问题
父级边框塌陷的问题
clear
clear: both; 两侧不允许浮动
clear: right; 右侧不允许浮动
clear: left; 左侧不允许浮动
clear: none;
解决方案:
- 增加父级元素的高度
#father{
border: 1px #000 solid;
height: 300px;
}
- 增加一个空的div标签,清除浮动(需要把父级元素的 height: 300px; 去掉)
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
-
在父级元素添加
overflow: hidden; 隐藏 (常用)
overflow: scroll; 出现滚动条 (一般不用)
#father{
border: 1px #000 solid;
overflow: hidden;
}
- 父类添加一个伪类 :after
#father{
border: 1px #000 solid;
}
#father:after{
content: '';
display: block;
clear: both;
}
练习:QQ会员顶部登录效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ会员</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<!--头部-->
<header class="nav-header">
<div class="header-contain">
<a href="" class="top-logo"><img src="images/66.jpeg" width="100" height="90"></a>
<nav class="top-nav">
<ul>
<li><a href="">功能特权</a></li>
<li><a href="">游戏特权</a></li>
<li><a href="">生活特权</a></li>
<li><a href="">会员活动</a></li>
<li><a href="">成长体系</a></li>
<li><a href="">年费专区</a></li>
<li><a href="">超级会员</a></li>
</ul>
</nav>
<div class="top-right">
<a href="">登录</a>
<a href="">开通超级会员</a>
</div>
</div>
</header>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.nav-header{
height: 90px;
width: 100%;
background: rgba(0,0,0,0.6);
}
.header-contain{
width: 1180px;
height: 90px;
margin: 0 auto;
text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{
height: 90px;
display: inline-block;
vertical-align: top;
}
.top-nav{
margin: 0 48px;
}
.top-nav li{
line-height: 90px;
width: 90px;
}
.top-nav li a{
display: block;
text-align: center;
font-size: 16px;
color: #fff;
}
.top-nav li a:hover{
color: blue;
}
.top-right a{
display: inline-block;
font-size: 16px;
text-align: center;
margin-top: 25px;
border-radius: 35px;
}
.top-right a:first-of-type{
height: 38px;
width: 93px;
line-height: 38px;
color: #fad65c;
border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
color: #986b0d;
background: #fad65c;
}
.top-right a:last-of-type{
width: 140px;
height: 40px;
font-weight: 700;
line-height: 40px;
background: #fad65c;
color: #986b0d;
}
.top-right a:last-of-type:hover{
background: #fddc6c;
}
定位
相对定位 relative
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)
如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
position: relative; /*相对定位 上下左右*/
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相对定位: 相对与自己原来的位置进行偏移*/
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
border: 1px solid #1656c4;
background: #1656c4;
position: relative; /*相对定位 上下左右*/
top: -20px;
left: 20px;
}
#second{
border: 1px solid #3bb873;
background: #3bb873;
}
#third{
border: 1px solid #d2a82a;
background: #d2a82a;
position: relative; /*相对定位 上下左右*/
bottom: -10px;
right: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<a id="f1" href="">链接1</a>
<a id="f2" href="">链接2</a>
<a id="f3" href="">链接3</a>
<a id="f4" href="">链接4</a>
<a id="f5" href="">链接5</a>
</div>
</body>
</html>
#father{
border: 1px solid red;
width: 300px;
height: 300px;
padding: 10px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: #ffa1f2;
line-height: 100px;
text-align: center;
color: white;
display: block;
}
a:hover{
background: #0000FF;
}
#f2{
position: relative;
left: 200px;
bottom: 100px;
}
#f4 {
position: relative;
left: 100px;
bottom: 200px;
}
#f5{
position: relative;
left: 200px;
bottom: 200px;
}
绝对定位和固定定位
- 绝对定位(absolute)
- 绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
- 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
- 固定定位(fixed)
- 将元素放置在浏览器窗口的固定位置,拖拽窗口时元素位置不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /*绝对定位:相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0px;
bottom: 20px;
}
div:nth-of-type(2){/*固定定位: 在那个位置不管怎样就是不动*/
width: 100px;
height: 100px;
background: yellow;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
**注释:**元素可拥有负的 z-index 属性值。
**注释:**Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
图层 z-index: 默认是0,最高无限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/tp.jpg" alt=""></li>
<li class="tipText">以闪亮之名!!!</li>
<li class="tipBg"></li>
<li>时间:2099-05-26</li>
<li>地点:暂不确定</li>
</ul>
</div>
</body>
</html>
#content{
width: 880px;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 20px;
line-height: 25px;
border: 1px black solid;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 126px;
height: 25px;
top: 362px;
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: black;
opacity: 0.5; /*背景透明度*/
filter: alpha(opacity=50); /*最好两个都写上,版本支持可能不一样*/
}