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

div元素及其属性布局页面

2017-10-27 00:54 363 查看

为了页面内容仅以图片来展示简洁的页面，所以我从华为官网截了一个图放到div中（div是html的块元素，能起到自动换行效果），嵌套的div，内部用了浮动属性float，float可以设置left、right，后面的div就要清除浮动，用到clear属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div元素及其浮动属性布局页面</title>
<style>
#id3{
background: url(华为长图.jpg);
width: 90%;
height: 500px;
clear: left;
}
.cl1{
float: left;
background-color: #008080;
height: 60px;
width: 100%;
}
#id1{
width:50%;

}
#id2{
width: 50%;
}
#id4{
background-color: #708090;
clear: left;
height: 40px;

}
</style>
</head>
<body>
<div>
<div class="cl1">
<div id="id1" style="float: left;">左侧</div>
<div id="id2" style="float: left;">右侧</div>
</div>

<div id="id3">

</div>
<div id="id4">
底部
</div>
</div>
</body>
</html>
效果：

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

标签： html 布局

相关文章推荐

新的分享

章节导航