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

随机推荐

Spring Security（二十八）：9.4 Authentication in a Web Application
Now let’s explore the situation where you are using Spring Security in a web application (without we ...
HTTP协议、HTTP请求方法、常见状态码、HTTP消息
HTTP协议客户端请求,服务端响应.浏览器与服务器不建立持久连接,响应后连接失效. HTTP请求方法一.GET GET方法用于获取请求页面的指定信息. 二.HEAD 除了服务器不能在响应里返回消息 ...
python魔法方法、构造函数、序列与映射、迭代器、生成器
在Python中,所有以__双下划线包起来的方法,都统称为"魔术方法".比如我们接触最多的__init__,魔法方法也就是具有特殊功能的方法. 构造函数构造函数不同于普通方法,将 ...
C语言中__attribute__ ((at())绝对定位的应用
C语言中的关键字__attribute__ ,当时大一学C语言中没有接触过,后来工作中搞RFID的蓝牙标签卡开发,用的是MSP430G2332,直接用的是绝对定位: 1 const uint8_t f ...
UVA - 10931-Parity
题意:1.输入一个数,将其转换为二进制.2.记录二进制中出现1的次数. 注意:转换二进制后直接输出,不能转换为十进制后输出 #include<iostream> #include<c ...
编剧小记 — Contour
前言 Contour 是一款比较优秀的编剧辅助软件,按理说这篇文章应该归类到mac小记中,但其操作非常简单,基本上以写作提示为主.只怪所有提示都是英语,而且很多,每次使用打开 Contour 个别单词 ...
一次Java内存泄露处理手记
现象最近项目组从NET平台迁移到Java的Dubbo平台上,由于大家都是Java的生手,发生了蛮多的问题,以后一一记录.现在解决一个遇到的关于Java程序内存泄露的问题. 特别说明 Java萌新,理 ...
微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
ORM简介单表添加修改删除表记录
---------------------------------------------------------------目标既定,在学习和实践过程中无论遇到什么困难.曲折都不灰心丧气,不轻易改变 ...
Linux常见问题汇总
Linux问题: ifconfig查看IP地下载报错:bash: ifconfig: commandnotfound 解决方法: 先执行 export PATH="$PATH:/sbin&q ...

css进行网站布局

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

随机推荐

热门专题