今天学习了如何利用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>
刚才尝试了很久,想要再细分效果,可是总是不理想,很忧伤,明天再继续尝试吧,也可以看出,掌握的并不是很好,复杂一点就搞不出来,还需要学习的有很多~