前端基础之CSS
目录
CSS简介
语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
语法注释
/*注释内容*/
eg:
/*网站大标题*/
/*导航条样式*/
/*登录框样式*/
多种引入css的方式
head内style标签内部直接编写css代码
特点是方便查看
head内link标签引入外部css文件
最常用的方式
标签内部通过style属性直接编写
因将HTML和CSS柔和到一起，增加了耦合度，不推荐使用
CSS查找标签之基本选择器
标签选择器(范围查找)
直接通过标签名查找标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style >h1 {
color: deepskyblue;
}</style>
<body>
<br>
<br>
<br>
<h1 align="center">震惊,某一线城市居然……</h1>
<h1 align="center">好消息，某地出台大动作……</h1>
</body>
</html>
类选择器(范围查找)
通过标签的class属性查找标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style >
.c1 {
color: deepskyblue;
}
.c3 {
color:darkturquoise;
}
</style>
<body>
<br>
<br>
<br>
<h1 align="center" class="c1">震惊,今天某地大雨……</h1>
<h1 align="center" class="c2">好消息，某地出台大动作……</h1>
<P align="center" class="c3">为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。</P>
</body>
</html>
id选择器(精确查找)
通过标签的id属性查找标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style >
#d1 {
color: purple;
}
#d2 {
color:darkgray;
}
</style>
<body>
<br>
<br>
<br>
<h1 align="center" id="d1">震惊,今天某地大雨……</h1>
<h1 align="center" id="d3">好消息，某地出台大动作……</h1>
<P align="center" id="d2">为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。</P>
</body>
</html>
通用选择器
查找所有的标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style >
* {
color: deeppink;
}
</style>
<body>
<br>
<br>
<br>
<h1 align="center" id="d1">震惊,今天某地大雨……</h1>
<h1 align="center" id="d3">好消息，某地出台大动作……</h1>
<P align="center" id="d2">为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。</P>
</body>
</html>
CSS查找标签之组合选择器
儿子选择器
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 > p {
color: yellowgreen;
}
</style>
<body>
<div id="d1">div1
<p>p1
<span>span1</span>
</p>
<p>p2
<span>span3</span>
</p>
</div>
<p>p3</p>
<div>div2
<span>span2</span>
</div>
</body>
</html>
后代选择器
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 span {
color: yellowgreen;
}
</style>
<body>
<div id="d1">div1
<p>p1
<span>span1</span>
</p>
<p>p2
<span>span3</span>
</p>
</div>
<p>p3</p>
<div>div2
<span>span2</span>
</div>
</body>
</html>
毗邻选择器
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 + p {
color: yellowgreen;
}
</style>
<body>
<div id="d1">div1
<p>p1
<span>span1</span>
</p>
<p>p2
<span>span3</span>
</p>
</div>
<p>p3</p>
<div>div2
<span>span2</span>
</div>
</body>
</html>
弟弟选择器
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 ~ div {
color: yellowgreen;
}
</style>
<body>
<div id="d1">div1
<p>p1
<span>span1</span>
</p>
<p>p2
<span>span3</span>
</p>
</div>
<p>p3</p>
<div>div2
<span>span2</span>
</div>
</body>
</html>
属性选择器
方式一:直接通过属性名查找
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
[type] {
color: aqua;
}
</style>
<body>
用户名<input type="text" name="username">
<br>
密码<input type="password" name="pwd">
<br>
出生日期<input type="date" name="date">
<br>
<div>邮箱<input type="email" name="email"></div>
<div></div>
</body>
</html>
方式二:属性名是type并且值是text的标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
[type='password'] {
background-color: darkgrey;
}
</style>
<body>
用户名<input type="text" name="username">
<br>
密码<input type="password" name="pwd">
<br>
出生日期<input type="date" name="date">
<br>
<div>邮箱<input type="email" name="email"></div>
<div></div>
</body>
</html>
方式三:属性名是type并且值是text的div标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
p [type='password'] {
background-color: darkgrey;
}
</style>
<body>
用户名<input type="text" name="username">
<br>
<p>
密码<input type="password" name="pwd">
</p>
<br>
出生日期<input type="date" name="date">
<br>
<div>
邮箱<input type="email" name="email">
</div>
<div></div>
</body>
</html>
分组与嵌套
分组
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
span, div [type] {
background-color: darkgrey;
}
</style>
<body>
用户名<input type="text" name="username">
<br>
<p>
密码<input type="password" name="pwd">
</p>
<br>
出生日期<input type="date" name="date">
<br>
<div>
邮箱<input type="email" name="email">
</div>
<div></div>
<span>span</span>
</body>
</html>
</body>
</html>
嵌套
使用:#d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<style>
.c1, #d1 [type] {
background-color: darkgrey;
}
</style>
<body>
用户名<input type="text" name="username">
<br>
<p id="d2" class="c2">
密码<input type="password" name="pwd">
</p>
<br>
出生日期<input type="date" name="date">
<br>
<div id="d1" class="c1">
邮箱<input type="email" name="email">
</div>
<div></div>
<span>span</span>
</body>
</html>
</body>
</html>
伪类选择器
鼠标悬浮
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
h1:hover {
color: chartreuse;
}
</style>
<body>
<form action="" method="get">
<h1 align="center">注册页面</h1>
<div align="center">
用户名<input type="text" name="username">
</div>
<br>
<div align="center">
密码<input type="password" name="pwd">
</div>
<br>
<div align="center">
确认密码<input type="password" name="confirm_pwd">
</div>
<br>
<div align="center">
出生日期<input type="date" name="date">
</div>
<br>
<div align="center">
邮箱<input type="email" name="email">
</div>
<br>
<div align="center">
<input type="submit" name="注册">
</div>
</form>
</body>
</html>
获取聚点
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
input:focus {
background-color: darkkhaki;
}
</style>
<body>
<form action="" method="get">
<h1 align="center">注册页面</h1>
<div align="center">
用户名<input type="text" name="username">
</div>
<br>
<div align="center">
密码<input type="password" name="pwd">
</div>
<br>
<div align="center">
确认密码<input type="password" name="confirm_pwd">
</div>
<br>
<div align="center">
出生日期<input type="date" name="date">
</div>
<br>
<div align="center">
邮箱<input type="email" name="email">
</div>
<br>
<div align="center">
<input type="submit" name="注册">
</div>
</form>
</body>
</html>
伪元素选择器
通过css操作文本内容
使用场景
- 用于清除浮动带来的负面影响
- 用于网站的内容防爬
修改首个字体样式
p:first-letter {
color: blue;
font-size: 72px;
}
点击查看代码
<style>
div:first-letter {
color: purple;
font-size: 64px;
}
</style>
<body>
<br>
<br>
<br>
<div>
今天又老了三百六十五分之一岁
</div>
</body>
在文本开头添加内容
p:before {
content: '开始';
color: blue;
}
点击查看代码
<style>
div {
text-align: center;
}
</style>
<style>
div:before {
color: cornflowerblue;
content: '思考：';
font-size: 32px;
}
</style>
<body>
<br>
<br>
<br>
<div>
今天自己做了什么有意义的事
</div>
</body>
在文本结尾添加内容
p:after {
content: '结尾';
color: green;
}
点击查看代码
<style>
div {
text-align: center;
}
</style>
<style>
div:after {
color: cornflowerblue;
content: '^o^';
font-size: 28px;
}
</style>
<body>
<br>
<br>
<br>
<div>
今天有没有对明天的规划
</div>
</body>
选择器优先级
相同选择器
就近原则:离标签越近的选择器优先级越高
点击查看代码
<style>
div {
color: red;
text-align: center;
}
div {
color: green;
text-align: center;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
相同选择器距离近的优先级高
</div>
</body>
不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
点击查看代码
<style>
#d1 {
color: red;
text-align: center;
}
.c1 {
color: blue;
text-align: center;
}
div {
color: green;
text-align: center;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
<p >不同选择器共存时，标签选择器优先级最低</p>
</div>
<div>
<p class="c1">不同选择器共存时，类选择器优先级第三高</p>
</div>
<div>
<p id="d1" class="c1">不同选择器共存时，id选择器优先级第二高</p>
</div>
<div>
<p align="right">不同选择器共存时，行内选择器优先级高</p>
</div>
</body>
css修改字体属性
文字字体
使用方法：font-family: 华文行楷
文字字体实际使用
<style>
body {
font-family: 华文行楷;
text-align: center;
font-size: 36px;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
这是一个行楷字体
</div>
</body>
字体大小
使用方法：font-size: 24px
字体大小实际使用
<style>
body {
font-family: 方正兰亭超细黑简体;
text-align: center;
font-size: 32px;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
这是方正兰亭超细黑简体
</div>
</body>
字体粗细
使用方法：font-weight: lighter\bolder
字体粗细实际使用
<style>
div {
font-weight: bolder;
text-align: center;
font-size: 42px;
}
p {
font-weight: lighter;
text-align: center;
font-size: 42px;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
这是超级加粗字体
</div>
<p>
这是变浅字体
</p>
</body>
字体颜色
以绿色举例
方式1
颜色单词：color: green;
点击查看代码
<style>
div {
text-align: center;
font-size: 24px;
color: green;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
这是草原色
</div>
</body>
方式2
三基色：color: rgb(0, 128, 0);
点击查看代码
<style>
div {
text-align: center;
font-size: 24px;
color: rgb(0,128,0);
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
这是草原色
</div>
</body>
方式3
颜色编号：color: #4f4f4f;
点击查看代码
<style>
div {
text-align: center;
font-size: 24px;
color:#008000FF;
}
</style>
<body>
<br>
<br>
<br>
<br>
<div>
还是草原色
</div>
</body>
css修改文字属性
文字对齐
text-align:center/left/right
分别对应居中，左对齐，右对齐
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 {
text-align: center;
}
#d2 {
text-align: left;
}
#d3 {
text-align: right;
}
</style>
<body>
<br><br><br><br>
<div id="d1">居中</div>
<div id="d2">左对齐</div>
<div id="d3">右对齐</div>
</body>
</html>
文字装饰
a标签默认带下划线,并且有颜色。没有点击过是蓝色,点击过是紫色。
text-decoration: none; 去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
text-align: center;
}
#d1 {
text-decoration: none;
}
#d2 {
text-decoration: line-through;
}
#d3 {
text-decoration: overline;
}
#d4 {
text-decoration: underline;
}
</style>
<body>
<br><br><br><br>
<a id="d1" href="">武动乾坤</a>  
<a id="d2" href="">斗破苍穹</a>  
<a id="d3" href="">遮天</a>  
<a id="d4" href="">神墓</a>  
</body>
</html>
首行缩进
text-indent: 24px;即是首行缩进24px
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
text-indent: 48px;
font-size: 24px;
}
.c1 {
text-indent: 24px;
}
</style>
<body>
<br><br><br><br>
<div>首行缩进</div>
<div>首行缩进</div>
<div class="c1">首行缩进</div>
<div class="c1">首行缩进</div>
</body>
</html>
css修改背景属性
背景颜色
background-color: red;
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
text-align: center;
font-size: 32px;
}
#d1 {
background-color: purple;
}
#d2 {
background-color: red;
}
#d3 {
background-color: yellow;
}
</style>
<body>
<br><br><br><br>
<span id="d1">背景颜色1</span>
<span id="d2">背景颜色2</span>
<span id="d3">背景颜色3</span>
</body>
</html>
背景图片
background-image:url("图片");
提示：背景图片如果没有设置的区域大,那么默认自动填充满
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 400px;
width: 400px;
border-radius: 50%;
background-repeat: no-repeat;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx29%2F0815100211164835.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653566416&t=ea1459598f340c44721d8bee3048ecf2");
}
p {
height: 500px;
width: 500px;
}
</style>
<body>
<br><br><br><br>
<div></div>
<p></p>
</body>
</html>
background-position:left top; 图片位置
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
span {
display: block;
height: 400px;
width: 400px;
border-radius: 50%;
background-position: top;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx29%2F0815100211164835.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653566416&t=ea1459598f340c44721d8bee3048ecf2");
}
p {
height: 500px;
width: 500px;
}
</style>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span></span>
<p></p>
</body>
</html>
background-attachment: fixed; 背景附着
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
span {
display: block;
height: 400px;
width: 400px;
border-radius: 50%;
background-attachment: fixed;
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx29%2F0815100211164835.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653566416&t=ea1459598f340c44721d8bee3048ecf2");
}
p {
height: 500px;
width: 500px;
}
</style>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span></span>
<p></p>
</body>
</html>
css修改边框属性
自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 10px;
border-left/top/right/bottom-style: solid;
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 8px;
width: 256px;
border-top-color: red;
border-top-width: 5px;
border-top-style: solid;
border-bottom-color: yellow;
border-bottom-width: 5px;
border-bottom-style: solid;
border-left-color: gold;
border-left-width: 5px;
border-left-style: solid;
border-right-color: green;
border-right-width: 5px;
border-right-style: solid;
}
</style>
<body>
<br><br><br><br><br><br><br><br>
<div></div>
</body>
</html>
统一调整每个边的边框
border: 5px solid black;顺序没有要求
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 8px;
width: 256px;
border: 5px gray dotted;
}
</style>
<body>
<br><br><br><br><br><br><br><br>
<div></div>
</body>
</html>
画圆
border-radius: 50%
提示：长宽一样就是圆，不一样就是椭圆
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 256px;
width: 256px;
border-radius: 50%;
background-color: deeppink;
}
</style>
<body>
<br><br><br><br><br><br><br><br>
<div></div>
</body>
</html>
css修改dispaly属性
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签，页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签，注意：位置会保留
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1 {
background-color: gray;
display: inline;
}
div {
background-color: red;
}
#d3 {
background-color: blue;
display: block;
}
span {
background-color: silver;
}
p {
background-color: aquamarine;
display: none;
}
#d5 {
display: none;
}
#d6 {
visibility: hidden;
}
</style>
<body>
<br><br><br><br><br><br>
<div id="d1">块级标签</div>
<div id="d2">块级标签</div>
<span id="d3">行内标签</span>
<span id="d4">行内标签</span>
<p>隐藏标签一</p>
<a id="d5" href="">隐藏a标签一</a><br>
<a id="d6" href="">隐藏a标签二</a><br>
<a id="d7" href="">普通a标签</a>
</body>
</html>
盒子模型
盒子模型可以将标签看成是一个个小箱子
"""
小箱子组成部分 盒子模型
内部物品 content(内容)
内部物品与箱子内部的距离 padding(内边距、内填充)
箱子的厚度 border（边框）
箱子与箱子之间的距离 margin(外边距)
提示：两个标签之间的距离，有些情况既可用margin也可以用padding
"""
body标签默认自带8px的margin值
编写页面前一般会去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
</style>
<body>
</body>
</html>
margin: 1px 2px 3px 4px 上 右 下 左(顺时针方向)
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin: 10px 20px 30px 40px;
}
</style>
<body>
</body>
</html>
margin: 1px 2px 3px 上 左右 下
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin: 10px 20px 30px;
}
</style>
<body>
</body>
</html>
margin: 1px 2px 上下 左右
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin: 10px 20px;
}
</style>
<body>
</body>
</html>
margin: 1px 统一设置一个值
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin: 10px;
}
</style>
<body>
</body>
</html>
padding用法
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
margin: 0;
padding: 10px 20px 30px 40px;
}
</style>
<body>
</body>
</html>
浮动
浮动的作用
float: left/right;
浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示，全部飘在空中
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height：200px;
background-color: deeppink;
}
.c1 {
float: right;
}
</style>
<body>
<br><br><br><br><br><br>
<div>
<div class="c1">浮动</div>
<div class="c1">浮动</div>
<div class="c1">浮动</div>
<div class="c1">浮动</div>
</div>
</body>
</html>
浮动的影响
浮动会造成父标签塌陷
解决浮动的影响
推导流程
- 直接写div然后写对应的长宽
- 写div然后添加clear属性，避免去查找长宽
- 万能公式
.clearfix:after {
content: '';
clear: both;
display: block;
}
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 100px;
background-color: deeppink;
}
#d1 #d2 {
float: right;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
<body>
<br><br><br><br><br><br>
<div>
<div id="d1" class="clearfix">浮动</div>
<div id="d2" class="clearfix">浮动</div>
</div>
</body>
</html>
溢出属性
文本内容超出了标签的最大范围
overflow: hidden; 隐藏文本内容
overflow: auto\scroll; 可滚动条查看
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 30px;
width: 60px;
background-color: darkturquoise;
font-size: 20px;
overflow: auto;
margin: 0 auto;
}
</style>
<body>
<br><br><br><br>
<div>北京上海广州深圳</div>
</body>
</html>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 50px;
width: 60px;
background-color: darkturquoise;
font-size: 20px;
overflow: scroll;
margin: 0 auto;
}
</style>
<body>
<br><br><br><br>
<div>北京上海广州深圳</div>
</body>
</html>
溢出实际案例
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
height: 200px;
width: 200px;
background-color: purple;
overflow: hidden;
margin: 0 auto;
border-radius: 50%;
}
div img {
width: 100%;
}
</style>
<body>
<br><br><br><br>
<div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-c37c25b526a64f5b44a50936a98a2957_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653651833&t=f05886dc200d459ca0955711c1c02a51" alt=""></div>
</body>
</html>
定位属性
定位的状态
- 静态定位 static
所有的标签默认都是静态定位，即不能通过定位操作改变位置 - 相对定位 relative
相对于标签原来的位置做定位 - 绝对定位 absolute
相对于已经定位过的父标签做定位 - 固定定位 fixed
相对于浏览器窗口做定位
点击查看相对定位代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1 {
height: 64px;
width: 128px;
background-color: purple;
position: relative;
left: 128px;
}
</style>
<body>
<br><br><br><br>
<div class="c1">定位</div>
</body>
</html>
点击绝对定位查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1 {
height: 64px;
width: 128px;
background-color: purple;
position: absolute;
left: 128px;
}
.c2 {
height: 64px;
width: 128px;
background-color: purple;
position: absolute;
left: 128px;
}
</style>
<body>
<br><br><br><br>
<div class="c1"><span class="c2">定位</span></div>
</body>
</html>
点击查看固定定位代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1 {
height: 28px;
width: 128px;
background-color: red;
position: fixed;
border: darkred 8px solid;
right: 64px;
bottom: 128px;
}
</style>
<body>
<div style="height: 888px;background-color: purple"></div>
<div style="height: 888px;background-color: chartreuse"></div>
<div style="height: 888px;background-color: cornsilk"></div>
<div style="height: 888px;background-color: silver"></div>
<div class="c1" style="text-align: center">固定</div>
</body>
</html>
定位操作
position：left\right\top\bottom
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1 {
height: 28px;
width: 128px;
background-color: dodgerblue;
position: fixed;
border: deeppink 2px solid;
right: 64px;
bottom: 128px;
border-radius: 50%;
}
</style>
<body>
<div style="height: 888px;background-color: purple"></div>
<div style="height: 888px;background-color: chartreuse"></div>
<div style="height: 888px;background-color: cornsilk"></div>
<div style="height: 888px;background-color: silver"></div>
<div class="c1" style="text-align: center">点击登陆</div>
</body>
</html>
z-index属性
动态弹出的分层界面称之为模态框
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.background {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 128, 0.5);
z-index: 10;
}
.cover {
height: 200px;
width: 400px;
background-color: dodgerblue;
z-index: 15;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
}
</style>
<body>
<div class="background"></div>
<div class="cover" style="text-align: center">
<form action="" method="get">
<p>username:<input type="text" name="username"></p>
<p>password:<input type="text" name="pwd"></p>
<p>conf_pwd:<input type="text" name="confirm_pwd"></p>
<input type="submit" name="注册">
</form>
</div>
</body>
</html>
自定义博客页面
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="mycss.css">
<body>
<div class="blog_left">
<div class="blog_avatar">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F14%2F20180414093004_ngdoz.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653664646&t=6c1b6de3c8d9e419994e2fda4edd64b6" alt="">
</div>
<div class="blog_title">long_live的博客</div>
<div class="blog_desc">熟练各种编程语言</div>
<div class="blog_link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">qq</a></li>
<li><a href="">贴吧</a></li>
</ul>
</div>
<div class="blog_label">
<ul>
<li><a href="">#python</a></li>
<li><a href="">#java</a></li>
<li><a href="">#golang</a></li>
</ul>
</div>
<div></div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
<div class="blog_right">
<div class="blog_article">
<div class="article_title">
<span class="title">前端基础</span>
<span class="data">20220427</span>
</div>
<div class="article_content">html的全称是超文本标记语言</div>
<div class="article_label">
<a href="">#html</a>
<a href="">#css</a>
<a href="">#javascipt</a>
</div>
</div>
</div>
</body>
</html>
点击查看css代码
/*公共样式*/
body {
margin: 0;
background-color: antiquewhite;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
/*左侧样式*/
.blog_left {
background-color: gray;
float: left;
height: 100%;
width: 20%;
position: fixed;
left: 0;
top: 0;
}
.blog_avatar {
height: 180px;
width: 180px;
border-radius: 50%;
margin: 20px auto;
border: dodgerblue 2px solid;
overflow: hidden;
}
.blog_avatar img {
width: 100%;
}
.blog_title {
text-align: center;
font-size: 24px;
}
.blog_desc {
text-align: center;
font-size: 24px;
}
.blog_link {
padding-left: 64px;
padding-top: 48px;
}
.blog_label {
padding-top: 48px;
padding-left: 64px;
}
/*右侧样式*/
.blog_right {
float: right;
height: 100%;
width: 80%;
}
.blog_article {
background-color: white;
margin: 20px 50px 20px 10px ;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.article_title .title {
float: left;
font-size: 36px;
}
.article_title .data {
float: right;
font-size: 24px;
font-weight: lighter;
padding-top: 12px;
padding-right: 12px;
}
.article_content {
padding-top: 64px;
padding-bottom: 24px;
font-weight: lighter;
font-size: 24px;
text-indent: 18px;
border-bottom: 1px solid black;
}
.article_label {
font-size: 18px;
padding-top: 12px;
padding-left: 12px;
padding-bottom: 12px;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？