文档章节

利用CSS进行网页布局

上古遗露
 上古遗露
发布于 2015/12/13 23:39
字数 661
阅读 85
收藏 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>

效果:


上古遗露
粉丝 8
博文 56
码字总数 42929
作品 0
苏州
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
664
1
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
JavaScript 服务器页--JSSP

JSSP (JavaScript Server Pages) 可以让你在 Java 的应用服务器上使用 JavaScript 生成网页。支持已有的 Java 包和嵌入式 SQL 命令。包含 Dervish 这个 JavaScript 交互操作包用于简化 Ajax...

匿名
2013/02/11
3.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

Azure Application Gateway(一)对后端 Web App 进行负载均衡

一,引言   今天,我们学习一个新的知识点-----Azure Application Gateway,通过Azure 应用程序网关为我么后端的服务提供负载均衡的功能。我们再文章头中大概先了解一下什么是应用程序网关...

osc_lc4icfkt
10分钟前
0
0
WoLai(我来) 注册码 ——国内版 notion 【笔记】

注册码: SQGYG23 ❤ W4T9PKP JLTHNJP KMTXK7P JDHKJEM KRJXX5P 6M7PPAP DEGLMG3 N3BZMRI 87BR22I GSIWGWP GNGBNTI QA8URIM UDUV9VM IHKJA7P MD9ZA3M 3XR67ZI TBUP9JX TI4TYMM 注册完了可以把......

osc_c05lkk3u
11分钟前
4
0
2020hdu多校第二场比赛及补题

这一场我们队只A了一题 1010 Lead of Wisdom 直接爆搜,但是T了好几发,剪了下枝 如果一个物品的a,b,c,d都比不上另外一个同种物品的a,b,c,d,那这个物品就可以直接淘汰掉了 #include<iostrea...

osc_usgpahnw
12分钟前
13
0
为什么Java有瞬态字段? - Why does Java have transient fields?

问题: 为什么Java有瞬态字段? 解决方案: 参考一: https://stackoom.com/question/3opS/为什么Java有瞬态字段 参考二: https://oldbug.net/q/3opS/Why-does-Java-have-transient-fields...

富含淀粉
12分钟前
0
0
轻松搭建CAS 5.x系列(6)-在CAS Server上增加OAuth2.0协议

概述说明 CAS Server默认搭建出来,客户端程序只能按照CAS自身的协议接入。CAS的强大在于,有官方的插件,可以支持其他的协议。本章节就让CAS Server怎么增加OAuth2.0的登录协议。 安装步骤 ...

osc_inj0cicw
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部