一.float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
float: right;
}
.dv02{
/*
1.不占空间
2.left:让出右侧
right:让出左侧
* */
/*float: left;*/
clear: right;
}
</style>
</head>
<body>
<div class="dv01">dv1</div>
<div class="dv02">dv2</div>
<div class="dv03">dv2</div>
</body>
</html>
二.盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
/*padding: 10px 20px 30px 40px;
padding: 10px 10px 10px 20px;*/
padding: 10px;
padding-left: 20px;
background: pink;
}
#dv1{
margin: 50px;
}
</style>
</head>
<body>
<div id="dv1">
内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
</div>
<div id="dv2">
内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
内容内容内容内容内容
</div>
</body>
</html>
三.父子margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*初始化设置*/
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background: pink;
padding: 50px;
}
.sub{
width: 100px;
height: 100px;
background: red;
/*margin: 50px;*/
}
</style>
</head>
<body>
<div class="father">
<div class="sub">
</div>
</div>
</body>
</html>
四.水平垂直居中
设置 top:0; right:0; bottom:0; left:0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper{
width: 300px;
height: 100px;
border: 1px solid gray;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 50px;
background: white;
border-radius: 5px;
box-shadow: 2px 2px 5px gray;
}
#shadow{
position: fixed;
/*
* 定位：top,right,bottom,left
*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(125,125,125,0.3);
display: none;
}
.close{
width: 19px;
height: 19px;
background: url(img/pass_login_icons.png) no-repeat;
background-position: -53px -47px;
position: absolute;
top: 4px;
right: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<!--javascript:void(0);为协议，阻止跳转-->
<a href="javascript:void(0);" onclick="login();">登录</a>
<!--遮罩-->
<div id="shadow">
<div id="wrapper">
<div class="close" onclick="close01();">
</div>
<form action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登录"/></td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
function login(){
document.getElementById("shadow").style.display='block';
};
function close01(){
document.getElementById("shadow").style.display='none';
};
</script>
</html>
五.遮罩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapper{
width: 437px;
height: 500px;
border: 1px solid gray;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0px;
background: white;
border-radius: 5px;
box-shadow: 2px 2px 5px grey;
background: url(img/baidu_login.png) no-repeat;
background-size: contain;
}
#wrapper table{
position: absolute;
top: 126px;
}
#wrapper input{
width: 345px;
height: 30px;
border: none;
outline: none;
};
#shadow{
position: fixed;
/*
* 定位：top,right,bottom,left
*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(125,125,125,0.3);
/*display: none;*/
}
.close{
width: 19px;
height: 19px;
background: url(img/pass_login_icons.png) no-repeat;
background-position: -53px -47px;
position: absolute;
top: 4px;
right: 8px;
cursor: pointer;
}
</style>
</head>
<body>
<!--javascript:void(0);为协议，阻止跳转-->
<a href="javascript:void(0);" onclick="login();">登录</a>
<!--遮罩-->
<div id="shadow">
<div id="wrapper">
<div class="close" onclick="close01();">
</div>
<form action="#" method="get">
<table>
<tr>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr>
<td><input type="submit" value="登录"/></td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
function login(){
document.getElementById("shadow").style.display='block';
};
function close01(){
document.getElementById("shadow").style.display='none';
};
</script>
</html>
六.伪类选择器
（1）a:link（未访问过的链接）
（2） a:hover（鼠标经过，也就是鼠标指针放在该元素上时）
（3）a:active（当前激活链接,也就是点击鼠标左键时）
（4）a:visited（已访问过）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
color: gold;
/*去除下划线*/
text-decoration: none;
}
a:visited{
color: white;
}
/*
1.伪装button
* */
/*悬停*/
a:hover{
color:#808080;
}
a:active{
color: red;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
<a href="#ee">我是超链接</a>
<a href="#bb">我是超链接</a>
<a href="#cc">我是超链接</a>
</body>
</html>
七.层次选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $(“ancestor descendant”) | 选取ancenstor元素中所有descendant（后代）元素，不仅仅是直接子元素 | 集合元素 | $(“div span”)选取
里的所有
元素
|
| $(“parent>child”) | 选取parent元素下的child（子）元素，直接子元素，例如：不包括子元素中的子元素 | 集合元素 | $(“div>span”)选取
元素下名为
的元素
|
| $(“prev+next”) | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个
元素
|
| $(“prev~siblings”) | 选取prev元素之后所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有
同辈与阿奴
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
div包含的所有p
* */
#dv p{
color: red;
}
#dv>p{
background-color: pink;
}
/*
ppp444边框
* */
#dv+p{
border: 1px solid red;
}
/*dv后所有p背景绿色
*/
#dv~p{
background: green;
}
</style>
</head>
<body>
<div id="dv">
<p>ppp11</p>
<p>ppp22</p>
<p>ppp33</p>
<div id="child">
<p>ppp00</p>
<p>ppp00</p>
<p>ppp00</p>
<p>ppp00</p>
</div>
</div>
<p>pppppp4444</p>
<p>pppppp5555</p>
<p>pppppp6666</p>
</body>
</html>
实例：相册选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: relative;
width: 350px;
min-height: 300px;
/*background: whitesmoke;*/
background: black;
}
.container h1{
color: whitesmoke;
}
ul{
list-style: none;
float: right;
margin-right: 20px;
margin-bottom: 100px;
}
.big{
width: 200px;
height: 200px;
border: 1px dashed gray;
border-radius: 5px;
box-shadow: 2px 2px 5px gray;
position: absolute;
top: 50px;
left: 50px;
display: none;
}
/*第一个big*/
.first{
/*z-index: 8888;*/
display: block;
}
.small{
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: 2px 2px 5px pink;
/*透明度*/
opacity: 0.3;
}
.container .small:hover+.big{
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1>我的相册</h1>
<ul>
<li>
<img src="img/xz2.jpg" class="small" />
<img src="img/xz2.jpg" class="big first"/>
</li>
<li>
<img src="img" class="small" />
<img src="img/1565682307258.png" class="big"/>
</li>
<li>
<img src="img/1565682411960.png" class="small" />
<img src="img/1565682411960.png" class="big"/>
</li>
<li>
<img src="img/1565682465491.png" class="small" />
<img src="img/1565682465491.png" class="big"/>
</li>
</ul>
</div>
</body>
</html>
九.伪类nth
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li:first-child{
color: red;
}
ul li:nth-child(1){
background: pink;
}
ul li:nth-last-child(4){
border: 1px solid blue;
}
ul li:first-of-type{
font-size: 30px;
}
/*
奇数
* */
ul li:nth-child(2n-1){
color: yellow;
}
ul li:nth-child(odd){
background-color: gainsboro;
}
ul li:nth-child(2n){
color: blue;
}
ul li:nth-child(even){
background-color: pink;
}
</style>
</head>
<body>
<!--ul>li.li{内容$}*4-->
<ul>
<li class="li">内容1</li>
<li class="li">内容2</li>
<li class="li">内容3</li>
<li class="li">内容4</li>
</ul>
</body>
</html>
实例：各行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
各行变色
单线表格
宽度是父容器的百分百
单元格内容居中
-->
<style type="text/css">
tr:nth-child(2n-1){
color: #DB7093;
background-color: paleturquoise;
}
tr:nth-child(2n){
color: #87CEEB;
background-color: papayawhip;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table width="500px" height="50px" align="center" border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>
2278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
