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

<html>

	<head>

		<title>CSS+div布局学习</title>

		<style type="text/css">

			body{margin:0;padding:0;text-align:center}

			.head{height:230px;width:960px;background:#f96;margin:0 auto}

			.cat{height:30px;width:960px;background:#f80;margin:3 auto}

			.content{height:806px;width:960px;background:#fff;margin:3 auto}

			.content_left{height:800px;width:760px;background:#fff;float:left}

			.leftone{height:250px;width:760px;background:#666;}

			.lefttwo{height:300px;width:760px;background:#fff; margin:3 0 0 0}

			.leftthree{height:250px;width:760px;background:#999; margin:3 0 0 0}

			.content_right{height:806px;width:197px;background:#00f;float:right;margin:0 0 0 3}

			.lefttwo_l{height:300px;width:360px;background:#cc3;float:left}

			.lefttwo_r{height:300px;width:397px; background:#cc9;float:right;margin:0 0 0 3}

			.footer{height:30px;width: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>

效果如下：

慕课笔记利用css进行布局【混合布局练习】的更多相关文章

  1. 慕课笔记利用css进行布局【混合布局】

    <html> <head> <title>混合布局学习</title> <style type="text/css"> ...

  2. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  3. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  4. 慕课笔记利用css进行布局【一列布局】

    <html> <head> <title>一列布局</title> <style type="text/css"> bo ...

  5. css学习笔记 --初学 css代码风格、布局误区

    初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main   主体   container 内容 footer    站底 right.center ...

  6. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  7. CSS 实现流布局以及多列混合布局

    基本流布局 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <ti ...

  8. 利用css进行网页布局

    网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说). ...

  9. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

随机推荐

  1. [POI2008]激光发射器SZK

    Description 多边形相邻边垂直,边长为整数,边平行坐标轴.要在多边形的点上放一些激光发射器和接收器.满足下列要求: 1发射器和接收器不能放置在同一点: 2发射器发出激光可以沿壁反射,最终到达 ...

  2. Apple Tree POJ - 2486

    Apple Tree POJ - 2486 题目大意:一棵点带权有根树,根节点为1.从根节点出发,走k步,求能收集的最大权值和. 树形dp.复杂度可能是O(玄学),不会超过$O(nk^2)$.(反正这 ...

  3. 题解报告：poj 2503 Babelfish（map）

    Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...

  4. 递归查找无效的符号链接 分类： linux c/c++ 2014-06-02 00:14 345人阅读 评论(0) 收藏

    本程序实现在指定目录下递归查找无效的符号链接. 1.设计思路 逐个读取给定目录中的目录项,判断类型 (1)若为目录,则读取该目录中的目录项并判断类型: (2)若为链接文件,则读取出其指向文件的名称(绝 ...

  5. 加密解密(3)Bob到CA申请证书过程

    网络安全中最知名的人物大概就是Bob和Alice了,因为很多安全原理阐述中都用这两个虚拟人物来进行实例说明. 我们来看看Bob是怎么从CA中心获得一个数字证书的: 1.Bob首先创建他自己的密钥对(k ...

  6. JAVA面试题最全集

      JAVA面试题最全集 2009-01-19 15:40 3458人阅读 评论(0) 收藏 举报 java面试ejbservletstringhashmap 一.Java基础知识1.Java有那些基 ...

  7. shell 2 解析

    ---- shell 3 /home/oracle/utility/macro/call_autopurge_arch.sh Description: Call purge archive log f ...

  8. h5学习-webstorm工具的激活

    这里有个快速激活webstorm的方法:http://jingyan.baidu.com/article/9f63fb919674f2c8400f0e9a.html h5的轮廓工具:https://g ...

  9. Spark学习之Spark调优与调试（7）

    Spark学习之Spark调优与调试(7) 1. 对Spark进行调优与调试通常需要修改Spark应用运行时配置的选项. 当创建一个SparkContext时就会创建一个SparkConf实例. 2. ...

  10. R in action读书笔记（10）-第八章：回归-- 异常观测值 改进措施

    8.4 异常观测值 8.4.1 离群点 car包也提供了一种离群点的统计检验方法.outlierTest()函数可以求得最大标准化残差绝对值Bonferroni调整后的p值: > library ...