CSS
如何学习
- css是什么
- css怎么用(快速入门)
- css选择器
- 美化页面(文字,阴影,超链接,列表渐变…)
- 盒子模型
- 浮动
- 定位
- 页面动画(特效)
什么是css
Cascading Style Sheet层叠级联样式表
CSS:表现(美化页面)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
发展史
CSS1、0
CSS2、0:DIV(快)+CSS,HTML与CSS结构分离的思想,页面变得更加简单,SEO
CSS2、1:浮动,定位
CSS3、0:圆角边框、阴影、动画…游览器兼容
快速入门
练习格式:
创建文件夹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<!-- style语法:编写每一个css代码时,建议使用分号隔开 选择器{ 语句1; 语句2; 语句3; } -->
</head>
<body>
<h1>今天也要加油哦</h1>
</body>
</html>
h1{
color: crimson;
}
建议使用分开来书写
CSS优势
- 网页结构表现分离,可以实现复用
- 内容与表现分离
- 样式十分丰富
- 建立使用独立于HTML的CSS文件
- 利用SEO,容易被搜索引擎收录
CSS的3种导入样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!-- 内部样式-->
<style> h1{
color: cyan; } </style>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<!--优先级,就近原则-->
<!--行内样式:在标签元素中编写CSS即可-->
<h1 style="color: red">我是一个标题</h1>
</body>
</html>
链接式:
<link rel="stylesheet" href="CSS/style.css">
/*外部样式*/
h1{
color: cornflowerblue;
}
导入式:是CSS2、1特殊的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style> @import url("CSS/style.css"); </style>
</head>
<body>
<h1>我是样式</h1>
</body>
</html>
选择器
基本选择器
标签选择器: 选择标签: 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 标签选择器 -->
<style> h1,h2{
color: crimson; background: coral; border-radius: 10px; } p{
font-size: 100px; } </style>
</head>
<body>
<h1>学java</h1>
<h2>学CSS</h2>
<p>跟着狂神</p>
</body>
</html>
类选择器: class , 选择所有属性一致的标签,跨类名。 .class{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 类选择器: .class{} 好处,可以多个标签归类,选择同一个样式,实现标签的服用 -->
<style> .yt{
color: crimson; background: coral; border-radius: 10px; } .sex{
color: blue; background: yellowgreen; border-radius: 10px; } </style>
</head>
<body>
<h1 class="yt">标题</h1>
<h2 class="sex">标题2</h2>
<p class="yt">woshi1</p>
</body>
</html>
id选择器: id 不能同名, #id{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /* id选择器: #id名字{} 选择器的优先级: id > class > 标签 */ #yt{
color: chocolate; } .style1{
color: #872222; } h1{
color: cyan; } </style>
</head>
<body>
<h1 id="yt">我是</h1>
<h1 class="style1">yt</h1>
<h1 class="style1">来自</h1>
<h1>中国</h1>
</body>
</html>
id选择器 > 类选择器 > 标签选择器
层次选择器
后代选择器: 在选择的元素后面的所以元素
<!-- 后代选择器:在某个元素的所有后代, --> */ body p{
color: coral;
}
子选择器: 选择元素的下一代(就一代)
body>p{
color: coral;
}
相邻兄弟选择器:(下面的那一个兄弟)
.style1 + p{
color: #307b52;
background: chocolate;
}
通用兄弟选择器: 当前选择的向下所所有的兄弟
.style1~p{
color: #307b52;
background: chocolate;
}
<p>学java</p>
<p class="style1">学java</p>
<p>学java</p>
<p>学java</p>
<h1>我是</h1>
<ul>
<li>
<p>学</p>
</li>
<li>
<p>学</p>
</li>
<li>
<p>学</p>
</li>
</ul>
<p>学java</p>
<p>学java</p>
<p>学java</p>
结构伪类选择器
选择第一个
/*选择ul下li的第一个*/
ul li:first-child{
background: chocolate;
}
选择最后一个
/*选择ul下li的最后一个*/
ul li:last-child{
background: cornflowerblue;
}
这个是选择当前p元素的父级元素,选中父级元素的第一个并且是当前元素才生效 (顺序)
/*这个是选择当前p元素的父级元素,选中腹肌元素的第一个并且是当前元素才生效 (顺序)*/
p:nth-child(1){
background: #dca621;
}
选择父元素,下p元素的第一个, (类型)
/*选择父元素,下p元素的第一个, (类型)*/
p:nth-of-type(1){
background: crimson;
}
鼠标移上去会变为下面的设定
/*鼠标移上去会变为下面的设定*/
a:hover{
background: coral;
}
<a href="">点击我</a>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
<li>l4</li>
</ul>
属性选择器
属性选择器(常用)
属性名 [属性名=属性值 (正则表达式)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style> .start a{
float: left; display: block; color: darkgrey; background: cornflowerblue; border-radius: 10px; margin-right: 10px; height: 50px; width: 50px; text-align: center; text-decoration: none; font: bold 20px/50px Arial; } /*属性选择器(常用) 属性名 [属性名=属性值 (正则表达式)] =绝对等于 *=包含 ^=以这个开头 $=以这个结尾 */ /*选择id=first的属性*/ a[id="first"]{
background: chocolate; } /*选择class*=active*/ a[class*="active"]{
background: #237b20; } /*选择以http开头的*/ a[href^="http"]{
background: chocolate; } /*选择以jpg结尾的*/ a[href$=jpg]{
background: cyan; } </style>
</head>
<body class="start">
<a href="http://www.baidu.com" class="link item first" id="first">1</a>
<a href="image/1.jpg" class="Link active">2</a>
<a href="image/2.png" class="Link item ">3</a>
<a href="image/3.png" class="Link item ">4</a>
<a href="image/4.png" class="Link active">5</a>
<a href="image/5.png" class="Link ">6</a>
<a href="image/26.png" class="Link ">7</a>
<a href="image/7.png" class="Link">8</a>
<a href="image/8.png" class="Link">9</a>
<a href="image/9.png" class="Link">10</a>
</body>
</html>
=绝对等于
*=包含
^=以这个开头
$=以这个结尾
美化网页
为什么要美化网页
- 有效的传递网页信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面主题
- 提高用户体验
字体样式
- span标签:重点突出的字,用span套起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> span{
font-size: 30px; color: chocolate; } </style>
</head>
<body>
我是:<span>重点突出这里</span>
</body>
</html>
- font-family ; 字体;
- font-size: 大小;
- font-weight: 粗细:
- font: 斜体 粗细 大小 样式;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style> body{
font-family: 楷体; } h1{
font: oblique bolder 30px 新宋体; } p{
font-size: 15px; font-weight: bold; } </style>
</head>
<body>
<h1>大海;我的随风迁徙的自由(四)</h1>
<p> 那一次回来后,我们有很长一段时间没有去看海。
在没看海和不听琴的日子里,我就又沉湎于我的那些纷杂交错冥想不明的事。
时代是个怎样递变的东西。昨天我还痴狂迷恋的物事,今天就过时得恍如隔世。我们能留住什么,应该留住什么。所有赞美和歌咏爱情的永恒与纯真都那样动人心弦,那为何不让我们世代传承下去?是否也会害怕厌倦和不愿承担自己自相矛盾的盟誓?
人类长得让人沮丧,又短得令人感伤。
</p>
<p>我在一本俗不可耐的网络文学杂志上看到这样一句话——“6500万年前,最后一只死去的恐龙,它心里在想些什么呢?”——时,不禁哈哈大笑。这悲哀的家伙;更悲哀的是,生活了1点6亿年的恐龙竟然不会发明一台掌中电脑来记载自己的毁灭!
不过还好,现在总算还有个人为它叹息,多少也算是安慰。只是这叹息要等六千五百万年之久,未免太长了,所以这家伙还是不幸呀!
所以,活着就是快乐!活着就是最好!</p>
<p>是呀,活着最好。开心最好。还是你最好……
真的,每次看到你,我多疲惫的心都会快乐起来。你每一个蹦跳的声音和眼神,你每一次不经意的动情呈现和显露,我伸手触及和拥搂你的每一寸肌肤的温润和颤栗,都那样深深嵌入我的心底,那样让我热泪盈眶。
是呀,那我还想什么呢。我们把人类的进步交给科学家,把所有的享乐模式交给创造博士,我们只要依照程序提示按动键钮罗盘就可尽情快乐。
为什么不这样呢!
</p>
<p>在雨中看大海,只有你和我。我在你的伞下伟岸地站立着。迷茫的海面飘扬白色的水花;整片天地浑沌着。我们在感受那份大自然的清凉与喧嚣的寂静。
为什么不这样呢?
很多事情一旦结合,就会慢慢习惯,包括侵略、社变、生活和情感。包括你和我。
其实我早知道,我并不适合你。我并不了解你;我对你所说的一切和所写的这一切,都只是我个人单方面的自以为是的浮夸表现和滑稽可笑的无知炫耀。我并不太懂你,就像你不太懂我一样。
就像你的琴声。我已不再厌倦你的琴声,但我还是不懂五音六律,不知和声复调。我知道我不是那个能在你轻扬微抑声中堆积风花雪月情感的人。你的悲伤里不会有我;我走不进你流琴风笛的唏嘘哀怨中,你强把我置于其中只会阻滞你灵台感性的流泄。但是我们却结合了。你不说,我也不说。
坐在长满杂草的山冈上,雪青色的婆绒花星星点点散落四周。转头俯瞰连绵起伏着浪潮的海岸延绵到远方,你在下面的海岸边远远地站着,站成一个小白点,有时又四下窜动。长线般的海水涌上沙滩。眼前是一片茫茫的汪洋,正值春末的草色衬着流云抺过的天蓝,幽远得让人有点迷乱。
在海边,我已习惯和你一同坐着。
</p>
<p>海和爱情是永远歌颂不完的主题。你说。
我说:不,快了!
你侧过头来看着我。
我装作看远处眼睛一动也不动。
社会不过演绎如此轮回。上天太残忍,给了我们求生的本能,让我们不得不一代又一代走同样的路,犯同样的错,挣扎同样的挣扎。
这个年代我们又该怎样挣扎?我们是否应该生活得更有理想和美感?在这个金粉银饰、利欲至上的浮幻年代,我们是否还要矫情自己的成瘾成性,未来是否不再有令人神往憧憬的希望?世界只会越来越炫丽而妖艳而靡废,再推倒重来。那我还有什么可抵触?我的离经背道又能彰显凸现多少个性和意义?
空虚的不是我们这一代,而是未来。</p>
</body>
</html>
文本样式
- 颜色:单词,RGB,RGBA
- 文本对齐方式:text-align:center
- 首行缩进:text-indent:2em;
- 行高:line-height: 30px;
- 装饰:text-decoration: underlinie
- 文本图片水平对齐:vertical-align:middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /* 文本样式: 颜色: 单词, RGB RGBA */ h1{
/*color: #ff3324;*/ /*color: rgb(25, 72, 120);*/ color: rgba(18, 182, 18,0.5); } .first{
text-indent: 2em; } .first2{
/*居中*/ text-align: center; /*行高*/ line-height: 20px; /*高度*/ height: 60px; /* !*上划线*! text-decoration: overline; !*下划线*! text-decoration: underline; !* 中划线*! text-decoration: line-through;*/ } img,span{
vertical-align: middle; } </style>
</head>
<body>
<p>
<img src="image/1.jpg" alt="没有找到">
<span>水平对齐</span>
</p>
<h1>大海;我的随风迁徙的自由(四)</h1>
<p class="first">那一次回来后,我们有很长一段时间没有去看海。
在没看海和不听琴的日子里,我就又沉湎于我的那些纷杂交错冥想不明的事。
时代是个怎样递变的东西。昨天我还痴狂迷恋的物事,今天就过时得恍如隔世。我们能留住什么,应该留住什么。所有赞美和歌咏爱情的永恒与纯真都那样动人心弦,那为何不让我们世代传承下去?是否也会害怕厌倦和不愿承担自己自相矛盾的盟誓?
人类长得让人沮丧,又短得令人感伤。</p>
<p class="first2">我在一本俗不可耐的网络文学杂志上看到这样一句话——“6500万年前,最后一只死去的恐龙,它心里在想些什么呢?”——时,不禁哈哈大笑。这悲哀的家伙;更悲哀的是,生活了1点6亿年的恐龙竟然不会发明一台掌中电脑来记载自己的毁灭!
不过还好,现在总算还有个人为它叹息,多少也算是安慰。只是这叹息要等六千五百万年之久,未免太长了,所以这家伙还是不幸呀!
所以,活着就是快乐!活着就是最好! </p>
</body>
</html>
超链接伪类
- 鼠标悬停状态:a:hover{} (正常情况下只用这个)
- 鼠标按住不放:a:active{}
- 未访问:a:link{}
- 已访问:a:visited{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> a{
text-decoration: none; color: #100a07; } /*鼠标放上去时候的状态(常用)*/ a:hover{
font-size: 60px; color: cornflowerblue; } /* 鼠标按住不放的状态*/ a:active{
color: darkgreen; } /*鼠标未访问的状态*/ a:link{
color: deeppink; } /*鼠标已访问的状态*/ a:visited{
color: #d20f0f; } </style>
</head>
<body>
<p>
<img src="image/1.jpg" alt="没有找到">
</p>
<p>
<a href="" class="first">码出高效:java开发手册</a>
</p>
<p>
<a href="">作者:孤尽老师</a>
</p>
<p>99.9</p>
</body>
</html>
阴影
- text-shadow:颜色 水平 上下 模糊
p{
text-shadow: chocolate 10px 10px 5px;
}
文本练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宝藏</title>
<link rel="stylesheet" href="CSS/style1.css">
</head>
<body>
<div id="nav">
<h1>全部商品分类</h1>
<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: 300px;
background: #908c8c;
}
h1{
color: red;
text-indent: 1em;
background: bisque;
font-weight: bold;
height: 40px;
font-size: 30px;
line-height: 40px;
}
/* list-style:none 去掉 circle空心圆 decimal数字 square正方形 */
ul li{
list-style: none;
}
a{
text-decoration: none;
font-size: 14px;
text-indent: 1em;
color: #100a07;
}
a:hover{
color: #e76d10;
text-decoration: underline;
}
背景及渐变
-
背景
总的:background: chocolate url(“image/2.jpg”) 10px 10px no-repeat;
分开来:- background-image:url(“image/2.jpg”) ; 背景
- background-repeat: repeat-x; 平铺方式
- background-position: 100px 100px; 背景位置
- backgrounf-attachmen:fixed; 背景是否固定,固定了就不会被滚动条拉走
-
渐变
推荐一个调渐变的网站:https://www.grabient.com/
background-color: #85FFBD;
background-image: linear-gradient(302deg, #85FFBD 0%, #FFFB7D 100%)
盒子模型
什么是盒子
- margin:外边距
- padding:内边距
- border:边框
border边框
- 粗细:
- 样式:
- 颜色:
- border: 2px solid blue;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> /*开发中会有默认的外边距和内边距,我们一般初始化为0*/ /**{*/ /* padding: 0px;*/ /* margin: 0px;*/ /*}*/ #box {
border: 1px solid coral; width: 300px; } h1 {
size: 18px; line-height: 30px; margin-top: 0px; margin-bottom: 10px; } form {
background: #33cbbe; } form div:nth-of-type(1) input {
border: 2px solid blue; } form div:nth-of-type(2) input {
border: 2px solid #aa0d4b; margin-left: 16px; } form div:nth-of-type(3) input {
border: 2px solid #a0a0c4; margin-left: 16px; } </style>
</head>
<body>
<div id="box">
<h1>会员登录</h1>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" name="text">
</div>
<div>
<span>密码:</span>
<input type="passwordt" name="pas">
</div>
<div>
<span>邮箱:</span>
<input type="email" name="email">
</div>
</form>
</div>
</body>
</html>
外边距及盒子居中
- 盒子居中:margin:0 auto;
/*盒子居中*/
margin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #box {
border: 1px solid coral; width: 300px; /*盒子居中*/ margin: 0 auto; } h1 {
/*外边距 不包含颜色*/ margin: 0px; /*内边距: 内边距包含颜色*/ padding: 10px; line-height: 30px; background: #33cbbe; } form {
background: #33cbbe; } </style>
</head>
<body>
<div id="box">
<h1>会员登录</h1>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" name="text">
</div>
<div>
<span>密码:</span>
<input type="passwordt" name="pas">
</div>
<div>
<span>邮箱:</span>
<input type="email" name="email">
</div>
</form>
</div>
</body>
</html>
圆角边框
- border-radius : 左上 右上 右下 左下(顺时针)
圆角的=圆圈的半径
<style> /*border-radius : 左上 右上 右下 左下(顺时针) 圆角的=圆圈的半径 */ div{
width: 100px; height: 100px; background: red; border-radius: 50px 50px 50px 50px; } </style>
- 盒子阴影:box-shadow: 水平 上下 模糊程度 颜色;\
div{
width: 300px;
margin: 0 auto;
}
img{
border-radius: 200px;
box-shadow: 10px 10px 300px red;
}
浮动
display
- 块级元素:独占一行
div p h1-h6 列表
- 行内元素:不占一行
span a img
- 行内元素可以被包含在块级元素当中,反之则不能
/* dispaly: inline 变成行内元素 black 变成块级元素 inline-block 是块级元素,但是可以内联在一行*/
div{
width: 100px;
height: 120px;
border: 1px solid red;
display: block;
}
span{
width: 100px;
height: 120px;
border: 1px solid yellowgreen;
display: inline-block;
}
float
div{
margin: 5px;
padding: 5px;
}
.father{
border:1px solid red;
}
.layer1{
border:1px solid #14443e;
display: inline-block;
float: left;
}
.layer2{
border:1px solid #1b078d;
display: inline-block;
float: left;
}
.layer3{
border:1px solid #47af55;
display: inline-block;
float: left;
}
.layer4{
border:1px solid #47af55;
display: inline-block;
font-size: 18px;
line-height: 30px;
float: left;
}
解决塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div{
margin: 5px; padding: 5px; } .father{
border:1px solid red; /*height: 800px;*/ /*overflow: hidden;*/ /*超过的增加滚动条*/ /*overflow: scroll;*/ } .father:after{
content: ""; display: block; clear: both; } .layer1{
border:1px solid #14443e; display: inline-block; float: left; } .layer2{
border:1px solid #1b078d; display: inline-block; float: left; } .layer3{
border:1px solid #47af55; display: inline-block; float: left; } /* clear: right 右侧不允许有浮动 left 左侧不允许有浮动 both 两侧不允许有浮动 none */ .layer4{
border:1px solid #47af55; display: inline-block; font-size: 18px; line-height: 30px; float: left; clear: both; } .layer5{
clear: both; } </style>
</head>
<body>
<div class="father">
<div class="layer1"><img src="image/2.jpg" alt=""></div>
<div class="layer2"><img src="image/3.jpg" alt=""></div>
<div class="layer3"><img src="image/4.jpg" alt=""></div>
<div class="layer4">浮动的元素可以左浮动,也可以由浮动</div>
<!-- <div class="layer5"></div>-->
</div>
</body>
</html>
- clear right 右侧不允许有浮动
- clear left 左侧不允许有浮动
- clear both 两侧不允许有浮动
- clear none
border:1px solid #47af55;
display: inline-block;
font-size: 18px;
line-height: 30px;
float: left;
/*clear: both;*/
解决方案
- 增加父级元素的高度
.father{
border:1px solid red;
height: 800px;
}
- 在父类中增加一个空div子类标签,清除浮动。
<div class="layer5"></div> .layer5{
clear: both;
}
- 在父类中增加overflow: hidden;
超过的增加滚动条
overflow: scroll;
border:1px solid red;
/*height: 800px;*/
/*overflow: hidden;*/
/*超过的增加滚动条*/
overflow: scroll;
- 在父类中添加一个伪类:after{content:‘’ ; diaplay:block; clear:both; }
.father:after{
content: "";
display: block;
clear: both;
}
小结
-
浮动元素后面增加空div,简单,代码中尽量避免空div。
-
设置父元素的高度,简单,元素假设有了固定的高度,就会被限制。
-
overflow,简单,下拉的一些场景避免使用。
-
父类添加一个伪类: after(推荐),写法稍微复杂一点,但是没有副作用,推荐使用!
对比
- display:方向不可以控制
- float:浮动起来的话会脱离标准文档流,所以要解决父类边框崩塌的问题。
定位
相对定位
- 相对定位:position: relative 相对于自己原来的位置进行偏移
相对定位的时候,依然保留原来的位置,原来的位置会保留。
left
top
right
bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div{
margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{
border: 1px solid red; padding: 0; } #lay1{
background: chocolate; border: 1px dashed #0a0808; /* 相对定位:position: relative相对于自己原来的位置进行偏移 相对定位的时候,依然保留原来的位置,原来的位置会保留。 left top right bottom */ position: relative; top: -20px; left:20px; } #lay2{
background: #2ecddc; border: 1px dashed #0a0808; } #lay4{
background: #33cd43; border: 1px dashed #0a0808; position: relative; right: -20px; bottom: -20px; } </style>
</head>
<body>
<div id="father">
<div id="lay1">第一个盒子</div>
<div id="lay2">第二个盒子</div>
<div id="lay4">第三个盒子</div>
</div>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .box{
height: 300px; width: 300px; border: 2px solid red; padding: 5px; } a{
text-decoration: none; display: block; height: 100px; width: 100px; line-height: 100px; font-size: 15px; text-align: center; color: cornsilk; background: #ff24cf; } a:hover{
background: cornflowerblue; } .a2, .a4{
position: relative; top: -100px; left: 200px; } .a5{
position: relative; top: -300px; left: 100px; } </style>
</head>
<body>
<div class="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
</body>
</html>
绝对定位
- position:absolute
- 定位:基于xxx定位,上下左右
没有父级的前提下,相对于浏览器定位
假设父级元素存在定位,我们通常会相对于父级元素进行偏移
在父级元素范围内内移动
- 相对于父级或者游览器定位,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div{
margin: 10px; padding: 5px; font-size: 15px; line-height: 25px; } #father{
border: 1px solid red; padding: 0; position: relative; } #lay1{
background: chocolate; border: 1px dashed #0a0808; position:absolute; top: 20px; right: 20px; } #lay2{
background: #2ecddc; border: 1px dashed #0a0808; } #lay4{
background: #33cd43; border: 1px dashed #0a0808; } </style>
</head>
<body>
<div id="father">
<div id="lay1">第一个盒子</div>
<div id="lay2">第二个盒子</div>
<div id="lay4">第三个盒子</div>
</div>
</body>
</html>
固定定位
- position:fixied
- 就是相对于游览器定位,怎么滚都不会移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> body{
height: 1000px; } div:nth-of-type(1){
height: 50px; width: 50px; /*绝对定位*/ position: absolute; right: 50px; bottom: 50px; background: coral; } div:nth-of-type(2){
height: 50px; width: 50px; /*固定定位*/ position: fixed; right: 25px; bottom: 25px; background: cornflowerblue; } </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index和opcity
图层:
- z-index默认为0,最高无限,只有定位了的才能用,没有定位的不能使用
- opcity透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="image/wd.jpg" alt=""></li>
<li class="tip1">狂神指导课</li>
<li class="tip2"></li>
<li>时间:2021-3-22</li>
</ul>
</div>
</body>
</html>
#content{
padding: 0px;
margin: 0px;
width: 380px;
border: 1px solid red;
font-size: 12px;
line-height: 25px;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
#content ul{
position: relative;
}
.tip1,.tip2{
position: absolute;
top:216px;
height: 25px;
width: 380px;
}
.tip1{
color: cornsilk;
/*z-index: 50;*/
}
.tip2{
background: #11130f;
opacity: 0.5;
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/114422.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...