简单的CSS网页布局--一二列布局
1.一列布局
(一)一列自适应
自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>一列布局自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.head,.middle,.foot{
width: 50%; /*百分比宽度*/
margin: 0 auto; /* 典型的设置居中*/
}
.head{
height: 200px;
background: #F0B6CF;
}
.middle{
height: 500px;
background: tan;
}
.foot{
height: 200px;
background-color: #57A9D1;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="middle">middle</div>
<div class="foot">foot</div>
</body>
</html>
(二)一列固定
顾名思义，固定布局的宽度，设置固定的PX值。
只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应，这时候要用到float属性。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.left{
width: 30%;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 70%;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列居中自适应</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.main{
width:80%;
height: 500px;
margin: 0 auto; /*居中*/
}
.left{
width: 30%;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 70%;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
(三)二列居中固定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二列居中固定宽度</title>
<style type="text/css">
body{
margin: 0; /*清除浏览器默认样式*/
padding: 0;
}
div{
text-align: center; /*字体居中*/
font-size: 30px;
font-weight: bold;
}
.main{
width:960px;
height: 500px;
margin: 0 auto;
}
.left{
width: 360px;
background-color: #CCFF00;
height: 500px;
float: left; /*先左浮动，使之靠浏览器左侧*/
}
.right{
width: 600px;
height: 500px;
background-color: bisque;
float: right; /*先右浮动，使之靠浏览器右侧*/
}
</style>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
简单的CSS网页布局--一二列布局的更多相关文章
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽
一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- css布局之一列布局
在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？
使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...
- css布局之三列布局
网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- 实际用户ID，有效用户ID和设置用户ID
摘自http://blog.csdn.net/guosha/article/details/2679334 实际用户ID,有效用户ID和设置用户ID 看UNIX相关的书时经常能遇到这几个概念,但一直没 ...
- sql 中的 indexOf 与 lastIndexOf
DECLARE @Name NVARCHAR (50)SET @Name = '12345.67890ABCDE.FGHIJKLMNOPQRSTUVWXYZTest' DECLARE @Positio ...
- Ubuntu下nginx+uwsgi+flask的执行环境搭建
选择web framwork是个非常艰难的事情, 主要分为轻量级和重量级框架. 因为没有搭建站点这样的须要, 所以回避SSH, Django这样的框架, 而选择一个轻量级框架. 自己也比較青睐pyth ...
- Tsinghua dsa pa2
第一题,列车调度(train) 在这个题目中,模拟压栈出栈,同时判断调度方案是否可行. #include <cstdio> #include <cstring> #define ...
- oracle查询表信息
oracle查询表信息(索引,外键,列等) oracle中查询表的信息,包括表名,字段名,字段类型,主键,外键唯一性约束信息,索引信息查询SQL如下: 1.查询出所有的用户表 select * fro ...
- 5.7.13mysql 无法登陆
话不多说 用的http://dev.mysql.com/downloads/mysql/下的ZIP Archive安装方式 下载 解压,然后吧bin目录添加到系统path环境变量下.然后将my-de ...
- POJ 3279(Fliptile)题解
以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定长宽的黑白棋棋盘摆满棋子,每次操作可以反转一个位置和其上下左右共五个位置的棋子的颜色,求要使用最少翻转次数将所有棋子反转为黑 ...
- model、dao、 service 和Comtroll层的关系
首先这是现在最基本的分层方式,结合了SSH架构.modle层就是对应的数据库表的实体类.Dao层是使用了Hibernate连接数据库.操作数据库(增删改查).Service层:引用对应的Dao数据库操 ...
- phpcms 调用全站最新发布数据
phpcms模板标签没有调用全站最新发布的数据 所以参考phpcms本身自带的lists方法写了一个Countlists调用全站数据 /** * 全站最热 * @param $data */ publ ...
- mysql性能优化学习笔记（4）索引的优化
一.选择合适的索引列 1.在where,group by,order by,on从句中出现的列 2.索引字段越小越好(因为数据库的存储单位是页,一页中能存下的数据越多越好 ) ...