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的功能 ...
随机推荐
- MFC程序执行过程剖析(转)
一 MFC程序执行过程剖析 1)我们知道在WIN32API程序当中,程序的入口为WinMain函数,在这个函数当中我们完成注册窗口类,创建窗口,进入消息循环,最后由操作系统根据发送到程序窗口的消息调用 ...
- 微信小程序学习二 微信小程序的项目结构
进来之后可以看到五个文件和两个文件夹,一般新建的小程序项目都是这种格式,但有些可能会不一样,不用担心,因为我们所要关注的文件是不会变的 pages 小程序的页面放置文件夹,每一个页面(page)包含四 ...
- JS基础入门篇(四十三)—ES6(二)
1.对象简洁表示法 原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...
- archetypeCatalog=internal
Properties中添加 archetypeCatalog=internal,不加这个参数,在maven生成骨架的时候将会非常慢.
- WRNavigationBar 使用记录
最近在做一个导航栏透明度渐变的效果,发现 WRNavigationBar库很好用,一开始导入到项目,发现导航tiltle颜色一直是黑色的,无论怎么用系统方法改都改不了.后来发现原来库里面有一个方法可以 ...
- thinkphp 配置格式
ThinkPHP支持多种格式的配置格式,但最终都是解析为PHP数组的方式. PHP数组定义 返回PHP数组的方式是默认的配置定义格式,例如: //项目配置文件 return [ // 默认模块名 'd ...
- [CSP-S模拟测试]:v(hash表+期望DP)
题目背景 $\frac{1}{4}$遇到了一道水题,又完全不会做,于是去请教小$D$.小$D$看了$0.607$眼就切掉了这题,嘲讽了$\frac{1}{4}$一番就离开了.于是,$\frac{1}{ ...
- JAVA中STL使用
Vector:和c++的vector使用方法类似. Vector<Integer> vec=new Vector<> (); ArrayList:Java.util.Array ...
- POI 讀取EXCEL
/*** 獲取單元格數值* * @param cell* @return*/private String getCellValue(Cell cell) {String cellValue = &qu ...
- 聊聊 API 签名方式
前言 现在越来越多的公司以 API 的形式对外提供服务,这些 API 接口大多暴露在公网上,所以安全性就变的很重要了.最直接的风险如下: 非法使用 API 服务.(收费接口非法调用) 恶意攻击和破坏. ...