文档章节

利用CSS进行网页布局

上古遗露
 上古遗露
发布于 2015/12/13 23:39
字数 661
阅读 16
收藏 0

使宽度自适应使用百分比

一、一列布局

使一个div元素居中,要给其设置宽度,并设置margin:0 auto;即可。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
	<style type="text/css">
    	* { padding:0; margin:0;}
    	.main { height:300px; width:800px; background-color:#900; margin:0 auto; }
    </style>
</head>

<body>
	<div class="main"></div>
</body>
</html>

效果:


二、两列布局

固定宽度的两列布局:在上面的main div元素中添加两个div,可以使用百分比,也可以使用像素固定其宽度。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一列居中布局</title>
	<style type="text/css">
    	* { padding:0; margin:0;}
    	.main { width:800px; height:400px; background-color:#900; margin:0 auto; }
        .left { width:250px; height:inherit; background-color:#CCC; float:left; }
        .right { width:550px; height:inherit; background-color:#666; float:left; }
    </style>
</head>

<body>
	<div class="main">
    	<div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果:


三、三列布局

  • 三列宽度相等

实现方法:

设置三列的宽度都为33.33%,并设置三列div元素左浮动。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列宽度相等布局</title>
    <style type="text/css">
        #div1 { width:33.33%; height:500px; float:left; background-color:#f00;}
        #div2 { width:33.33%; height:500px; float:left; background-color:#0f0;}
        #div3 { width:33.33%; height:500px; float:left; background-color:#00f;}
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

效果:


  • 左右宽度固定,中间自适应

实现方法:

  1. 左右div块元素设置固定宽度,中间div不设置;

  2. 左右div设置position为absolute,并且分别设置位于浏览器左上角和右上角;

  3. 设置中间div的左右margin值分别为左右div元素的宽度。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三列布局——中间自适应宽度</title>
    <style type="text/css">
    	* { padding:0; margin:0; }
        #div1 { width:200px; height:500px; position:absolute; left:0; top:0; background-color:#f00;}
        #div2 { height:500px; margin:0 300px 0 200px; background-color:#0f0;}
        #div3 { width:300px; height:500px; position:absolute; right:0; top:0; background-color:#00f;}
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

效果:

四、混合布局

实现:

利用基础的一列、两列、三列布局知识进行组合,利用浮动和定位对网页进行布局。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>混合布局</title>
    <style type="text/css">
    	* { padding:0; margin:0; }
        .top { height:50px; background-color:#f00;}
        .top-center { width:800px; height:inherit; margin:0 auto; background-color:#009;} 
        .main { width:800px; height:400px; margin:0 auto; background-color:#0f0;}
        .main-left { width:200px; height:inherit; float:left; background-color:#FF0; } 
        .main-right {width:600px; height:inherit; float:right; background-color:#0FF; }
        .sub-left { width:400px; height:inherit; float:left; background-color:#C60;}
        .sub-right { width:200px; height:inherit; float:left; background-color:#F0C;}
        .foot { width:800px; height:50px; margin:0 auto; background-color:#00f;}
    </style>
</head>

<body>
    <div class="top">
    	<div class="top-center"></div>
    </div>
    <div class="main">
    	<div class="main-left"></div>
        <div class="main-right">
        	<div class="sub-left"></div>
            <div class="sub-right"></div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

效果:


© 著作权归作者所有

共有 人打赏支持
上古遗露
粉丝 7
博文 56
码字总数 42929
作品 0
苏州
DIV+CSS布局与程序开发关系?

可以说两者有关系,又可以说没有关系。 两者有关系,那是程序和CSS布局都可以由一个人完成;没关系,是可以由不同人来完成。 程序是主要对数据处理、计算,比如表单数据交互数据、数字运算、...

名字已被取
2016/03/10
67
2
2014 年 15 款最棒的 HTML&CSS 框架

现在,我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表,跟我们分享你的看法吧:) CSS 框架 1) Toast Toast 是一款让所有设计都尽可能简单的 CSS 框架,但...

oschina
2014/01/15
16.7K
28
css的盒子模型

网页布局的本质就是把网页中的元素,例如文字。图片等放在一个盒子里,然后利用css来摆放盒子达成想要的效果,就是网页布局 css的三大模型 1.普通流 2.浮动 元素添加浮动以后,会自动转换成行...

邮币财富-张起荣
03/12
0
0
20个不错的CSS页面布局相关资源推荐

本篇文章搜集整理的是CSS页面布局的一个很长的列表。如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果。 ...

老枪
2011/06/22
14.6K
5
推荐 10 款 CSS 框架,网页设计就是这么简单

程序开发人员和网页设计人员掐架的事情常有听说,程序员们总是为自己设计不出来漂亮的网页而纠结。不再郁闷,因为开源帮了你,下面为你介绍11款相当不错的CSS框架,专心做程序吧,网页设计交...

小编辑
2011/05/20
22.7K
13

没有更多内容

加载失败,请刷新页面

加载更多

下单接口调优实战,性能提高10倍

概述 最近公司的下单接口有些慢,老板担心无法支撑双11,想让我优化一把,但是前提是不允许大改,因为下单接口太复杂了,如果改动太大,怕有风险。另外开发成本和测试成本也非常大。对于这种...

Sam哥哥聊技术
11分钟前
0
0
rabbitMQ的安装和配置

在Windows下进行rabbitMQ的安装 第一步:软件下载 在安装rabbitMQ之前,需要先安装Erlang。 Erlang官网:http://www.erlang.org/downloads rabbitMQ官网:http://www.rabbitmq.com/download....

狼王黄师傅
31分钟前
0
0
SAP产品的Field Extensibility

SAP开发人员的工作职责,除了实现软件的功能性需求外,还会花费相当的精力实现一些非功能性需求,来满足所谓的SAP Product Standard(产品标准)。这些产品标准,包含在SAP项目实施中大显身手...

JerryWang_SAP
36分钟前
0
0
Vue-Element-Upload

记录一下文件上传封装Js 代码示例 封装:uploadFile.vue <template> <el-upload v-model="attachment" ref="upload" class="upload-demo" :action="uploadUrl" ......

华山猛男
43分钟前
2
0
AWVS破解及使用手册

1.安装 因为是windows软件,比较简单,此部分略: 破解插件下载: 链接: https://pan.baidu.com/s/1x9LK9F3KvqDgTvXDjoSZnQ 提取码: 7k4u 2.创建扫描目标 2-1.Targets->Add Target 2-2.对话框...

硅谷课堂
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部