css进行网站布局

一、一列布局（例如百度首页）

　　通常用　　{margin:0 auto;}　　控制。

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>一列布局</title>

<style type="text/css">

    body{ margin:0; padding:0; font-size:30px}

    div{ text-align:center; font-weight:bold}

    .main,.footer{ width:960px; }

    .head{ width:100%; height:100px; background:#ccc}

    .main{ height:600px; background:#FCC;margin:0 auto;}

    .footer{ height:50px; background:#9CF;margin:0 auto;}

</style>

</head>

<body>

    <div class="head">head</div>

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

    <div class="footer">footer</div>

</body>

</html>

二、两列布局

　　通常用　　{float:left/right}　　控制。

<!DOCTYPE >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>二列布局</title>

<style type="text/css">

    body{ margin:0; padding:0; font-size:30px; font-weight:bold}

    div{ text-align:center; line-height:50px}

    .main{ width:960px; height:600px; margin:0 auto}

    .left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/

    .right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/

</style>

</head>

<body>

<div class="main">

    <div class="left">left</div>

    <div class="right">right</div>

</div>

</body>

</html>

三、三列布局

　　使用　　{position:absolute;}　　控制。

　　1.通常设置宽度为%即可；如：

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>margin</title>

<style type="text/css">

    body{margin:0;padding: 0;}

    .main{width: 100%;margin: 0 auto;}

    .left{width: 33.33% ;height: 500px;background-color: #ccc; float: left;}

    .middle{height: 33.33%;background-color: #999;float: left;}

    .right{width: 33.33%;height: 500px;background-color: #ddd;float: left;}

</style>

</head>

<body>

<div class="main">

    <div class="left">200px</div>

    <div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮近平滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝近轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div>

    <div class="right">300px</div>

</div>

</body>

　　2.特殊情况，左右两列宽度固定，中间一列宽度自适应，代码如下：

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>margin</title>

<style type="text/css">

    body{margin:0;padding: 0;}

    .main{width: 100%;margin: 0 auto;}

    .left{width: 200px ;height: 500px;background-color: #ccc;position: absolute;left: 0;top: 0;}

    .middle{height: 500px;background-color: #999;margin: 0 300px 0 200px;}

    .right{width: 300px;height: 500px;background-color: #ddd;position: absolute;right: 0;top: 0;}

</style>

</head>

<body>

<div class="main">

    <div class="left">200px</div>

    <div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮近平滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝近轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div>

    <div class="right">300px</div>

</div>

</body>

四、混合布局

　　在上面三种布局的基础上进行分割即可；

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>布局</title>

<style type="text/css">

    body{margin:0;padding: 0;}

    .top{height: 100px;background-color: blue;}

    .header{width: 800px ;height: 100px;background-color:#f60;margin: 0 auto;}

    .main{width: 800px;height:600px;background_color:#ccc;margin: 0 auto;}

    .left{width: 200px ;height: 600px;background-color:yellow;float: left;}

    .right{width: 600px;height: 600px;background-color: #369;float: right;}

    .sub_left{width:400px;height: 600px;background-color:green;float: left;}

    .sub_right{width:200px;height: 600px;background-color:#09f;float: right;}

    .footer{width: 800px;height:100px;background-color: #900;margin: 0 auto;}

</style>

</head>

<body>

<div class="top">

    <div class="header">header</div>

</div>

<div class="main">

    <div class="left">left</div>

    <div class="right">

        <div class="sub_left">sub_left</div>

        <div class="sub_right">sub_right</div>

    </div>

</div>

<div class="footer">footer</div>

</body>

css进行网站布局的更多相关文章

HTML 5+CSS 3网站布局应用教程 (赵振方) 随书光盘
<HTML5+CSS3网站布局应用教程>全面介绍HTML 5与CSS 3进行Web设计的知识.全书由16章组成.主要内容包括:主流浏览器对HTML 5的支持情况.HTML 5与HTML4在 ...
《CSS网站布局实录》学习笔记（一）
今天开始,认真学习前端技术,哈哈哈~~~加油~~~ 推荐这本<CSS网站布局实录>(第2版)给初级入门选手,虽然这本书年代有点久远,不过很经典. 注明一下:这里讲述的CSS均为CSS 2. ...
全新的css网站布局--Grid布局
Grid布局全新的css网站布局 CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格),items 是 grid( ...
12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
PHP.3-DIV+CSS标准网页布局准备工作（上）
DIV+CSS标准网页布局准备工作(上) 概述使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论前段时间领导 ...
运用CSS改进网站设计的3个技巧
CSS是一种分离表述编码和实际内容的一种最有用的方式,也是一种使搜索引擎最优化的方式,通常,网站设计中会建立一整套的css样式标准,这些标准存储在一个扩展名为css的单独文件中.然后利用HTML标签设 ...
CSS的flex布局(转载)
我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...
CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

随机推荐

scipy 安装错误及解决
pip 安装 scipy 时,因为是编译安装,所以如果缺少一些编译库,会报很多错误,以下总结可能缺失的安装包: sudo apt-get install gfortran sudo apt-get i ...
Bootstrap学习（一）：Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
odoo10学习笔记
odoo的API: Odoo新API的介绍与应用: odoo新api的实现是借助于python装饰器.新API的装饰器主要有以下几种: model,multi,one,constrains,depen ...
OPPO Developers Conference（2018.12.26）
时间:2018.12.26地点:北京国家会议中心
Python_列表推导式_生成器的表达式_各种推导式_40
列表推导式: #列表推导式: egg_list = [] for i in range(10): egg_list.append('鸡蛋%s'%i) print(egg_list) egon egg_ ...
A4纸尺寸 web打印报告
A4纸对应的像素尺寸: <style> @media print { .Noprn{ display:none;} .print-hidden { display: none !impor ...
详解ES5和ES6的继承
ES5继承构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承基本思想:利用原型让一 ...
论学习IT的基本学习方法
学习还是要通过实践总结这种方式去不断进步,当然这个思想对于生活中的任何事都是相通的,就像我现在做的就是总结一下自己的学习方法,更多的是针对于IT代码这块知识的总结. 我想通过这种博客总结的方式来不断总 ...
p86商空间也是Banach空间
1.为什么要引入Zk? 2.为什么这个等式成立,和为什么要引入uk? 3.为什么为什么等于0? 属于M,则商空间是0元,p128最上面的第二个笔记
在java中怎样获得当前日期时间
Calendar cal = Calendar.getInstance(); java.text.SimpleDateFormat sdf = new SimpleDateFormat(&quo ...

css进行网站布局

css进行网站布局的更多相关文章

随机推荐

热门专题