网页布局(div布局)
网上有太多介绍,个人觉得不错的有《Div+CSS布局大全》,有PDF版本,可下载离线观看,别人总结的一个文档,简洁易懂,学起来不费劲,花时间不多,快速阅读完,即可上手,呵呵。
这里就不介绍语法,讲述一下一些布局的实现。
布局最常用的是div和table,个人比较喜欢div,灵活性高。
Div水平居中
核心语句:margin:0px auto;
<div style=" margin:0px auto; width:100px; height:100px; background:#FF0000;">
Div水平排列
核心语句:float:left
<div style="float:left; width:20%; height:100px; background:#FF0000;"></div><div style="float:left; width:60%; height:200px; background:#000000;"></div><div style="float:left; width:20%; height:100px; background:#FF0000;"></div>
三列
Div三行(满屏)
<div style=" margin:0px auto; height:50px; background:#FF0000;"></div><div style=" margin:0px auto; height:300px; background:#000000;"></div><div style=" margin:0px auto; height:50px; background:#FF0000;"></div>
Div三行(居中)
并排div自动增高(中部两列)
核心语句:底部div设置clear:both
<div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div><div style=" margin:0px auto; width:400px;"><div style=" float:left; width:30%; height:100px; background:#000079;"></div><div style=" float:right; width:70%; height:300px; background:#006000"></div></div><div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>
并排div自动增高(中部三列)
<div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div><div style=" margin:0px auto; width:400px;"><div style=" float:left; width:30%; height:100px; background:#000079;"></div><div style=" float:left; width:50%; height:300px; background:#006000"></div><div style=" float:right; width:20%; height:150px; background:#BB3D00"></div></div><div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>
Div固定到屏幕指定位置(广告位、头部导航固定,不随滚动条滑动变化)
核心语句:position:fixed; left:0px; top:50px;
<div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div><div style=" margin:0px auto; width:400px;"><div style=" float:left; width:30%; height:100px; background:#000079;"></div><div style=" float:left; width:50%; height:300px; background:#006000"></div><div style=" float:right; width:20%; height:150px; background:#BB3D00"></div></div><div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div><div style="width:50px; height:150px; background:#00FFFF; position:fixed; left:0px; top:50px;"></div>
可自行变化成头部、底部固定布局。
网页布局(div布局)相关推荐
- Iframe框架+table布局 +div布局实例
<tdcolspan="2"style="width: 80%"><iframesrc="http://www.baidu.com& ...
- html div 内部左右布局,div布局大全
div+css布局还有哪些布局方式 LZ说的框架是不是frame,框架适用于后台管理界面,一般顶部或左侧是功能菜单,右侧是内容显示页面而DIV+CSS是前台界面各模块设计,两者没交集, html 用d ...
- HTML5布局—div布局和table布局
1.使用 <div> 元素的 HTML 布局 注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位. 这个例子使用了四个 <div> 元素 ...
- dreamweaver家乡主题网页设计 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 HTML5期末大作业
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
- JavaScript-页面布局-div布局-盒子模型
文章目录 1.盒子模型 2.定位方式 3.排列属性-float和clear 4.块和内联属性 5.作者答疑 在使用Html构建界面时,最关键的标签是div,这是一个有着各种属性的块状标签,能够以绝 ...
- html5 居中布局,div 布局水平居中篇
div 机关程度居中篇 有的阅读器默许下div 居中的,但有的阅读器div靠左的,如何让DIV 机关居中呢? 枢纽DIV居中CSS代码: margin:0 auto 记取不是margin:auto d ...
- 关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局 表格布局 导航 推荐文章 一个猴子成长史 你看个毛线 我就瞅你咋地 村里出了个半边天 一个猴子的成长 ...
- 2017-12-04HTML布局_div布局
HTML布局_div布局 <!doctpye> <html> <head><meta charset = 'utf-8'><title>HT ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
最新文章
- sphinx 全文搜索引擎
- [CSS]BlendTrans滤镜
- ds18b20温度传感器 lcd C语言,基于AVR单片机的18B20温度传感器及LCD显示的C语言程序设计...
- 读入自然数m、n,判断m/n是有限小数还是循环小数
- 基于.NetCore结合docker-compose实践Gitlab-CI/CD 排坑指南
- mysql5.7 备份
- 知识库如何跟其他业务系统结合
- java元类_元类 - 一心不乱 - 博客园
- 一种提升语音识别准确率的方法与流程
- 互联网基础运维分工、职责和技能要求
- mysql备份数据库/备份表
- bit.ly 短地址转换_使用PHP创建Bit.ly短URL:API版本3
- 《数据库原理与应用》学习笔记(一):概论
- pxe kickstart无人值守自动化装机
- edge打开pdf不显示印章_一旦碰到Edge浏览器打不开pdf文件,只需这样做就可完美解决!...
- python做菜单_python实现三级菜单
- C++ accumulate
- Visual Studio 一些好用的插件
- 易能变频器说明书故障代码_易能变频器故障判断与处理
- 操作无法完成 计算机名不正确,win7系统连接共享打印机时提示“操作无法完成,键入的打印机名不正确”的解决方法...