2022-02-03 CSS第二天
2022-02-03 本文已影响0人
学习生信的小兔子
emmet语法
CSS的复合选择器
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=o, initial-scale=1.0">
<title>复合选择器之后代选择器</title>
<style>
/* 把ol 里面的小li选出来改为pink */
ol li{
color: pink;
}
ol li a {
color: chartreuse;
}
.nav li a {
color: coral;
}
</style>
</head>
<body>
<ol>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">xixixi</a></li>
</ol>
<ul>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
<li>我是ul 的孩子</li>
</ul>
<ol class="nav">
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li>我是ol 的孩子</li>
<li><a href="#">xixixi</a></li>
<li><a href="#">xixixi</a></li>
<li><a href="#">xixixi</a></li>
<li><a href="#">xixixi</a></li>
</ol>
</body>
</html>
子元素选择器
<!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>子元素选择器</title>
<style>
.nav>a {
color: pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">hahaha</a>
<p>
<a href="#">xixixi</a>
</p>
</div>
</body>
</html>
并集选择器
<!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>并集选择器</title>
<style>
/* 要求1，把熊大熊二改为粉色 */
/* div,p {
color: pink;
} */
/* 要求2，把熊大熊二改为粉色 还有 小猪一家改为粉色 */
div,
p,
.pig li{
color: pink;
}
/* 约定的规范 并集选择器喜欢竖着写 */
/* 一定要注意 最后一个选择器 不需要加逗号 */
</style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
</html>
链接类选择器
<!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>Document</title>
<style>
a {
color: pink;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
<!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>伪类选择器</title>
<style>
/* 未访问的链接 a：link 把没有访问过的链接选出来*/
a:link {
color: #333;
text-decoration: none;
}
/* a:visited 选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/* 选择鼠标经过的那个链接 */
a:hover {
color: skyblue;
}
/* a:active 选择的是我们鼠标正在 */
a:active {
color: green;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
</body>
</html>
focus伪类选择器
<!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>Document</title>
<style>
input:focus{
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
复合选择器总结
CSS 的元素显示模式
块元素
<!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>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>比较霸道，独占一行</div>看看我
</body>
</html>
行内元素
行内块元素
<!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>Document</title>
<style>
input {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
</body>
</html>
元素显示模式总结
显示模式总结
元素显示模式的转换
一个小技巧 单行文字垂直居中的代码
简单小米侧边栏
<!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>简单小米侧边栏</title>
<style>
a{
display: block;
width: 355px;
height: 60px;
background-color: #9d9b9b;
font-size :14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 60px;
}
/* 鼠标经过链接变换背景颜色 */
a:hover{
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
CSS的背景
背景颜色
<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片
<!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>背景图片</title>
<style>
div{
width: 300px;
height: 300px;
background-image: url(./images/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景平铺
<!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>背景图片</title>
<style>
div{
background-color: pink;
width: 300px;
height: 300px;
background-image: url(./images/logo.png);
/* 背景图片不平铺 */
/* background-repeat: no-repeat;
/* 默认情况下 背景是平铺的 */
/* background-repeat: repeat; */
/* 沿着x轴平铺 */
/* background-repeat: repeat-x; */
/* 沿着y轴平铺 */
background-repeat: repeat-y;
/* 页面元素既可以添加背景元素也可以添加背景图片 只不过背景图片会压住背景颜色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片位置
<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
background-image: url(./images/logo.png);
background-repeat: no-repeat;
/* background-repeat 方位名词 */
/* /* background-position: center top; */
/* background-position: right center; */
/* background-position: center right; */
/* 如果是方位名词 right center 和 right center效果是等价的 */
/* 此时 水平一定是考右侧对齐 第二个参数省略y 轴是 垂直居中现实的 */
/* background-position:right; */
/*此时 第一个参数是top y轴 顶部对齐 第二个参数省略x 轴是水平居中显示的 */
background-position:top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
一个小案例
<!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>Document</title>
<style>
h3 {
width: 118px;
height: 40px;
font-size: 14px;
font-weight: 400;
line-height: 40px;
background-image: url(./images/icon.png);
background-repeat: no-repeat;
background-position:left center;
text-indent: 1.5em;
}
</style>
</head>
<body>
<h3>成长守护平台 </h3>
</body>
</html>
混合单位案例
<!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>Document</title>
<style>
body{
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: center 40px;
}
</style>
</head>
<body>
</body>
</html>
背景图像固定
<!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>Document</title>
<style>
body{
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: center 40px;
font-size: 14px;
color: chartreuse;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
<p>hahahaha</p>
</body>
</html>
背景属性复合写法
背景色半透明
<!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>背景色透明</title>
<style>
div {
width: 300px;
height: 300px;
background: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div>成功上岸</div>
</body>
</html>
CSS背景总结
image.png
综合案例
<!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>综合案例</title>
<style>
.nav a{
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 48px;
color: white;
text-decoration: none;
}
.nav .bg1 {
background: url(./images/bg1.png) no-repeat;
}
.nav .bg1:hover{
background-image: url(./images/bg11.png);
}
.nav .bg2 {
background: url(./images/bg2.png) no-repeat;
}
.nav .bg2:hover{
background-image: url(./images/bg22.png);
}
.nav .bg3 {
background: url(./images/bg3.png) no-repeat;
}
.nav .bg3:hover{
background-image: url(./images/bg11.png) ;
}
.nav .bg4 {
background: url(./images/bg4.png) no-repeat;
}
.nav .bg4:hover{
background-image: url(./images/bg22.png);
}
.nav .bg5 {
background: url(./images/bg5.png) no-repeat;
}
.nav .bg5:hover{
background-image: url(./images/bg11.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
