标签归档:页面布局

css页面布局,js页面布局

不定宽的浮动元素水平居中,纯Css解决方案

最常见的一个需求就是一排翻页按钮要水平居中显示,而且按钮数量不固定,导致总体宽度不固定,看代码,看效果图吧。。。

效果图:

不定宽的浮动元素水平居中,纯css解决方案

css:

.box {
		width:100%;
		height: 26px;
		background:#fff;
		border-bottom:4px solid #000;
}
.box ul {
		float:left;
		list-style:none;
		position:relative;
		left:50%;
		margin:0;
		padding:0;
}
.box ul li {
		display: block;
		float: left;
		list-style: none;
		position: relative;
		right: 50%;
		margin: 0;
		padding: 0;
}
.box ul li a {
		display: block;
		background: #ddd;
		color: #000;
		text-decoration: none;
		line-height: 20px;
		margin: 0 0 0 1px;
		padding: 3px 10px;
}
.box ul li a:hover {
		background:#369;
		color:#fff;
}

html:

<div class="box">
    <ul>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <a href="#">2</a>
        </li>
        <li>
            <a href="#">3</a>
        </li>
        <li>
            <a href="#">4</a>
        </li>
        <li>
            <a href="#">5</a>
        </li>
        <li>
            <a href="#">6</a>
        </li>
        <li>
            <a href="#">7</a>
        </li>
        <li>
            <a href="#">8</a>
        </li>
   </ul>
</div>

不确定尺寸图片及多行文字实现垂直居中和水平居中

本方法思路源自淘宝UED博客,略做改动,同时拓展到多行文字的垂直居中

css代码:

.box {
    width: 400px; 
    height: 400px; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #eee; 
    /* hack for ie */ 
    *float: left;
    *display: block;
    *font-size: 350px; 
    /* end */ 
} 
.box img { 
    *vertical-align: middle; 
}
.box span {
    *vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
}

html代码:

<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>
<div class="box">
    <span>我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进,我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进</span>
</div>

效果图:

图片垂直居中

注:

  1. 由于在高级浏览器下按display:table-cell;解析,所以外层div会以行级标签展示,所以在ie hack中添加*float:left;以在IE中实现相同效果
  2. 其中在IE下以font-size做为hack方式,其中height与*font-size的比为8/7,约等于1.14
  3. 针对多行文字垂直居中需要为内标签定义font-sizeline-height属性

CSS盒模型全面讲解,怪异模式盒模型,CSS3 box-sizing属性

今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况,盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)

首先定义一个div块用来演示标准模式和怪异模式的区别,以下是Css样式

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

标准模式下的盒模型如下图所示,盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

标准模式盒模型

在怪异模式下的盒模型如下图所示,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识,下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box,另一个是border-box。

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;

当设置为box-sizing:border-box时,将采用怪异模式解析计算;

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

什么是CSS3 Media Queries?如何利用Media queries开发响应式页面?最详解!

Media Queries 介绍:

Media Queries 是CSS3属性,它可以让你针对不同的终端(例如不同分辨率的屏幕)应用不同的css样式,例如通过Media Queries你可以为移动端设置特有的样式,也可以设置打印版特有的样式。

基本用法介绍:

// 常规样式
#header-image {
    background-repeat: no-repeat;
    background-image:url('image.gif');
}

// 针对大号屏幕设置大号背景图
@media screen and (min-width: 1200px) {
    #header-image {
        background-image:url('large-image.gif');
    }
}

// 针对打印版隐藏头部的图片
@media print {
    #header-image {
        display: none;
    }
}

同样你也可以这样使用:

<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />

这种用法的优势是浏览器只会加载用到的css样式表,所以print.css只会在打印预览页面被加载

因为这种方式采用串联的方式,所以没有被重写的样式依然生效。

举例如下:

#block1, #block2 { 
    float: left; 
    width: 100%; 
} 

@media (min-width: 1000px) { 
    #block1, #block2 { 
        width: 50%; 
    } 
}

例子展示的是在大屏幕的时候block1和block2是并列摆放的,而在小于1000px的屏幕时会改为上下摆放,因为float:left;一直保持生效

浏览器支持情况:

所有的现代浏览器都支持 Media Queries,ie9往上支持,所有现代移动端浏览器都支持包括Blackberry 7.0和10.0

Media Queries特性:

Media Queries有个最大的优点就是可以实时监听屏幕变化,好处就是开发响应式页面的时候不用准备各种各样的终端,只需要拉动浏览器改变可视区域大小即可,页面会实时响应!

注:0101后花园就采用了响应式模板,你可以改变浏览器大小试试看,很神奇哦~

支持的媒体类型:

all:All devices listen to this
braille:Used for braille tactile feedback devices.
embossed:Used for paged braille printers.
handheld:Used for handheld devices (Smartphones and tablets do NOT listen to this!).
print:Used for paged material and for documents viewed on screen in print preview mode.
projection:Used for projected presentations, for example projectors.
screen:Used primarily for color computer screens and smartphones.
speech:Used for speech synthesizers.. (Whatever that may be)
tty:Used for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv:Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).

支持的CSS表达式:

width:The width of the current window
height:The height of the current window
device-width:The width of the device
device-height:The height of the device
orientation:Either landscape or portrait
aspect-ratio:The aspect ratio of the current window
device-aspect-ratio:The aspect ratio of the device
color:The number of color bits per color component
color-index:The number of available colors on the device
monochrome:The number of bits per pixel in a monochrome frame buffer
resolution:The resolution of the device
scan:Eiter progressive or interlace
grid:Is the device grid-based?

附上:CSS3在线手册

附上:响应式页面演示站

div+css自适应3列布局,两侧列定宽,中间宽度自适应

本文讲解的是两侧列定宽,中间宽度自适应布局

这种布局有以下几个难点:

  1. 如题,左侧一列定宽200px,右侧一列定宽300px,中间主体区块宽度自适应
  2. 处于页面优化考虑,应先加载中间主体区块再依次加载左右侧两列列,所以中间主体区块div要写在左右侧两列区块div前面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.left,.right {
    height: 300px;
    font: bolder 20px/300px '微软雅黑';
    color: #fff;
    text-align: center;
}
.main {
    width: 100%;
    float: left;
}
.main .content {
    margin: 0 300px 0 200px;
    background-color: black;
}
.left {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 300px;
    float: left;
    margin-left: -300px;
    background-color: blue;
}
</style>
</head>
<body>
<div class="main">
    <div class="content">中间主体区块宽度自适应</div>
</div>
<div class="left">左列定宽200px</div>
<div class="right">右侧定宽300px</div>
</body>
</html>

最终效果图:

div+css自适应3列布局,两侧列定宽,中间宽度自适应

相关链接:

div+css自适应两列布局,一列定宽,一列自适应

 

div+css自适应两列布局,一列定宽,一列自适应

本文讲解的是左侧一列定宽,右侧主体宽度自适应布局

这种布局有以下几个难点:

  1. 如题,左侧一列定宽200px,右侧主体区块宽度自适应
  2. 处于页面优化考虑,应先加载右侧主体区块再加载左侧定宽列,所以右侧主体区块div要写在左侧定宽区块div前面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.main,.sitebar {
    height: 300px;
    font: bolder 20px/300px '微软雅黑';
    color: #fff;
    text-align: center;
}
.main {
    width: 100%;
    float: left;
}
.main .content {
    margin-left: 200px;
    background-color: red;
}
.sitebar {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
    <div class="content">右侧主体自适应区块</div>
</div>
<div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

最终效果图:

div+css自适应两列布局,一列定宽,一列自适应

 

相关链接:

div+css自适应3列布局,两侧列定宽,中间宽度自适应