`

css div 网页布局 左中右定宽居中

    博客分类：
  • css
css div 网页布局 左中右定宽居中 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css div 网页布局 左中右定宽居中</title>
<style type="text/css">
	*{ margin:0; padding:0;}
	.out{ height:300px; width:960px; margin:0 auto; background-color:#CCC;}
	.one{ width:200px; height:300px; background-color:#FC6; float:left; }
	.three{ width:200px; height:300px; background-color:#FC6; float:right;filter:alpha( opacity = 70, style = 2, finishopacity = 60);}
	.two{ height:300px; width:auto; background-color:#0080FF; float:left;}
	
</style>
</head>

<body>
<div class="out">
	<div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>
</html>
分享到：
| css div 网页布局 左右定宽，中间根据网页 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div中套用div的文本上下左右居中的css

    css：可以令层中层上下左右居中。（即：div之中的div的文本，上下左右居中显示）

    《精通CSS+DIV网页样式与布局》光盘源码

    　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典　 　...

    精通CSS.DIV.网页样式与布局 源码

    　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典...

    精通CSS+DIV网页样式与布局视频教材

    11.3　左中右版式 11.4　块的背景色问题 11.5　排版实例：电子相册 11.5.1　搭建框架 11.5.2　幻灯片模式 11.5.3　详细信息模式 11.6　div排版与传统的表格方式排版的分析 第12章　CSS+div美化与布局...

    css中position:fixed实现div居中上下左右居中

    实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看

    精通CSS+DIV网页样式与布局

    　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典　 　...

    精通CSS+DIV网页样式与布局Part1

    　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典　 　...

    css中position:fixed实现div在窗口上下左右居中

    实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例

    精通CSS.DIV网页样式与布局视频01

    　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 　第12章　CSS+div美化与布局实战　 　12.1　框架搭建　 　12.2　实例一：蓝色经典　 　...

    CSS网页布局：div水平居中的各种方法

    在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用...

    jquery实现div上下左右居中显示的js代码

    它可以判断外部div以及内部div的宽度高度，从而实现上下左右居中的目的，兼容主要浏览器 使用方法简单： 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...

    jquery.valign插件实现图片,文字上下左右垂直居中

    此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果，缺点是采用了部分css3样式，兼容性较差，相关链接：纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign，可...

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    CSS网站布局实录 （第二版）PDF版

    《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与重构的典范之作。 本书以实例为主,一步步地告诉大家如何进行符合Web 2.0标准的CSS布局设计...

    css实现图片垂直居中

    用CSS来实现img图片在DIV层中上下左右都居中，并且图片等比例缩放。很实用的

    设置一个层在浏览器中同时左右居中上下居中水平垂直居中

    想要使定义的一个层即能在浏览器中左右居中，又可以上下居中，可以用绝对定位再结合百分比形式的left、top属性以及负外补丁来实现。代码如下： css代码： 复制代码代码如下: div { position:absolute; top:50%; ...

    通过JavaScript使Div居中并随网页大小改变而改变

    以前的想法是通过CSS+Div使div居中，但是现在的想法变了，通过JavaScript可以简单的使Div在页面上居中，随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。 先看一下居中的原理吧...

    css中margin:0 auto居中问题深入探讨

    很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小...

Magicbox
Global site tag (gtag.js) - Google Analytics