您的位置：首页 > Web前端 > HTML

html div标签的简单应用

2016-07-31 19:58 435 查看

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;

}

效果如图所示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航