本文介绍了CSS中的一些常用标签和定位技术，包括display属性用于设置元素显示方式，text-decoration用于文本修饰，list-style去除列表标记，text-align实现元素居中，display与vertical-align实现图片和div的居中，background添加背景图，text-indent实现文本缩进，以及浮动、隐藏、overflow、定位（absolute, relative, fixed, sticky）和z-index的用法。此外，还提及了过渡效果和animate动画插件。"
92983673,7824565,多线程爬虫模板实践,"['爬虫技术', 'Python编程', '网络爬虫', '数据抓取', '多线程']
CSS常用标签，定位
display 属性设置元素如何显示。
text-decoration 属性规定添加到文本的修饰。
list-style属性，设置列表项标记的类型为空，即列表项前无标记。默认列表项标记的类型为实心圆，如果属性值设置为none，则可以去掉列表项标记例如 无序列表。
我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。
div元素水平垂直居中
text-align: center;
我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。
<style>
* {
margin: 0 auto;
padding: 0;
}
div{
margin: 30px;
padding: 0px;
width: 300px;
height: 300px;
border: 1px solid #0000FF;
font-size: 66px;
水平方向居中 */
text-align: center;
/* 内容的行高 */
line-height: 300px;
}
</style>
</head>
<body>
<div>内容</div>
<div> <a href="">连接</a></div>
<div id="box03">选择器</div>
</body>
div图片水平垂直居中
display: table-cell;
vertical-align: middle;
<style>
* {
margin: 0 auto;
padding: 0;
}
div{
margin: 30px;
padding: 0px;
width: 300px;
height: 300px;
border: 1px solid #0000FF;
<--水平方向居中-->
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="box01"><img src="./img/1.png" alt="" width="100px"></div>
</body>
背景图
background: url(./img/1.png) no-repeat;
<title>背景图</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
/* background-image: url(./img/1.png); */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
/* background-repeat: no-repeat; */
/* background-size: 2000px 1000px; */
background: url(./img/1.png) no-repeat;
/* background-size: 100% auto; */
}
</style>
</head>
<body>
</body>
</html>
<--背景图方式2 随浏览器边框大小自适应-->
<script type="text/javascript">
window.addEventListener('resize',function (e) {
let width = window.innerWidth;
let height = window.innerHeight;
window.document.body.style.backgroundSize = width + 'px ' + height + 'px';
});
</script>
文本缩进
text-indent: 2em;
<style>
* {
margin: 0;
padding: 0;
}
div{
margin-left: 100px;
border: 1px solid #00FF00;
}
p{
<！--首行字缩进 设置好宽度，会根据文字内容大小扩充div的高度--！>
width: 200px;
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<p>
行深般若波罗蜜多时， 照见五蕴皆空， 度一切苦厄。 舍利子， 色不异空， 空不异色， 色即是空， 空即是色， 受想行识， 亦复如是。 舍利子， 是诸法空相， 不生不灭， 不垢不净， 不增不减。 是故空中无色，
无受想行识， 无眼耳鼻舌身意， 无色声香味触法， 无眼界， 乃至无意识界。 去第二段 去第三 无无明， 亦无无明尽， 乃至无老死， 亦无老死尽。 无苦集灭道， 无智亦无得。 以无所得故， 菩提萨埵，
依般若波罗蜜多故， 心无罣碍， 无罣碍故， 无有恐怖， 远离颠倒梦想， 究竟涅磐。 三世诸佛，
依般若波罗蜜多故， 得阿耨多罗三藐三菩提。 故知般若波罗蜜多， 是大神咒， 是大明咒， 是无上咒， 是无等等咒， 能除一切苦， 真实不虚。 故说般若波罗蜜多咒，
即说咒曰：揭谛揭谛波罗揭谛波罗僧揭谛菩提萨婆诃。
</p>
</div>
</body>
锚点文本
<style>
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none; /*无修饰无下划线*/
border: 1px solid #0000FF; /* 设置边框*/
display: block; /*显示为块级元素*/
width: 400px; /*盒子宽*/
height: 250px; /*盒子高*/
text-align: center; /*文字水平对齐*/
line-height: 200px; /*设置行高 */
}
</style>
</head>
<body>
<a href="">锚点文本</a>
</body>
图像居中锚点，表格化操作
<style>
* {
margin: 0;
padding: 0;
}
div{
/*作为单元格显示*/
display: table-cell;
width: 300px;
height: 300px;
border: 1px solid #0000FF;
/*我们发现对父级使用text-align:center 水平居中; 会对行级块以及行级元素span有居中的效果。*/
text-align: center;
/*vertical-align 属性设置元素的垂直对齐方式，middle居中 ，只对行内元素有效，对块内元素无效*/
vertical-align: middle;
}
</style>
</head>
<body>
<div><img src="./img/01.png" alt="" width="100px"></div>
</body>
图片 透明度
opacity: 0.3；（0到1之间的小数）
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 400px;
}
#header02 {
/* opacity为ID选择器设置图片02 的透明度，0到1之间的小数 */
opacity: 0.3;
}
body {
background: url(./img/01.png) no-repeat;
background-size: 100%;
}
</style>
</head>
<body>
<img id="header01" src="./img/01.png" alt="">
<img id="header02" src="./img/01.png" alt="">
</body>
浮动（左）
float: left;
清除浮动
clear: both;
<style>
* {
margin: 0;
padding: 0;
}
/* ul{
float: right;
} */
ul>li {
/*“是设置列表项目样式为不使用项目符号,这里指不用无序列表li的黑点。*/
list-style: none;
float: left;
}
ul>li>a {
/*text-decoration 属性规定添加到文本的修饰,none取消链接下划线修饰。*/
text-decoration: none;
/*块状元素*/
display: block;
border: 3px solid #00FF00;
width: 300px;
height: 200px;
/*水平居中*/
text-align: center;
/*行高*/
line-height: 200px;
}
/*清除浮动*/
.clearfix{
clear: both;
}
.nav_spacing{
width: 30px;
height: 200px;
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">全部课程</a></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">项目实战</a></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">阿里云</a></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">书籍</a></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">在线题库</a></li>
</ul>
<!--清除浮动-->
<div class="clearfix"></div>
<img src="./img/3.png" alt="" width="300px">
</body>
隐藏 1
visibility: hidden;
1、visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2.visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
3、在css中visibility属性规定元素是否可见，其中visible为元素可见，hidden为元素不可见
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 600px;
}
#header02 {
/* visibility属性规定元素不可见*/
visibility: hidden;
}
</style>
</head>
<body>
<img id="header02" src="./img/2.png" alt="">
<img id="header03" src="./img/3.png" alt="">
</body>
隐藏 2
display:none
1、display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
2、display: none----将元素的显示设为无，即在网页中不占任何的位置。
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 600px;
}
#header03 {
/* 将元素的显示设为无，即在网页中不占任何的位置。 */
display: none;
}
</style>
</head>
<body>
<img id="header03" src="./img/3.png" alt="">
<img id="header04" src="./img/4.png" alt="">
</body>
overflow :scroll
overflow 属性规定当内容溢出元素框时发生的事情。
<style>
* {
margin: 0;
padding: 0;
}
body{
overflow: hidden;
}
div {
margin: 0 auto;
width: 300px;
height: 300px;
border: 3px solid #00FF00;
overflow: scroll;
/*
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
*/
}
</style>
</head>
<body>
<div>
<p> 行深般若波罗蜜多时</p>
</div>
</body>
绝对定位
position: absolute;
绝对定位 是相对与父容器的位置定位
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
}
#container {
width: 900px;
height: 900px;
border: 3px solid #871192;
/*
position: absolute;
绝对定位 是相对与父容器的位置定位
*/
position: absolute;
left: 150px;
top: 150px;
}
#header02{
/*
position: absolute;
绝对定位 是相对与父容器的位置定位
*/
position: absolute;
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<!--div的定位父类是浏览器的边框 绝对定位-->>
<div id="container">
<!--img图片的定位父类是div边框 绝对定位-->>
<img id="header01" src="./img/03.png" alt="">
<img id="header02" src="./img/04.png" alt="">
</div>
</body>
相对定位
position: relative;
相对定位 是相对自己原来的位置定位
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
}
#container {
width: 900px;
height: 900px;
border: 3px solid #871192;
/*
position: absolute;
绝对定位 是相对与父容器的位置定位
*/
position: absolute;
left: 100px;
top: 100px;
}
#header02{
/*
position: relative;
相对定位 是相对自己原来的位置定位
*/
position: relative;
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<div id="container">
<img id="header01" src="./img/03.png" alt="">
<img id="header02" src="./img/04.png" alt="">
</div>
</body>
固定定位
position: fixed;
元素的位置相对于浏览器窗口是固定位置。
<style>
#header{
/*
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
*/
position: fixed;
right: 150px;
top: 150px;
}
</style>
</head>
<body>
<img id="header" src="./img/1.png" alt="">
<div style="padding-bottom:2000px;color: #FF6060;">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
</div>
</body>
粘性定位
position: sticky;
基于用户的滚动位置来定位。
<style>
#nav{
/*
基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
*/
position: sticky;
top: 100px;
background-color: #00FF00;
font-size: 30px;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<br><br><br><br><br><br><br><br>
<div id="nav">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
重叠元素
z-index: 10;
根据数值的大小判定位置的上下，必须有相对或绝对定位 position: ***，才能发挥作用
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 600px;
}
#container {
width: 900px;
height: 900px;
border: 3px solid #871192;
/*
position: absolute;
绝对定位 是相对与父容器的位置定位
*/
position: absolute;
left: 150px;
top: 150px;
}
#header01 {
/*重叠元素数值小在下 必须有定位*/
z-index: 10;
position: relative;
}
#header02 {
/*重叠元素数值大在上 必须有定位*/
z-index: 20;
position: absolute;
left: 150px;
top: 150px;
}
</style>
</head>
<body>
<div id="container">
<img id="header01" src="./img/01.png" alt="">
<img id="header02" src="./img/02.png" alt="">
</div>
</body>
过渡
transition: 2s;
<style>
* {
margin: 0;
padding: 0;
}
ul>li {
list-style: none;
float: left;
position: relative;
}
ul>li>a {
text-decoration: none;
display: block;
text-align: center;
width: 150px;
height: 50px;
line-height: 50px;
position: relative;
z-index: 10;
}
ul>li>a:hover+img {
/* display: block; */
position: absolute;
left:66px;
top: 33px;
/*过渡速度*/
transition: 2s;
}
img {
width: 100px;
/* display: none; */
position: absolute;
top: -90px;
left: 0px;
z-index: 5;
}
</style>
</head>
<body>
<ul>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">全部课程</a><img src="./img/03.png"></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">项目实战</a><img src="./img/03.png"></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">阿里云</a><img src="./img/03.png"></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">书籍</a><img src="./img/03.png"></li>
<li>
<div class="nav_spacing "></div>
</li>
<li><a href="">在线题库</a><img src="./img/03.png"></li>
</ul>
<div id="" class="clear">
</div>
</body>
animate动画效果插件
提前下载插件，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animate</title>
/*外部连接到，css文件，就可以使用*/
<link rel="stylesheet" href="./新建文本文档.css">
</head>
<body>
<img class="animate__animated animate__zoomIn" src="./img/01.png" alt="">
</body>
</html>
扫一扫
8915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
