文档章节

利用CSS进行网页布局

上古遗露
 上古遗露
发布于 2015/12/13 23:39
字数 661
阅读 17
收藏 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
苏州
私信 提问
通过JS+DIV+CSS排版布局实现选项卡效果

CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。   CSS目前最新版本为CSS3,是能够真正做到...

青衣霓裳
11/15
0
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
17K
28
20个不错的CSS页面布局相关资源推荐

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

老枪
2011/06/22
14.8K
5
css的盒子模型

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

邮币财富-张起荣
03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数字3为分隔

http://www.fly63.com/article/detial/221

西园里的猫
17分钟前
2
0
文本处理工具 grep awk sed完全解读

文本处理工具 grep awk sed完全解读 正则表达式单字符 1特定字符 : 某个具体的字符 'a' 2范围内字符 : [a-zA-Z] 3任意字符 : . // grep . file // 如果点放到中括号中[.] 或者用反斜杠'\.' ...

BakerZhu
17分钟前
2
0
Centos 7 JDK、Tomcat9 安装并配置

Centos 7 JDK、Tomcat9 安装并配置 我是一座离岛 关注 2017.04.10 08:16* 字数 699 阅读 3442评论 0喜欢 1 一、JDK 安装 1.安装wget yum -y install wget 2.下载,输入指令 wget --no-chec...

linjin200
24分钟前
1
0
Spring boot遇到的问题

2018年12月11日 Ver:2.0.2升级到2.1.1文件上传遇到问题 The method setMaxFileSize(String) from the type MultipartConfigFactory is deprecated 是不是就不用设置了?...

夏碌冬藏
32分钟前
1
0
Spark sql操作Hive

这里说的是最简便的方法,通过Spark sql直接操作hive。前提是hive-site.xml等配置文件已经在Spark集群配置好。 val logger = LoggerFactory.getLogger(SevsSpark4.getClass) def main(args:...

守望者之父
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部