元素的隐藏与显示和hover和背景样式
元素的隐藏与显示
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
.wrap{
display: none;
width: 200px;
height: 200px;
background-color: pink;
}
p{
width: 100px;
height: 100px;
background-color: green;
}
.student{
visibility:hidden;
}
.sister{
opacity:0.5;
width: 200px;
height: 200px;
background-color: pink;
}
style>
head>
<body>
<div class="wrap">
<p>孝：。。。。。。p>
div>
<p class="student"> 坤：学好了前端就转行p>
隆：看不见
<div class="sister">
吖：黑魔仙，快现身
div>
孝：O(∩_∩)O哈哈~
body>
html>
hover
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
.father{
width: 200px;
height: 200px;
padding:20px;
background-color: pink;
}
.friend{
width: 100px;
height: 100px;
background-color: #f60;
}
.girl{
width: 200px;
height: 200px;
margin:10px ;
background-color:skyblue;
}
.boy{
width: 200px;
height: 200px;
margin:10px ;
background-color:blue;
}
.so{
height: 50px;
background-color: blue;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
}
.father:hover + p{
background-color: pink;
}
.father:hover + p > span{
background-color:orange;
}
.father:hover + p strong{
color:#fff;
}
style>
head>
<body>
<div class="father">
<div class="friend">害：我怀疑你们在开车
<div class="so">孝div>
div>
div>
<p class="girl">吖
<span class="box">帅：邻居span>
<strong>比好strong>
p>
<p class="boy">白：兄弟p>
body>
html>
背景样式
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
.box{
width: 400px;
height: 400px;
padding:50px;
margin:50px;
color:green;
border:50px dotted red;
background-color: pink;
background-image:url("1.png");
background-repeat: no-repeat;
background-size:300px;
background-origin:border-box;
background-clip:border-box;
}
style>
head>
<body>
<div class="box">
绿油油的
div>
body>
html>
背景关联
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
body{
height: 1200px;
background-image: url("1.png");
background-repeat: no-repeat;
background-attachment:fixed;
style>
head>
<body>
body>
html>
背景的复合样式
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
div{
width: 400px;
height: 12000px;
border:2px solid red;
background: pink url("2.png") no-repeat 50px 50px/300px 300px fixed ;
}
style>
head>
<body>
<div>div>
body>
html>
多张背景图
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
div{
width: 400px;
height:400px;
border:2px solid red;
background:
url("1.png") no-repeat 10px 20px,
pink url("2.png") no-repeat right bottom;
}
style>
head>
<body>
<div>11223div>
body>
html>
