一、a标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>a标签</title>
<style type="text/css">
/*a的伪类按lvha顺序，顺序不能互换，但可只写某一种状态*/
/*访问之前的状态*/
a:link {
color: black;
}
/*访问之后的状态*/
a:visited {
color: green;
}
/*鼠标放上去的时候*/
a:hover {
display: block;
width: 200px;
height: 200px;
background-color: grey;
color: red;
}
/*鼠标长按的状态*/
a:active {
color: blue;
}
a {
/*
underline 下划线
line-through 中划线
overline 上划线
none 没有划线
*/
text-decoration: none;
/*
move 十字架
pointer 手指
*/
cursor: move;
}
</style>
</head>
<body>
<a href="http://www.jd.com/">京东</a>
</body>
</html>
二、隐藏
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>隐藏</title>
<style type="text/css">
.content {
width: 200px;
height: 200px;
background-color: lightgrey;
/*
visible 可见 默认值
hidden 隐藏
scroll 滑动 不管有没有超出都有白条（滚动条）
auto 自动 超出的时候才有白条（滚动条）
*/
overflow: hidden;
}
.hidden {
/*background-color: rgb(255,255,255);*/
/*rgba red green blue 透明度*/
/*background-color: rgba(0,0,0,0);*/
width: 200px;
height: 200px;
/*background-color: blue;*/
/*display: none; 不展示*/
/* opacity 改透明度 0~1 */
/*opacity: 0; */
/*可见性
hidden 不可见
visible 可见
*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="content">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<div class="hidden"></div>
<p>我是div我是div我是div我是div我是div我是div我是div</p>
</body>
</html>
三、浮动
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动</title>
<style type="text/css">
.div1,.div2,.div3,.div4 {
width: 200px;
height: 200px;
}
.div1 {
background-color: blue;
/*float: right;*/
}
.div2 {
background-color: red;
float: left;
}
.div3 {
width: 300px;
height: 300px;
background-color: green;
/*float: left;*/
}
.div4 {
background-color: yellow;
/*float: right;*/
}
/*清除浮动：修复浮动元素的父级检测不到内容而导致高度变为0带来的影响
1、手动给父级高度（不灵活，最次的）
2、给浮动元素的父级
设置overflow:hidden;(简洁常见，但不是真正意义上的清除浮动)
3、给浮动元素的同级添加一个标签，设置这个标签的clear:both;属性
浮动起来的块标签，宽度默认为内容决定image
浮动起来的行标签可以设置宽高、margin-top
*/
.firstdiv {
width: 200px;
height: 200px;
background-color: red;
float: left;
/*margin-top: 50px;*/
}
.seconddiv {
width: 300px;
/*height: 200px;*/
background-color: blue;
color: white;
/*overflow:hidden;*/
}
.clear {
/*left right both*/
clear: both;
/*清除浮动元素的标签本身不能浮动*/
/*float: left;*/
}
.hangji1 {
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.hangji2 {
width: 300px;
height: 300px;
background-color: blue;
/*float: left;*/
}
.hangji3 {
width: 200px;
height: 200px;
background-color: green;
float: left;
margin: 50px;
}
.hangji4 {
width: 200px;
height: 200px;
background-color: yellow;
float: left;
margin-top:200px;
}
</style>
</head>
<body>
<!-- <div class="div1">我是div1</div>
<div class="div2">我是div2</div>
<div class="div3">我是div3</div>
<div class="div4">我是div4</div> -->
<!-- <div class="seconddiv">
<div class="firstdiv"></div>
<div class="clear"></div>
</div> -->
<span class="hangji1">1</span>
<span class="hangji2">2</span>
<span class="hangji3">3</span>
<span class="hangji4">4</span>
<div>1</div>
</body>
</html>
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
