CSS网页布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/snowing1022/article/details/49968861

今天学习了如何利用CSS进行网页布局，从基础的一列布局、两列布局到三列布局，网页设计是以传统纸媒为基础的，但是又有些区别，网页有一个自适应，可以根据浏览器的大小来改变自己的大小比例，各大网站诸如百度、腾讯、新浪的界面都是以这些为基础来设计的混合布局，自己写的混合布局的题目：

<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:200px;background:gray;}
.main{height:700px;background:red;}
.left{ height:700px;width:200px;background:blue;float:left;}
.right{height:700px;background:green;float:right;}
.foot{height:100px;background:orange;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>

刚才尝试了很久，想要再细分效果，可是总是不理想，很忧伤，明天再继续尝试吧，也可以看出，掌握的并不是很好，复杂一点就搞不出来，还需要学习的有很多~