首页 > 代码库 > 学习网页布局

学习网页布局

2024-08-16 10:49:48   224人阅读

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>猪八戒</title>

<style>

body{

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<div style="width: 1422px;height: 33px; background: grey; margin: 0 auto">

</div>

<div style="width: 1190px;height: 60px; background: black; margin: 0 auto">

</div>

<div style="width: 1190px;height: 542px; margin: 0 auto">

<div style="width: 205px;height: 542px; background: red;float: left;">

</div>

<div style="width: 985px;height: 42px; background: blue;float: left;">

</div>

<div style="width: 672px;height: 500px; background: green;margin-left: 6px;  float: left;">

<div style="width: 450px;height: 500px; background: yellow;  float: left;">

</div>

<div style="width: 222px;height: 500px;float: left; ">

<div style="width: 222px;height: 166px; background: black;float: left;">

</div>

<div style="width: 222px;height: 166px; background: blue;float: left;"></div>

<div style="width: 222px;height: 168px; background: red;float: left;"></div>

</div>

</div>

<div style="width: 300px;height: 500px; background: yellow;margin-left: 7px; float: left;">

<div style="width: 300px;height: 166px; background: red;float: left;"></div>

<div style="width: 300px;height: 166px; background: yellow;float: left;"></div>

<div style="width: 300px;height: 168px; background: blue;float: left;"></div>

</div>

</div>

<div style="width: 1190px;height: 102px; background: grey; margin: 0 auto; margin-top:20px;">

</div>

<div style="width: 1190px;height: 200px; margin: 0 auto; margin-top:20px;">

<div style="width: 170px;height: 200px; background:red;float: left;">

</div>

<div style="width: 332px;height: 200px; background:blue;float: left;margin-left: 8px;"></div>

<div style="width: 332px;height: 200px; background:black;float: left;margin-left: 8px;"></div>

<div style="width: 332px;height: 200px; background:green;float: left;margin-left: 8px;"></div>

</div>

<div style="width: 1190px;height: 200px; margin: 0 auto; margin-top:23px;">

<div style="width: 170px;height: 200px; background:black;float: left;">

</div>

<div style="width:1014px;height: 200px; background:blue;float: left;margin-left: 6px;">

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:yellow;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

</div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 382px; margin: 0 auto;background: #c1c2c2; margin-top:23px;">

<div style="width:195px;height: 333px; background:red;float: left;margin-top:25px;margin-left: 27.5px;"></div>

<div style="width:195px;height: 333px; background:blue;float: left;margin-top:25px;margin-left: 40px;"></div>

<div style="width:195px;height: 333px; background:yellow;float: left;margin-top:25px;margin-left: 40px;"></div>

<div style="width:195px;height: 333px; background:red;float: left;margin-top:25px;margin-left:40px;"></div>

<div style="width:195px;height: 333px; background:blue;float: left;margin-top:25px;margin-left: 40px;"></div>

</div>

<div style="width: 1190px;height: 35px; margin: 0 auto;background: #c1c2c2; margin-top:20px;"></div>

<div style="width: 1190px;height: 430px; margin: 0 auto;background: red; margin-top:25px;"></div>

<div style="width: 1190px;height: 35px; margin: 0 auto;background: #c1c2c2; margin-top:20px;"></div>

<div style="width: 1190px;height: 370px; margin: 0 auto; margin-top:82px;">

<div style="width: 290px;height: 370px; background:red;float: left;"></div>

<div style="width: 625px;height: 370px; background:yellow;float: left;margin-left: 40px;">

<div style="width: 200px;height: 180px; background:blue;float: left;"></div>

<div style="width: 417px;height: 180px; background:blue;float: left;margin-left: 8px;"></div>

<div style="width: 200px;height: 180px; background:blue;float: left;margin-top:10px ">

</div>

<div style="width: 200px;height: 180px; background:blue;margin-left: 10px;float: left;margin-top: 10px;">

</div>

<div style="width: 200px;height: 180px; background:blue;margin-left: 15px;float: left;margin-top: 10px;">

</div>

</div>

<div style="width: 200px;height: 370px; background:blue;float: left;margin-left: 35px;"></div>

</div>

<div style="width: 1190px;height: 440px; margin: 0 auto;background: #c1c2c2; margin-top:75px;"></div>

<div style="width: 1422px;height: 195px; margin: 0 auto;background: black; margin-top:22px;"></div>

</body>

</html>


学习网页布局


联系
我们