通过学习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. 构造水题 Codeforces Round #206 (Div. 2) A. Vasya and Digital Root

    题目传送门 /* 构造水题:对于0的多个位数的NO,对于位数太大的在后面补0,在9×k的范围内的平均的原则 */ #include <cstdio> #include <algori ...

  2. 工作记录：JS正则表达式 angularjs ng-if ng-show ng-switch

    用了一下JS 正则表达式判断密码,很简单 学习了angularjs的ng-if ng-show ng-switch的区别并使用 https://www.cnblogs.com/54td/p/59743 ...

  3. c# 搜狗拼音输入法，刷输入速度和累计输入

    事件起因: 搜狗拼音有几个称号(光速超人:要求最快打字速度 200字/m,一代文豪:要求累计输入字数达200000)一直没有那么快的速度,就想用.net来实现. 相关技术: 1.winform基本控件 ...

  4. Maximum Subsequence Sum 最大子序列和的进击之路

    本文解决最大子序列和问题,有两个题目组成,第二个题目比第一个要求多一些(其实就是要求输出子序列首尾元素). 01-复杂度1 最大子列和问题   (20分) 给定KK个整数组成的序列{ N1​​, N2 ...

  5. Solr和Spring Data Solr

    一.Solr概述与安装 1.Solr简介 Solr是一个开源搜索平台,用于构建搜索应用程序. 它建立在Lucene(全文搜索引擎)之上. Solr是企业级的,快速的和高度可扩展的.Solr可以和Had ...

  6. android中使用图文并茂的按钮

    代码: <LinearLayout android:orientation="horizontal" android:layout_width="match_par ...

  7. Java集合框架源码（二）——hashSet

    注:本人的源码基于JDK1.8.0,JDK的版本可以在命令行模式下通过java -version命令查看. 在前面的博文(Java集合框架源码(一)——hashMap)中我们详细讲了HashMap的原 ...

  8. java中字节和字符的转换操作

    package com.ywx.io; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputSt ...

  9. js阻塞ui进程涉及的知识点整理

    项目进行中遇到了同步ajax阻塞ui线程阻塞的问题,原因是执行两个同步ajax请求为一次完整的方法,因业务需求需要循环执行这个方法,检查后台返回的数据正确,但是由于ajax请求时间过长,考虑增加遮罩层 ...

  10. 洛谷 P1615 西游记公司

    题目背景 一道极其无厘头的题目 题目描述 事情是这样的:西游记中的孙沙猪(孙杀猪)三徒弟在西天取经之后开始进入厦门大学经贸系学习经济,在1个小时的学习后,他们用暴力手段毕业了.然后,他们创办了三个公司 ...