html div标签的简单应用

时间:2021-09-03 14:15:16

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"/> <!--这里是链接到div.css文件-->
    <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>白日依山尽,&nbsp;黄河入海流
<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;
}

效果如图所示


html div标签的简单应用