css+html简单的布局demo
于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的更多相关文章
- HTML与CSS绘制简单DIV布局
HTML代码<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- css基础-定位+网页布局案例
position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...
- Xamarin.Android再体验之简单的登录Demo
一.前言 在空闲之余,学学新东西 二.服务端的代码编写与部署 这里采取的方式是MVC+EF返回Json数据,(本来是想用Nancy来实现的,想想电脑太卡就不开多个虚拟机了,用用IIS部署也好) 主要是 ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 响应式布局 —— Demo
响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...
随机推荐
- window.history.back()的改进方法window.history.go()
今天在做项目时,測试人员提出了一条bug,起初没当回事,在改动过程中才意识到其重要性,故记录下来. 依照需求,系统应该实现例如以下的功能:有三个关联的页面a.aspx(简称a),b.aspx(简称b) ...
- 5月，专用程序猿的经典大作——APUE
五一小长假刚刚过去,收回我们游走的心.開始你们的读书旅程吧! 本期特别推荐 经典UNIX著作最新版. 20多年来,这本书帮助几代程序猿写出强大.高性能.可靠的代码. 第3版依据当今主流系统进行更新,更 ...
- iOS开发- Xcode插件(一)-规范凝视生成器VVDocumenter
分享几个经常使用的Xcode插件. 第一个, 规范凝视生成器VVDocumenter. 顾名思义, 它能够非常方便的为你自己主动加入�凝视 使用效果例如以下: 下载链接:https://github. ...
- 无需Visual Studio，5容易的 - 分为报告
总报告设计,例如RDLC.水晶报表等.,需要安装Visual Studio.由VS提供报表设计界面设计报告,由VS设计报告.NET非常方便开发者,.但对于非开发,安装4G一个VS.并且需要Licens ...
- MS Open Tech 技术团队构建可靠的Windows版Redis
可靠的Windows版Redis 副标题: 评论更精彩,教你怎么解决64位Windows版Redis狂占C盘的问题. MS Open Tech 技术团队最近花了很多时间来测试最新构建的Windows版 ...
- 简单介绍如何使用PowerMock和Mockito来mock 1. 构造函数 2. 静态函数 3. 枚举实现的单例 4. 选择参数值做为函数的返回值(转)
本文将简单介绍如何使用PowerMock和Mockito来mock1. 构造函数2. 静态函数3. 枚举实现的单例4. 选择参数值做为函数的返回值5. 在调用mock出来的方法中,改变方法参数的值 一 ...
- 使用EasyUI实现加入和删除功能
增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...
- oracle的分页查询碰到的一个小问题
订单表.与订单信息表(多个订单信息列有同一个订单id) 查出全部订单以及其信息并依照订单分页 select * from( select a. * , (DENSE_RANK() OVER(ORDER ...
- iOS coreData
static int row=0; static const NSString *kStoryboardName = @"LRCoreDataViewController"; st ...
- Android：抄QQ照片选择器（按相册类别显示，加入选择题）
这个例子的目的是为了实现类似至QQ照片选择功能.选择照片后,,使用类似新浪微博 微博 页面上显示. 先上效果图: 本例中使用的主要技术: 1.使用ContentProvider读取SD卡全部图 ...