html div标签的简单应用

来源：互联网发布：哪个行业的数据最值钱编辑：程序博客网时间：2024/04/29 17:57

div.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/div.css" rel="stylesheet"/> 
<script type="text/javascript" charset="UTF-8">

</script>
</head>
<body>
<div id="totaldiv">
<div class="main">
<ul id="list">

<li>
<span><a href="#">d1</a></li></span>
<li>
<span><a href="#">d2</a></li></span>
<li>
<span></span><a href="#">d3</a></li></span>
<li>
<span><a href="#">d4</a></li></span></ol>
</div>

<div class="c1">
<div id="test1">
<h2>嘿嘿</h2>
</div><div id="test2">
<h1>哼哼</h1>
</div>
<div id="test3">
<h2>嘻嘻</h2>
</div>
<div id="test4">
<a href="#" onclick="return history.back()">返回</a>
</div>
</div>
<div id="foot" >
<h3 align="center">黄鹤楼</h3>
<p>白日依山尽, 黄河入海流
<br>欲穷千里目,更上一层楼。
</p>
</div>
</body>

</html>

div.css
#totaldiv{

width: 800px;
margin: 0px auto;
padding: 10px;
background: #FF0000;
float: left;
clear: both;

}
#d1{
width: 40px;
background: #F2DEDE;
float: left;
clear: both;
padding: 1px;
}
#d2{
width: 40px;
background: #0088BB;
float: left;
clear: both;
padding: 1px;
}
#d3{
width: 40px;
background: #985F0D;
float: left;
clear: both;
padding: 1px;
}
#d4{
width: 40px;
background: #31708F;
float: left;
clear: both;
padding: 1px;
}

a{

text-decoration: none;
overflow: auto;
}

#list{
list-style: none;
float: left;
clear: both;
display:block;

}

//使d1 d2 d3 d4水平显示
.main ul li{
width:48%;
height:350px;
overflow:hidden;
margin-bottom:50px;
display:inline;
}
#test1{
width: 200px;
height: 60px;
padding: 10px;
margin-top: 20px;
background: #FFFF00;
float: left;
clear: both;

}
#test2{
width: 200px;
height: 60px;
padding: 10px;
margin-top: 20px;
background: #F2DEDE;
float: left;
clear: both;

}
.c1{
margin: 0px auto;
padding: 30px;

}
#test3{
width: 200px;
height: 60px;
padding: 10px;
margin-top: 20px;
background: #0088BB;
float: left;
clear: both;

}
#test4{
width: 100px;
padding: 10px;
float: left;
margin-top: 20px;
clear: both;
padding: 28px;
}
h1,h2,h3,h4,h5,h6{
margin: 0px auto;
padding: 30px;
font-family: "微软雅黑";
font-size: larger;

}
#foot{

margin-top: 20px;
font-family: "微软雅黑";
background: #0088BB;
float: left;
margin: 25px;
clear: both;
}

效果如图所示

0 0