zoukankan      html  css  js  c++  java
  • 慕课笔记利用css进行布局【混合布局练习】

    通过学习div的布局,以一个简单的内容管理网站的布局为例子,用div+css进行简单的网页布局,加深学印象:

    <html>
    	<head>
    		<title>CSS+div布局学习</title>
    		<style type="text/css">
    			body{margin:0;padding:0;text-align:center}
    			.head{height:230px;960px;background:#f96;margin:0 auto}
    			.cat{height:30px;960px;background:#f80;margin:3 auto}
    			.content{height:806px;960px;background:#fff;margin:3 auto}
    			.content_left{height:800px;760px;background:#fff;float:left}
    			.leftone{height:250px;760px;background:#666;}
    			.lefttwo{height:300px;760px;background:#fff; margin:3 0 0 0}
    			.leftthree{height:250px;760px;background:#999; margin:3 0 0 0}
    			.content_right{height:806px;197px;background:#00f;float:right;margin:0 0 0 3}
    			.lefttwo_l{height:300px;360px;background:#cc3;float:left}
    			.lefttwo_r{height:300px;397px; background:#cc9;float:right;margin:0 0 0 3}
    			.footer{height:30px;960px;background:#f80;margin:3 auto}
    		</style>
    	</head>
    	<body>
    	<div class="head">logo位960*230</div><!--头部logo-->
    	<div class="cat">导航栏位置960*30</div><!--导航栏-->
    	<div class="content">
    		<div class="content_left"><!--内容左侧-->
    			<div class="leftone">左侧第一栏760*250</div><!--左侧第一栏-->
    			<div class="lefttwo"><!--左侧第二栏-->
    				<div class="lefttwo_l">左侧第二栏左360*300</div><!--左侧第二栏的左侧-->
    				<div class="lefttwo_r">左侧第二栏右197*300</div><!--左侧第二栏右侧-->
    			</div>
    			<div class="leftthree">左侧第三栏760*250</div><!--左侧第三栏-->
    		</div>
    		<div class="content_right">
    		右侧内容位197*806
    		</div><!--内容右侧-->
    	</div><!--内容-->
    	<div class="footer">底部位置960*30</div>
    	</body>
    </html>
    

     效果如下:

     

  • 相关阅读:
    UINavigationController的简单使用
    UIApplication
    NSOperation开启线程情况分析
    NSOperation & NSOperationQueue
    GCD 多线程 Ios 补充
    GCD中不同队列 配合 不同函数的 情况分析
    GCD详解
    is,as,sizeof,typeof,GetType
    人人必知的10个jQuery小技巧
    移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程
  • 原文地址:https://www.cnblogs.com/soulsjie/p/7257765.html
Copyright © 2011-2022 走看看