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

随机推荐

java HttpServletRequest 重复流读取
在用reset接口的时候,常常会使用request.getInputStream()方法,但是流只能读取一次,一旦想要加上一个过滤器用来检测用户请求的数据时就会出现异常. 在过滤器中通过流读取出用 ...
IDEA+提示“Cannot resolve symbol XXXX”
问题描述:鼠标放置下图中红色包上提示“Cannot resolve symbol XXXX”信息解决: File->Invalidate Caches/Restart 清除缓存并重启 idea
Egg入门学习(二)---理解service作用
在上一篇文章 Egg入门学习一中,我们简单的了解了Egg是什么东西,且能做什么,这篇文章我们首先来看看官网对Egg的整个框架的约定如下,及约定对应的目录是做什么的,来有个简单的理解,注意:我也是按照 ...
mongo固定集合
固定集合:事先创建,大小固定类型于环形队列,空间不足队列头文件被替换不能手动删除文档,只能自动替换 db.ceateCollection("COLLECTION_NAME",{ ...
OGC标准服务 WMS WCS WFS WPS
网络覆盖服务 (WCS) 网络要素服务 (WFS) 网络地图服务 (WMS) 网络地图切片服务 (WMTS) 网络处理服务 (WPS) 1.Web 地图服务(WMS)能够根据用户的请求返回相应的地图( ...
在ASP.NET Core MVC中子类Controller拦截器要先于父类Controller拦截器执行
我们知道在ASP.NET Core MVC中Controller上的Filter拦截器是有执行顺序的,那么如果我们在有继承关系的两个Controller类上,声明同一种类型的Filter拦截器,那么是 ...
A2D Framework - 看如何精简业务逻辑 - 缓存子系统
A2D中一项功能是关于Cache的,能够将判断.获取.删除cache的代码缩减到最少量,如下是Order业务逻辑的demo示范: interface IOrder { [Cachable()] str ...
prometheus排错
1.导入grafana模板后node-export某些图像无法获取到data: 解决:导入grafana 模板是需要看node-export 版本是否与模板要求的一致,不同版本的node-export ...
009-定时关闭弹出广告窗口 By BoAi 20190414
;~ 定时关闭弹出广告窗口 By BoAi 20190414 ; ### 参数设置段 ######################################SingleInstance,forc ...
python札记
进制转换 num = "0011"v = int(num, base=16)print(v)2->16

css进行网站布局

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

随机推荐

热门专题