页面常见布局

单列布局、两列布局、三列布局

页面通常都会分为header、wrapper、footer三个部分

单列布局

<!DOCTYPE html>
<html>
<head><title>单列布局</title><link rel="stylesheet" type="text/css" href="reset.css"><style type="text/css">html,body{/*宽度，高度100%代表与页面同宽同高*/width: 100%;height: 100%;}.header{width: 100%;height: 60px;line-height: 60px;/*行高也能撑起整个盒子*/text-align: center;background-color: black;}.container{/*container只设置宽度，保证内容部分水平居中即可*/margin:0 auto;width: 1200px;}.header .container{/*通常container不设置页面高度，页面高度由内层元素决定。*/height: 60px;background-color: red;}.wrapper{width: 100%;height: 100%;}.wrapper .container{height: 100%;background-color: yellow;}.foot{width: 100%;height: 60px;}.foot .container{height: 100%;background-color: green;}</style>
</head>
<body>
<div class="header"><div class="container">头部内容区域</div>
</div>
<div class="wrapper"><div class="container">中心内容区域</div>
</div>
<div class="foot"><div class="container">尾部内容区域</div>
</div>
</body>
</html>

盒子高度默认是盒子中元素高度，如文字高度。文字的行高即代表文字的高度

两列布局

利用左右浮动，实现两列布局

<!DOCTYPE html>
<html>
<head><title>两列布局</title><link rel="stylesheet" type="text/css" href="reset.css"><style type="text/css">html,body{width: 100%;height: 100%;}.header{width: 100%;height: 60px;line-height: 60px;text-align: center;background-color: black;}.container{margin:0 auto;width: 1200px;}.header .container{height: 60px;background-color: red;}.wrapper{width: 100%;height: 100%;}.wrapper .container{height: 100%;/*background-color: yellow;*/}.wrapper .container .left{width:10%;height: 100%;float: left;background-color:purple;}.wrapper .container .right{/*可以留一点做空隙，也可以不留，左边10%，右边90%*/width:89%;height: 100%;float: right;background-color: yellowgreen;}.foot{width: 100%;height: 60px;}.foot .container{height: 100%;background-color: green;}</style>
</head>
<body>
<div class="header"><div class="container">头部内容区域</div>
</div>
<div class="wrapper"><div class="container"><div class="left"></div><div class="right"></div></div>
</div>
<div class="foot"><div class="container">尾部内容区域</div>
</div>
</body>
</html>

三列布局

三列布局时，中间部分无需设置浮动，只需要设置左右两边的margin，width就能自动调整到合适的宽度，形成三列布局

<!DOCTYPE html>
<html>
<head><title>三列布局</title><link rel="stylesheet" type="text/css" href="reset.css"><style type="text/css">html,body{width: 100%;height: 100%;}.header{width: 100%;height: 60px;line-height: 60px;text-align: center;background-color: black;}.container{margin:0 auto;width: 1200px;}.header .container{height: 60px;background-color: red;}.wrapper{width: 100%;height: 100%;}.wrapper .container{height: 100%;/*background-color: yellow;*/}.wrapper .container .left{width:10%;height: 100%;float: left;background-color:purple;}.wrapper .container .right{width:10%;height: 100%;float: right;background-color: yellowgreen;}.wrapper .container .center{/*width:80%;*/  height: 100%;margin:0 130px; /*不要设置宽度，用外边距来限制盒子的范围*/background-color: blue;}.foot{width: 100%;height: 60px;}.foot .container{height: 100%;background-color: green;}</style>
</head>
<body>
<div class="header"><div class="container">头部内容区域</div>
</div>
<div class="wrapper"><div class="container"><div class="left"></div> <div class="right"></div><div class="center"></div>  <!-- 注意center必须放在后面，因为浮动元素脱标，center盒子就可以挤上去。否则右边浮动的盒子就不会再中心区域，而是在下一行浮动 --></div>
</div>
<div class="foot"><div class="container">尾部内容区域</div>
</div>
</body>
</html>

html页面常见布局相关推荐

分析前端页面常见布局排版
首先我们先关注显示器显示器的分辨率问题很大程度影响页面最后的渲染展示效果; 常见的显示器分辨率: 1024*600 (文物大屁股显示器) 1280*1024 (1% 用户正方形显示器即将灭绝) ...
常见的几种页面内容布局方式
在前端开发中页面布局总是最开始的工作,就像盖楼时,先搭框架,然后再填砖,前端也是一样的,先做好页面的布局工作. 通过浏览不同的网站发现,页面的布局都是大同小异,总结下来大概就几种: 第一种: 单列布局 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例
浏览器私有前缀为了兼容老版本私有前缀 -moz- : fixfox 浏览器私有属性 -ms- : ie浏览器私有属性 -webkit- : safari.chrome私有属性 -o- : Oper ...
CSS 6 精灵图字体图标 CSS三角用户界面样式 vertical-align 溢出文字省略号常见布局技巧
目录 1.精灵图 1.1为什么需要精灵图 1.2精灵图(sprites)的使用 1.3精灵图使用案例 2.字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引 ...
【CSS进阶】精灵图、字体图标、用户界面样式、常见布局技巧、初始化、CSS三角
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍精灵图.字体图标.CSS三角.用户界面样式.vertical-align.常见布局技巧.初始化思 ...
移动端有哪些常见布局方式？
大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直.纯洁.善良的前端程序员. 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点--移动端有哪些常见布局方式? 1.背景介绍随着智 ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
移动端web开发--开发选择、技术解决方案、常见布局
1.移动端开发选择 1.1 移动端主流方案 1.单独制作移动端页面(主流) 2.响应式页面兼容移动端(其次) 1.2单独移动端页面(主流) 通畅在网址域名前加m(mobile)可以打开移动端.通过判断 ...
DIV+CSS布局概述、属性（浮动、定位等）、布局类型、常见布局技巧
文章目录布局概述网页布局页面元素定位机制布局常用属性浮动属性(float) 清除属性(clear) 定位属性(position) 溢出属性(overflow) 层叠属性(Z-index) 布 ...

html页面常见布局

页面常见布局

单列布局

两列布局

三列布局

html页面常见布局相关推荐

最新文章

热门文章