于html介绍css作风。可以改变html块状布局，局更加美观。接下来看一个基础布局的小样例：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>margin布局</title>

</head>

<style type="text/css">

	#container{

		width: 1002px;

		background: gray;

	}

	#header{

		height: 120px;

		background: orange;

	}

	#main{

		background: green;

		height: 600px;

	}

	#lside{

		width: 700px;

		height: 600px;

		float: left;

		background: pink;

	}

	.four{

		width: 130px;

		height: 280px;

		float: left;

		margin: 10px;

		background: black;

	}

	#rside{

		width: 302px;

		height: 600px;

		background: purple;

		float: right;

	}

	#footer{

		height: 120px;

		background: blue;

	}

</style>

<body>

<div id="container">

	<div id="header"></div>

	<div id="main">

		<div id="lside">

			<div class="four"></div>

			<div class="four"></div>

			<div class="four"></div>

			<div class="four"></div>

		</div>

		<div id="rside"></div>

	</div>

	<div id="footer"></div>

</div>

</body>

</html>

效果例如以下：

在上面的布局中。我们主要使用margin属性来对div进行布局。在实际中。感觉margin属性主要适用于块与块之间的布局，当我们要对盒子中的内容进行布局的时候，我们能够使用盒子的还有一个属性：padding，这个属性能够布局盒子内部的距离：

比如。我们增加padding属性，并在四个div中增加一些文字内容：

效果图：

注意，这里在实际做的时候，由于增加了padding值，导致了div最后不能并排显示在父div中。这里还改动了div的宽度值，使第四个div不至于被挤到以下去。

感觉增加css样式后。近期做的小demo跟曾经仅仅用html做的demo比起来，不仅布局上更加灵活多变，并且样式设置也比較简单了。

版权声明：本文博主原创文章，博客，未经同意不得转载。

css+html简单的布局demo的更多相关文章

  1. HTML与CSS绘制简单DIV布局

    HTML代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  2. css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  3. Xamarin.Android再体验之简单的登录Demo

    一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...

  4. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  5. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  6. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  7. css 多栏自适应布局

    在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...

  8. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  9. 响应式布局 —— Demo

    响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...

随机推荐

  1. SQL中IN,NOT IN,EXISTS,NOT EXISTS的用法和差别

    SQL中IN,NOT IN,EXISTS,NOT EXISTS的用法和差别: IN:确定给定的值是否与子查询或列表中的值相匹配. IN 关键字使您得以选择与列表中的任意一个值匹配的行. 当要获得居住在 ...

  2. ZOJ Problem Set - 2563 Long Dominoes 【如压力dp】

    称号:ZOJ Problem Set - 2563 Long Dominoes 题意:给出1*3的小矩形.求覆盖m*n的矩阵的最多的不同的方法数? 分析:有一道题目是1 * 2的.比較火.链接:这里 ...

  3. Ubuntu在构建Robotframework+Selenium周围环境

    最近经历了从Windows进入系统Ubuntukylin下列.因此,测试工具也需要被重新安装,今天和共享安装过程. 我用的是环境:Ubuntu Kylin 14.04 64Bit系统. 启动权,首先, ...

  4. uploadify控制 上传图片到百度云存储

    最近使用uploadify 控制图片上传到百度网盘....总的想法是 招待会uploadify获取文件传入后台,调用百度云存储api上传到百度网盘,返回url 联系.送存储在数据库中的链接.因此,我们 ...

  5. ef添加字段

    先在实体类里添加字段 ,然后执行 Add-Migration updateNumberOfLikes Update-Database -Verbose

  6. ORACLE—002：Create创作型

    --用于工作的积累SQL ORACLE另外还有的类型.储过程.函数等的输入输入出. 以下看下创建. 使用方法 CREATE OR REPLACE TYPE 类型名称 AS OBJECT(  字段1   ...

  7. 读书时间《JavaScript高级程序设计》一：基础篇

    第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...

  8. BZOJ 1901 Dynamic Rankings 树董事长

    标题效果:间隔可以改变k少 我的两个天树牌主席... 隔断Count On A Tree 之后我一直认为,随着树的主席的变化是分域林木覆盖率可持久段树. .. 事实上,我是误导... 尼可持久化线段树 ...

  9. 从电商秒杀与抢购谈Web系统大规模并发

    从电商秒杀与抢购谈Web系统大规模并发 http://www.iamlintao.com/4242.html 一.大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程 ...

  10. MS Open Tech 技术团队构建可靠的Windows版Redis

    可靠的Windows版Redis 副标题: 评论更精彩,教你怎么解决64位Windows版Redis狂占C盘的问题. MS Open Tech 技术团队最近花了很多时间来测试最新构建的Windows版 ...