float
This commit is contained in:
92
csspress/demo/type.html
Normal file
92
csspress/demo/type.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
.box{
|
||||
margin:20px;
|
||||
cursor: default;
|
||||
}
|
||||
.left{
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
.item{
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
color: #666;
|
||||
text-indent: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:hover{
|
||||
color: #c81623;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.right{
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
float: left;
|
||||
background: gold;
|
||||
}
|
||||
.tag{
|
||||
padding: 5px 20px;
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
.tags{
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.menu{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ads{
|
||||
float: right;
|
||||
margin-right: 40px;
|
||||
margin-top:40px;
|
||||
}
|
||||
.ad{
|
||||
width:60px;
|
||||
height:60px;
|
||||
background: black;
|
||||
border: 1px solid red;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<ul class="left">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<div class="tags">
|
||||
<span class="tag">tag1</span>
|
||||
<span class="tag">tag2</span>
|
||||
<span class="tag">tag3</span>
|
||||
<span class="tag">tag4</span>
|
||||
</div>
|
||||
<ul class="left menu">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="ads">
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user