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 ...

随机推荐

APP耗电量测试
现象 APP耗电,导致电池续航能力不佳,如下图,在小米MIX2和iPhone X机型上后台静默一小时各应用的耗电排行: 基本概念相对于PC来说,移动设备的电池电量是非常有限的,保持持久的续航能力尤为 ...
mybatis之一对多
今天主要话题围绕这么几个方面? mybatis一对多示例 sql优化策略一.mybatis之一对多在说一对多之前,顺便说一下一对一. 一对一,常见的例子,比如以常见的班级例子来说,一个班主任只属于 ...
Flink知识点
1. Flink.Storm.Sparkstreaming对比 Storm只支持流处理任务,数据是一条一条的源源不断地处理,而MapReduce.spark只支持批处理任务,spark-streami ...
flask 更新数据库
在做项目的过程中,我们都遇到过,经常需要修改我们数据库的字段,在flask中,是通过ORM(对象关系映射)来创建数据库的,表--->model class,字段---->属性在flask ...
Mysql安装（Ubuntu）
卸载方法一: --删除mysql的数据文件 sudo rm /var/lib/MySQL/ -R --删除mysql的配置文件 sudo rm /etc/mysql/ -R --自动卸载mysql(包 ...
Leetcode 2. Add Two Numbers(medium)
You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...
H5 字体属性补充
04-字体属性补充 abc我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
AtCoder Beginner Contest 053
D - Card Eater Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement Snuke h ...
UnderWater+SDN论文之三
Software-Defined Underwater Acoustic Modems: Historical Review and the NILUS Approach Source: IEEE J ...
iOS--LaunchImage启动页设置及问题解决
在Assets.xcassets中使用LaunchImage来设置启动图: 一.根据不同屏幕尺寸的需求设置不同的图片,可以参照下图: 1.点击Image.xcassets 进入图片管理,然后右击, ...

css进行网站布局

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

随机推荐

热门专题