191121CSS
一、CSS
1、css选择器
- css选择器的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">内容</div>
<div class="c1">内容2</div>
</body>
</html>
- id选择器：#1
- class选择器：.c1
- 标签选择器：div
- 层级选择器：.c1 .c2
- 组合选择器：.c1,.c2
- 属性选择器：.c1[type='text']
2、引入css文件
<link rel="stylesheet" href="commons.css">
3、基本样式
- border: 1px solid red;边框
- height: 48px;width: 200px;高和宽
- font-size: 18px;字体大小
- line-height:垂直居中
- text-align:ceter:水平居中
- font-weight:加粗
- color:字体颜色
4、float
块级标签漂起来堆叠
<div style="width: 20%;background-color: red;float: left">左侧</div>
<div style="width: 60%;background-color: yellow;float: right">右侧</div>
5、display
- display: inline;将div转换为span
- display: block;将span转换为div
- display: inline-block;
- display: none; 让标签消失
6、padding margin 内边距和外边距
- margin-top: 10px;外边距
- padding-top: 10px;内边距
7、position属性
<div style="width: 50px;
height: 50px;
background-color: black;
color: white;
position: fixed;bottom: 20px;right: 20px;">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;"></div>
- 顶部标题栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
- relative+absolute 实现相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
<div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
</html>
- 三层
- z-index: 10;数值最大的在上层
- opacity: 0.5;透明度50%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: fixed;
background-color: white;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
"></div>
<div style="position: fixed;background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5;
z-index: 9;
"></div>
<div style="height: 5000px;background-color: green;">内容</div>
</body>
</html>
8、图片的显示
<div style="height: 200px;width: 300px;overflow: hidden"> #混动条
<img src="win.jpg">
</div>
9、鼠标移动到字体变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 44px;
background-color: #2459a2;
line-height: 44px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">小视频</a>
</div>
</div>
<div class="pg-body">
<div class="w">正文</div>
</div>
</body>
</html>
10、背景图片以及图标
- 全写
<div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;
background-position-x: 0;
background-position-y: 2px; /*y轴移动图片*/
"></div>
- 简写
<div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>
11、带图标的登录框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 400px;height: 35px;position: relative;">
<input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>
<span style="background: url(icon_18_118.png) 0 -139px no-repeat;width: 20px;height: 20px;display: inline-block;position: absolute;right: 0;top: 10px;"></span>
</div>
</body>
</html>
