2_CSS
1. 什么是CSS
1.1 什么是CSS
Cascading Style Sheet 层叠样式表
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
美化网页
字体, 颜色, 边距, 高度, 宽度, 背景图片, 网页定位, 网页浮动...
1.2 发展史
CSS1.0
CSS2.0: DIV (块)+ CSS, HTML与CSS结构分离的思想, 网页变得简单, SEO
CSS2.1: 浮动, 定位
CSS3.0: 圆角, 阴影, 动画... 浏览器兼容性~
CSS优势
- 内容和表现分离
- 网页结构表现统一, 可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO, 容易被搜索引擎收录
1.3 快速入门
style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<!-- 规范 style 可以编写css的代码
语法:
选择器 {
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
建议使用HTML与CSS分离的写法
(1) 在html文件同级目录下新建一个css文件夹用来保存css文件, 在css文件夹下创建style.css文件
h1 {
color: red;
}
(2) 在html文件里通过link标签引入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
1.4 css的三种导入方式
- 行内样式
- 内部样式
- 外部样式
- css三种导入方式的调用优先级: 就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
<!-- 内部样式-->
<style>
h1{
color: blue;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级: 就近原则-->
<!--行内样式: 在标签元素中, 编写一个style属性, 编写样式即可-->
<h1>我是一级标题</h1>
</body>
</html>
拓展: 外部样式两种写法
链接式
<!--链接式-->
<link rel="stylesheet" href="css/style.css">
导入式
<!--导入式-->
<style>
@import "css/style.css";
</style>
两者的区别
- 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
2. 选择器
- 作用: 选择页面上的某一个或者某一类元素
2.1 基本选择器
- 选择器调用优先级: id选择器 > class选择器 > 标签选择器
2.1.1 标签选择器
- 作用范围: 一类标签
- 格式: 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<!--标签选择器, 会选择页面上所有这个标签的元素-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<h1>学Java</h1>
<p>来B站</p>
</body>
</html>
2.1.2 类选择器
- 作用范围: 所有和class属性一致的标签, 跨标签
- 格式: .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!--类选择器的格式 .class的名称{}
好处: 可以多个标签归类, 是同一个class, 可以复用
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="dz1">学Java</h1>
<h1 class="dz2">学Java</h1>
<h1 class="dz1">学Java</h1>
<p class="dz3">来B站</p>
</body>
</html>
2.1.3 id选择器
- 作用范围: 全局唯一
- 格式: id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Id选择器</title>
<!--id选择器 id必须保证全局唯一
格式: #id名称{}
不遵循就近原则
id选择器 > class选择器 > 标签选择器
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="title1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
</body>
</html>
- style.css
h1{
color: blue;
background: burlywood;
border-radius: 24px;
}
p{
font-size: 30px;
color: red;
}
.dz1{
color: yellow;
background: burlywood;
border-radius: 24px;
}
.dz2{
color: red;
background: burlywood;
border-radius: 24px;
}
.dz3{
color: black;
background: burlywood;
border-radius: 24px;
}
#title1{
color: red;
}
2.2 层次选择器
2.2.1 后代选择器
- 作用于某个元素下的所有层级的子元素
body p{
background: blue;
}
2.2.2 子选择器
- 作用于某个元素下所有第一层级的子元素
body > p{
background: salmon;
}
2.2.3 相邻兄弟选择器
- 作用于某个元素下相邻的第一个同级元素
.beside + p{
background: green;
}
2.2.4 通用兄弟选择器
- 作用于某个元素下所有的同级元素
/*通用兄弟选择器: 作用于某个元素后所有的同级元素*/
.beside ~ p{
background: black;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*p{*/
/* background: red;*/
/*}*/
/*后代选择器 作用于某个元素下所有层级的子元素*/
body p{
background: blue;
}
/*子选择器 作用于某个元素下所有第一层级的子元素*/
body > p{
background: salmon;
}
/*相邻兄弟选择器: 作用于某个元素下相邻的第一个同级元素*/
.beside + p{
background: green;
}
/*通用兄弟选择器: 作用于某个元素下所有的同级元素*/
.beside ~ p{
background: black;
}
</style>
</head>
<body>
<p>p0</p>
<p class="beside">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>p7</p>
<p>p8</p>
</body>
</html>
2.3 结构伪类选则器
<body>
<h1>h1</h1>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<a href="">特效</a>
</body>
<!--不使用.class和id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: blue;
}
/*选中p1: 定位到父级元素, 选择下方所有元素中的第二个元素
注意: 此方法的选中规则是按照 父元素下被查找元素在所有元素中的排行位置选取,其上方有其他元素也要算进去
*/
p:nth-child(2){
background: green;
}
/*选中p2: 定位到父级元素, 选择下方和p2同类别元素的第二个元素
注意: 此方法的选中规则是按照 父元素下被查找元素在其同类别元素中排行的位置选取
*/
p:nth-of-type(2){
background: yellow;
}
/*为a链接加鼠标悬浮特效*/
a:hover{
background: red;
}
</style>
2.4 属性选择器
id + class 结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
float: left;
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: white;
text-decoration: none;
margin-right: 20px;
font: bold 20px/50px Arial;
}
/*属性, 属性名 = 属性值(正则)*/
/*找出存在id属性的元素 a[]{}*/
/*a[id]{*/
/* background: yellow;*/
/*}*/
/*找出id=first的元素*/
/*a[id=first]{*/
/* background: yellow;*/
/*}*/
/*找出class属性值中含有links的元素*/
/*a[class*="links item"]{*/
/* background: yellow;*/
/*}*/
/*找出href属性值中以https开头的元素*/
/*a[href^=https]{*/
/* background: yellow;*/
/*}*/
/*找出href属性值中以pdf结尾的元素*/
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="https://www.baidu.com" class="links item active" target="_blank" title="test">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 last">10</a>
</p>
</body>
</html>
折叠
= 绝对等于
*= 包含
^= 以...开头
$= 以...结尾
3. 美化网页元素
3.1 为什么要美化网页
- 有效的传递页面信息
- 页面漂亮才能吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签: 重点要突出的字, 使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
.title1{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span class="title1">Java</span>
</body>
</html>
3.2 字体样式
<!--font-family: 字体格式
font-size: 字体大小
font-weight: 字体粗细 bolder更粗, lighter更细
color: 字体颜色
-->
<style>
body{
font-family: 楷体;
color: red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bolder;
}
</style>
3.3 文本样式
- 颜色
- color rgb rgba
- 文本对齐的方式
- text-align = center; 居中显示
- 首行缩进
- text-indent: 2em;
- 行高
- line-height: 单行文字上下居中 line-height=height 行高=块高
- 装饰
- text-decoration
- 文本图片水平对齐
- vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<!--颜色:
单词 红绿蓝
RGB 0~F
RGBA
text-align: 排版,一般使用center 居中
text-indent: 2em; 段落首行缩进
height: 300px; 块高
line-height: 300px; 行高
行高和块的高度一致, 就可以上下居中
-->
<style>
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3 {
background: #375dff;
height: 300px;
line-height: 300px;
}
/*上划线*/
.l1{
text-decoration: overline;
}
/*中划线*/
.l2{
text-decoration: line-through;
}
/*下划线*/
.l3{
text-decoration: underline;
}
/*超链接去处下划线*/
a{
text-decoration: none;
}
/*<!--图片水平对齐~参照物*/
/* a,b*/
/*-->*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">上划线</p>
<p class="l2">中划线</p>
<p class="l3">下划线</p>
<h1>斗罗大陆</h1>
<p class="p1">
《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。
</p>
<p class="p2">
《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为斗罗大陆最强者的故事。主要角色有唐三、小舞、戴沐白等。
</p>
<p class="p3">
2017年7月12日，《斗罗大陆》获得“2017猫片胡润原创文学IP价值榜”第二十二名。 2020年9月，2019中国网络文学排行榜揭晓，《斗罗大陆》入选IP影响排行榜。
</p>
<p>
<img src="data:images/符号位.png" alt="">
<span>我要和图片水平对齐</span>
</p>
</body>
</html>
3.4 阴影
/*阴影text-shadow: 阴影颜色, 水平偏移, 垂直偏移, 阴影半径*/
#price{
text-shadow: #375dff 10px 10px 2px;
}
3.5 超链接伪类
- 一般只用a:hover{}; 鼠标悬停时相应的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬停时的颜色和字体大小(重点)*/
a:hover{
color: orange;
font-size: 20px;
}
/*鼠标点击未释放时的颜色*/
a:active{
color: green;
}
/*访问后显示的颜色*/
a:visited{
color: #d612be;
}
/*阴影text-shadow: 阴影颜色, 水平偏移, 垂直偏移, 阴影半径*/
#price{
text-shadow: #375dff 10px 10px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="data:images/009.png" alt="">
</a>
<p>
<a href="#">码出高效</a>
</p>
<p>
<a href="#">作者:孤尽</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
3.6 列表
/*ul li*/
/*
list-style:
none: 去掉样式
circle: 空心圆
decimal: 数字
square: 正方形
*/
/*ul{*/
/* background: dimgray;*/
/*}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
3.7 背景
背景颜色
背景图片
<style>
/*默认是全部平铺的*/
div {
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/009.png");
}
/*水平平铺*/
.div1{
background-repeat: repeat-x;
}
/*垂直平铺*/
.div2{
background-repeat: repeat-y;
}
/*不平铺*/
.div3{
background-repeat: no-repeat;
}
</style>
3.7.1 列表与背景综合练习
html
<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> <a href="#">高端</a></li>
<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> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">食品</a> <a href="#">饮料</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a></li>
</ul>
</div>
css
#nav{
width: 240px;
background: dimgray;
}
.title{
font-size: 18px;
font-weight: bolder;
text-indent: 2em;
line-height: 35px;
/*颜色 图片 图片位置 平铺方式*/
background: red url("../images/向下箭头.png") 205px 8px no-repeat;
background-size: 18px 18px;
}
ul li{
height: 40px;
list-style: none;
text-indent: 1em;
background-image: url("../images/向右箭头.png");
background-size: 13px 13px;
background-position: 168px 6px;
background-repeat: no-repeat;
}
a{
color: white;
font-size: 14px;
text-decoration: none;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8 渐变
调试网址: https://www.grabient.com/
background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
4. 盒子模型
4.1 什么是盒子
- margin: 外边距
- padding: 内边距
- border: 边框
4.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
<style>
/*body总有一个默认的外边距margin: 0, 常见操作*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border: 粗细, 样式, 颜色*/
#box{
width: 300px;
border: 1px solid white;
border-top-width: 25px;
border-left-width: 800px;
}
h2{
font-size: 16px;
background-color: brown;
line-height: 30px;
color: white;
}
form{
background: darkgrey;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed red;
}
div:nth-of-type(3) input{
border: 2px dashed blue;
}
</style>
4.3 内外边距
padding和margin用法相同,遵循顺时针原则(上右下左)
<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>
<!--外边距的妙用: 居中 margin: 0 auto;-->
<style>
#box{
width: 240px;
border: 1px solid white;
/*margin里写四个参数代表上右下左(顺时针)
margin里写两个参数代表上 左(值不同)
margin里写一个参数代表上 左(值相同)
*/
margin: 25px 800px;
/*border-top-width: 25px;*/
/*border-left-width: 800px;*/
}
h2{
font-size: 16px;
background-color: brown;
line-height: 30px;
color: white;
}
form{
background: darkgrey;
}
input{
border: 1px solid black;
}
div:nth-of-type(1){
padding: 8px 2px;
}
div:nth-of-type(2){
padding: 8px 2px;
}
div:nth-of-type(3){
padding: 8px 2px;
}
</style>
4.4 圆角边框
4个角
<!--四个参数: 左上 右上 右下 左下 (顺时针方向)
实现圆圈: 圆角border-radius=半径
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50px;
}
</style>
4.5 阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 10px 10px 10px yellow;
}
img{
border-radius: 30px;
box-shadow: 10px 10px 10px yellow;
}
</style>
</head>
<body>
<div></div>
<div style="margin: 0 auto">
<img src="data:images/009.png" alt="">
</div>
</body>
</html>
5. 浮动
5.1 标准文档
块级元素: 独占一行
h1~h6 p div 列表...
行内元素: 不独占一行
span a img strong...
块级元素可以包含行内元素,反之不可
5.2 display
显示
<!--block: 块元素
inline: 行内元素
inline-block: 是块元素,但是可以内联在一行
none: 消失
-->
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: none;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
- 这个也是一种实现行内元素排列的方式, 但是我们多数情况下都用float
5.3 float
左右浮动 float
<div id="father">
<div class="layer01"><img src="data:images/002.png" alt=""></div>
<div class="layer02"><img src="data:images/logo1.png" alt=""></div>
<div class="layer03"><img src="data:images/nav_r_ico.png" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动, 也可以向右浮动
</div>
<div class="clear"></div>
</div>
#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: right;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: right;
}
5.4 父级边框塌陷问题
clear
/*
clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧都不允许有浮动元素
*/
解决方案
- 增加父级元素的高度
- 简单, 但元素假设有了固定的高度, 就会被限制
#father {
border: 1px #000 solid;
height: 800px;
}
- 增加一个空的div标签, 清除浮动
- 简单, 但代码中要尽量避免空div
<div class="clear"></div>
.clear {
clear: both;
margin: 0;
padding: 0;
}
- overflow
- 简单, 但下拉的一些场景避免使用
/*在父级元素中增加一个overflow*/
#father {
border: 1px #000 solid;
overflow: hidden;
}
- 在父类添加一个伪类: after
- 稍微复杂, 但没有副作用 推荐
#father:after {
content: '';
display: block;
clear: both;
}
5.5 对比
- display
- 方向不可以控制
- float
- 浮动起来的话会脱离文档流, 所以要解决父级边框塌陷的问题
6. 定位
6.1 相对定位
- positon: relative
- 相对于原来的位置, 进行指定的偏移, 仍处于标准文档流中
- top: -20px; 向上
- bottom: -20px; 向下
- left: -20px; 向左
- right: -20px; 向右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--相对定位 相对于自己原来的位置进行偏移-->
<style>
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px red solid;
padding: 0;
}
#first {
background: #006600;
border: 1px green dashed;
position: relative;/*相对定位: 上下左右*/
top: -20px;/*向上*/
left: -20px;/*向左*/
}
#second {
background: #375dff;
border: 1px blue dashed;
}
#third {
background: #986b0d;
border: 1px orange dashed;
position: relative;
right: -20px;
bottom: -20px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
折叠
6.1.1 练习题 移动方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
margin: 10px;
padding: 0;
}
#box {
width: 300px;
height: 300px;
padding: 10px;
border: 1px red solid;
}
a {
width: 100px;
height: 100px;
text-decoration: none;
background: pink;
text-align: center;
line-height: 100px;
color: white;
display: block;
}
a:hover {
background: #0000FF;
}
.a2, .a4{
position: relative;
top: -100px;
right: -200px;
}
.a5 {
position: relative;
top: -300px;
right: -100px;
}
</style>
</head>
<body>
<div id="box">
<div>
<a class="a1" href="#">链接1</a>
<a class="a2" href="#">链接2</a>
<a class="a3" href="#">链接3</a>
<a class="a4" href="#">链接4</a>
<a class="a5" href="#">链接5</a>
</div>
</div>
</body>
</html>
折叠
6.2 绝对定位
定位: 基于浏览器或父级元素
- 如父级元素没有定位, 则相对于浏览器定位
- 如父级元素存在定位, 则相对于父级元素定位
- 在父级元素范围内移动
相对于父级或者浏览器的位置, 进行指定的偏移, 不处于标准文档流中, 原来的位置不会被保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<!--绝对定位 -->
<style>
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px red solid;
padding: 0;
position: relative;
}
#first {
background: #006600;
border: 1px green dashed;
position: absolute;/*绝对定位*/
left: 30px;
}
#second {
background: #375dff;
border: 1px blue dashed;
}
#third {
background: #986b0d;
border: 1px orange dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
body {
height: 1000px;
}
div:nth-of-type(1) {/*absolute: 绝对定位 相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) {/*fixed: 固定定位 */
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
6.4 z-index
图层
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="data:images/logo.png" alt=""></li>
<li class="tipText">学习HTML5</li>
<li class="tipBg"></li>
<li>时间: 3021-01-01</li>
<li>地点: 火星</li>
</ul>
</div>
</body>
</html>
opacity: 0.5; /背景透明度/
#content {
padding: 0;
margin: 0;
width: 200px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li {
padding: 0;
margin: 0;
list-style: none;
}
/*父级元素相对定位*/
#content ul {
position: relative;
}
.tipText, .tipBg {
position: absolute;
width: 67px;
height: 25px;
top: 112px;
left: 72px;
}
.tipText {
color: white;
z-index: 999;
}
.tipBg {
background: black;
opacity: 0.5;/*背景透明度*/
}
2_CSS的更多相关文章
- HTM5新手学习的一些日常总结，相互交流和相互学习。
第一天 一.HTML--网页的源码(超文本标签语言) HTML标签 标签式是HTML最基本单位和最重要的组成. 使<和>扩起来 标签都是闭合的(规范) HTML标签属性 是标签的一部分,用 ...
- BOM的节点方法和属性
一.HTML DOM >>>>>>>>>>>>>>>>>>>>具体可以参考W3S ...
随机推荐
- 2022-07-15 第六组 润土 Java03数据结构学习笔记
数据结构: 数组:最基本的数据结构(线性表) 链表:单向链表,双向链表 树:二叉树 图:深度优先遍历.广度优先遍历 查找: 线性查找 折半查找 排序: 冒泡排序* 快速排序 插入排序* 选择排序* 希 ...
- Web || Html_Css_JS
第三阶段课程介绍: web前端 l 数据库 l SpringBoot Web前端-HTML l HTML作用: 负责搭建页面结构和内容 (盖房子) l 学习HTML主要学习的就是有哪些标签 文本相关标 ...
- Trie 树总结
Trie,又经常叫前缀树,字典树等等.它有很多变种,如后缀树,Radix Tree/Trie,PATRICIA tree,以及bitwise版本的crit-bit tree.当然很多名字的意义其实有交 ...
- ZooKeeper3.4.10集群安装配置-Docker
一. 服务器规划 主机 IP 端口 备注 b-mid-24 172.16.0.24 2181, 2888, 3888 2181:对cline端提供服务 3888:选举leader使用 2888:集群内 ...
- ZJOI2016 小星星 题解
我一生之敌是状压 本文发表于 洛谷博客:https://www.luogu.com.cn/blog/LoveMC/solution-p3349 Cnblogs:https://www.cnblogs. ...
- CodeTON Round 2 (Div. 1 + Div. 2, Rated, Prizes!) A-E
比赛链接 A 题解 知识点:思维,模拟. 发现 \(b\) 串第一个字符是 \(1\) 则只能使用 max , \(0\) 则只能使用 min ,随后只需要模拟到 \(a\) 串剩余 \(m\) 个字 ...
- 修改后台传过来的json数据中对象的属性
前言 今天在实习中遇到的一个小问题,后端传过来的一个json数据结构,但是对象中的属性名跟我需要的不一样(因为我是渲染echarts中的数据,属性名要一样) 这是后台传过来的数据: 需求是我需要把属性 ...
- codeforces600E Lomsat gelral【线段树合并/DSU】
第一次AC这道题,是三年前的一个下午,也许晚上也说不定.当时使用的\(DSU\) \(on\) \(tree\)算法,如今已经淡忘,再学习新的算法过程中,却与旧物重逢.生活中充满不可知会的相遇,即使重 ...
- 如何开发一款基于 Vite+Vue3 的在线表格系统（上）
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...
- CSS 选择器（一）：属性选择器
属性选择器的介绍 属性选择器顾名思义就是通过标签的属性来查找标签的选择器.让我们来回忆一下标签的属性是什么?HTML5 的所有标签共同拥有的属性叫作全局属性,除此之外还有标签自己拥有的属性,就叫作私有 ...