div标准布局示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>横向两列布局</title>
<style>
*{margin:0;padding:0;}
#warp{
width:960px;
margin:0 auto;
margin-top:10px;
}
#herder{
height:50px;
background:blue;
}
#nav{
height:30px;
background:orange;
margin:10px 0;
}
#main{
width:100%;
margin-bottom:10px;
overflow:hidden;
}
#main .main-left{
width:640px;
height:200px;
background:yellow;
float:left;
}
#main .main-right{
width:300px;
height:200px;
background:pink;
float:right;
}
#content{
width:100%;
overflow:hidden;
}
#content .content-left{
width:640px;
height:800px;
background:lightgreen;
float:left;
}
#content .content-right-sup{
width:300px;
height:500px;
background:lightblue;
float:right;
}
#content .content-right-sub{
width:300px;
height:280px;
background:purple;
margin-top:20px;
float:right;
}
#footer{
height:50px;
background:gray;
margin-top:10px;
}
</style>
</head>
<body>
<div id="warp">
<div id="herder">页头</div>
<div id="nav">导航</div>
<div id="main">
<div class="main-left">左-上</div>
<div class="main-right">右-上</div>
</div>
<div id="content">
<div class="content-left">左-下</div>
<div class="content-right-sup">右-上</div>
<div class="content-right-sub">右-下</div>
</div>
<div id="footer">页脚</div>
</div>
</body>
</html>
div标准布局示例的更多相关文章
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
- DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- div css 布局对seo 影响 布局原则
一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...
- css两端对齐——div+css布局实现2端对齐的4种方法总结
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
随机推荐
- bzoj1002 轮状病毒 暴力打标找规律/基尔霍夫矩阵+高斯消元
基本思路: 1.先观察规律,写写画画未果 2.写程序暴力打表找规律,找出规律 1-15的答案:1 5 16 45 121 320 841 2205 5776 151 ...
- centos 6.5 关闭防火墙
关闭防火墙分为临时关闭和永久关闭.临时关闭重启系统后恢复正常,永久关闭重启系统后仍然是关闭状态 临时关闭与开启 service iptables stop service iptables start ...
- 【leetcode】1012. Complement of Base 10 Integer
题目如下: Every non-negative integer N has a binary representation. For example, 5 can be represented a ...
- js手机号码中间用星号代替。银行卡后四位之外改为星号
如手机号码13123456789,中间四位用'*'代替 var phone='13123456789' 方法1(字符串的截取): ,)+); 方法2(正则表达式): })\d{}(\d+)/,&quo ...
- PHP计算经纬度在百度多边形区域内
最近做一个项目需要使用到区域,并且要判断当前的经纬度是否在区域内,已便对应业务需求变化.废话不多说直接上代码: /** * 验证区域范围 * @param array $coordArray 区域 * ...
- click和blur冲突的问题
昨天在前端群里讨论到一个问题,大家平时做表单验证的时候一般都有个input框和删除按钮,然后习惯性在失去焦点的时候去验证输入的内容是否正确,做验证,发请求等等.这个时候,那个点击删除按钮往往也就触发了 ...
- 【Linux】设置开机自启
忘记转发的哪里的. 方法 1这种方法会利用 /etc/ 中的 rc.local 文件来在启动时执行脚本与命令.我们在文件中加上一行来执行脚本,这样每次启动系统时,都会执行该脚本. 不过我们首先需要为 ...
- 八. jenkins参数化构建 git分支
使用git管理代码时往往会有多分支开发,这时部署通过修改配置不试用.可以通过参数化构建. 1.通过字符参数方式 新建一个maven项目,选择参数化构建过程-字符参数,如下: 源码管理中配置如下: 其它 ...
- "如何用70行Java代码实现深度神经网络算法" 的delphi版本
http://blog.csdn.net/hustjoyboy/article/details/50721535 "如何用70行Java代码实现深度神经网络算法" 的delphi ...
- js记住密码
$(function () { if (getCookie("rmbUser") == "true") { $("#xuanzong") ...