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

随机推荐

StringRedisTemplate操作Redis
在说到StringRedisTemplate操作Redis数据的时候,我们顺便谈谈StringRedisTemplate和RedisTemplate的区别. 一.StringRedisTemplate ...
AI VGG16
VGG(Visual Geometry Group) 16 参考链接: https://arxiv.org/abs/1409.1556
记一次 OutOfMemoryError: Java heap space 的排错
1.情况概述公司以前的某报名系统,项目启动后,在经过用户一段时间的使用之后,项目响应便开始变得极其缓慢,最后几乎毫无反应.日志里输出了一些似乎无关痛痒的异常,逐步修复,项目仍然出现这种情况,且 &q ...
JavaEE学习之Spring AOP
一.基本概念 AOP——Aspect-Oriented Programming,面向切面编程,它是spring框架的一个重要组成部分.一般的业务逻辑都有先后关系,我们可以理解为纵向关系,而AOP关注的 ...
CentOS 7 源码编译安装 Redis
1.下载源码并解压 wget http://download.redis.io/releases/redis-4.0.10.tar.gz tar -xzf redis-4.0.10.tar.gz cd ...
【Java并发.3】对象的共享
本章将介绍如何共享和发布对象,从而使他们能够安全地由多个线程同时访问.这两章合在一起就形成了构建线程安全类以及通过 java.util.concurrent 类库来构建开发并发应用程序的重要基础. 3 ...
Django signals 信号作用及用法说明
参考:https://docs.djangoproject.com/en/1.11/ref/signals/ 1.Model signals django.db.models.signales 作用于 ...
小P的金字塔
题目描述小P感到自己前几天太作了,于是非常有远见的决定为自己建立一座金字塔. 现在他有n种标准长方体的石头,每种石头只有两个,第i种石头是长宽高分别为Xi,Yi,Zi的长方体.由于整个工程只有小P一 ...
@RequestBody ajax 415 400
使用springmvc和Ajax进行数据交互时使用标签@RequestBody时我报了这两个错,刚开始对springmvc的使用和注解有点迷,然后踩坑上了. 先说下怎么才会踩上去.首先@Request ...
ACM-ICPC 2018 沈阳赛区网络预赛-I模拟题啊！！！
垃圾题,题目巨TM长...这题题意就是说给你一个16进制串,让你把每一位转成长度为4的2进制数,并把这些数连接起来,连接完成后,进行奇偶校验,把字符串切割成每个长度为9的字符串,然后计算前8位的 1的 ...

css进行网站布局

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

随机推荐

热门专题