前端CSS浮动布局教程
摘要：java如何开发前端 监控java前端开发 前端开发 javascript html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>……
java如何开发前端 监控java前端开发 前端开发 javascript
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>浮动布局</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #ddd;
}
.max {
width: 600px;
margin: 0 auto;
color: #000;
font-size: 50px;
text-align: center;
}
.top {
overflow: hidden;
}
.top div {
width: 120px;
height: 120px;
background-color: green;
line-height: 120px;
float: left;
}
.center {
overflow: hidden;
}
.center .left {
width: 400px;
float: left;
}
.center .right {
width: 200px;
float: right;
}
.div6 {
height: 100px;
line-height: 100px;
background-color: yellow;
}
.div89 {
overflow: hidden;
}
.div8 {
width: 200px;
height: 200px;
background-color: orange;
line-height: 200px;
float: left;
}
.div9 {
width: 200px;
height: 200px;
line-height: 200px;
background-color: #fff;
float: left;
}
.div11 {
height: 100px;
background-color: red;
line-height: 100px;
}
.div7 {
height: 260px;
line-height: 260px;
background-color: pink;
}
.div10 {
height: 140px;
line-height: 140px;
background-color: rgb(132, 206, 237);
}
.div12 {
height: 100px;
line-height: 100px;
background-color: rgb(128, 0, 128);
}
</style>
</head>
<body>
<div class=”max”>
<div class=”top”>
<div class=”div1″>1</div>
<div class=”div2″>2</div>
<div class=”div3″>3</div>
<div class=”div4″>4</div>
<div class=”div5″>5</div>
</div>
<div class=”center”>
<div class=”left”>
<div class=”div6″>6</div>
<div class=”div89″>
<div class=”div8″>8</div>
<div class=”div9″>9</div>
</div>
<div class=”div11″>11</div>
</div>
<div class=”right”>
<div class=”div7″>7</div>
<div class=”div10″>10</div>
</div>
</div>
<div class=”div12″>12</div>
</div>
</body>
</html>
java前端开发面试 java软件前端开发 java前端开发要打代码吗
» 本文来自：前端开发者 » 《前端CSS浮动布局教程》
» 本文链接地址：https://www.rokub.com/5764.html
» 您也可以订阅本站：https://www.rokub.com
近期评论