用css3弹性布局做个手机版的百度怎么做？_百度知道
用css3弹性布局做个手机版的百度怎么做？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自电脑网络类芝麻团
采纳数：459
获赞数：621
参与团队：
下面我就和大家分享一下我自己的一些编辑技巧，仅供大家参考。 1.创建词条 一般情况下新创建的词条在百度或者搜搜百科上都能够被审核通过的，但是在文章中千万不要发一些无用的网址，特别具有软广告性质的网址，这是很难通过的，再者还要注意对比这两个网站的词条，如果百度没有词条，而搜搜里面有，那么我们可以将搜搜里面的词条进行简单的扩展，再发布到百度上，这样一般都能够通过的，相反我们也能够从百度里面的词条转到搜搜里面!这样能够大大提高创建词条的效率，同时也能够增加创建词条的通过率。 2.不要随意补充词条 有些人喜欢去将原有的词条进行补充，看起来能够提高审核通过率，而且需要补充的内容也不会很多，可是当你真正去补充的时候却发现这些补充后的词条反而不能够通过，甚至好几次都不会通过，而往往新创建的词条却容易通过，估计百度也是害怕某些人出现狗尾续貂的现象，所以对于补充的词条的审核会更加的严格。 3.一定要学会坚持 不管百度百科还是搜搜百科的词条审核那严格是没得说，毕竟要给别人带来权威性，如果不严格，阿猫阿狗的词条也往上面放，那不是垃圾百科了吗!所以我们如果要确定做百科词条的话，就要有那种准备审核不通过，而且还不是一次，一个词条的审核通过怎么的也得三四次吧，要有锲而不舍的精神，就像雷锋所说的钉子精神。 4.一个词条里面千万不要在不同的地方出现同一链接其实这一条只要有一次有过做词条的工作者都能够总结出来，这已经是非常低级的错误了，因为我们做词条主要做的是权威性，而宣传性只是顺带的，也就是植入式的，如果你在一个词条里面放上好几个，那不是明显的再告诉别人你是在做宣传吗?那还给你审核通过，想的别想，所以这一条的低级错误可千万不要犯。
为你推荐：
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。CSS 弹性盒子布局
CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。
循序渐进的讲解如何用此特性来建立布局。
讲解在 Web 应用的特定环境下如何应用弹性盒子。
Candidate Recommendation
初始定义。
浏览器兼容性
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Firefox (Gecko)
Internet Explorer
Firefox Mobile (Gecko)
Opera Mobile
Safari Mobile
文档标签和贡献者
此页面的贡献者：
最后编辑者:
Nov 17, :51 PM
电子邮件地址
我接受 Mozilla 按照所述的方式处理我的信息。
谢谢！请检查您的收件箱以确认您的订阅。
如果您以前未确认过订阅 Mozilla 相关的新闻简报，您可能必须这样做。请检查您的收件箱或垃圾邮件箱并找到我们发给您的电子邮件。
隐藏新闻报注册CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。
Basic support
(single-line flexbox)
21.0&-webkit-
18.0&-moz-
6.1&-webkit-
12.1&-webkit-
Multi-line flexbox
21.0&-webkit-
6.1&-webkit-
15.0&-webkit-
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意：&弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:
html&&html&&head&&style&
.flex-container
display: -webkit-flex;
background-color:
lightgrey;}
.flex-item
background-color:
cornflowerblue;
&/style&&/head&&body&
class=&flex-container&&
class=&flex-item&&flex
item 1&/div&
class=&flex-item&&flex
item 2&/div&
class=&flex-item&&flex
item 3&/div&
&/body&&/html&
当然我们可以修改排列方式。
如果我们设置&direction&属性为&rtl&(right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:
direction:
.flex-container
display: -webkit-flex;
background-color:
lightgrey;}
.flex-item
background-color:
cornflowerblue;
flex-direction
flex-direction&顺序指定了弹性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
以下实例演示了&row-reverse&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-direction:
row-reverse;
flex-direction:
row-reverse;
background-color:
lightgrey;}
以下实例演示了&column&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-direction:
flex-direction:
background-color:
lightgrey;}
以下实例演示了&column-reverse&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-direction:
column-reverse;
flex-direction:
column-reverse;
background-color:
lightgrey;}
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
效果图展示：
以下实例演示了&flex-end&的使用:
.flex-container
display: -webkit-flex;
-webkit-justify-content:
justify-content:
background-color:
lightgrey;}
以下实例演示了&center&的使用:
.flex-container
display: -webkit-flex;
-webkit-justify-content:
justify-content:
background-color:
lightgrey;}
以下实例演示了&space-between&的使用:
.flex-container
display: -webkit-flex;
-webkit-justify-content:
space-between;
justify-content:
space-between;
background-color:
lightgrey;}
以下实例演示了&space-around&的使用:
.flex-container
display: -webkit-flex;
-webkit-justify-content:
space-around;
justify-content:
space-around;
background-color:
lightgrey;}
align-items 属性
align-items&设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
以下实例演示了&stretch(默认值)&的使用:
.flex-container
display: -webkit-flex;
-webkit-align-items:
align-items:
background-color:
lightgrey;}
以下实例演示了&flex-start&的使用:
.flex-container
display: -webkit-flex;
-webkit-align-items:
flex-start;
align-items:
flex-start;
background-color:
lightgrey;}
以下实例演示了&flex-end&的使用:
.flex-container
display: -webkit-flex;
-webkit-align-items:
align-items:
background-color:
lightgrey;}
以下实例演示了&center&的使用:
.flex-container
display: -webkit-flex;
-webkit-align-items:
align-items:
background-color:
lightgrey;}
以下实例演示了&baseline&的使用:
.flex-container
display: -webkit-flex;
-webkit-align-items:
align-items:
background-color:
lightgrey;}
flex-wrap 属性
flex-wrap&属性用于指定弹性盒子的子元素换行方式。
flex-flow:
各个值解析:
nowrap&- 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap&- 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse&-反转 wrap 排列。
以下实例演示了&nowrap&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-wrap:
flex-wrap:
background-color:
lightgrey;}
以下实例演示了&wrap&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-wrap:
flex-wrap:
background-color:
lightgrey;}
以下实例演示了&wrap-reverse&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-wrap:
wrap-reverse;
flex-wrap:
wrap-reverse;
background-color:
lightgrey;}
align-content 属性
align-content&属性用于修改&flex-wrap&属性的行为。类似于&align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
各个值解析:
stretch&- 默认。各行将会伸展以占用剩余的空间。
flex-start&- 各行向弹性盒容器的起始位置堆叠。
flex-end&- 各行向弹性盒容器的结束位置堆叠。
center&-各行向弹性盒容器的中间位置堆叠。
space-between&-各行在弹性盒容器中平均分布。
space-around&- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
以下实例演示了&center&的使用:
.flex-container
display: -webkit-flex;
-webkit-flex-wrap:
flex-wrap:
-webkit-align-content:
align-content:
background-color:
lightgrey;}
弹性子元素属性
各个值解析:
&integer&：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
order&属性设置弹性容器内弹性子元素的属性:
.flex-item
background-color:
cornflowerblue;
{ -webkit-order:
order: -1;}
设置&margin&值为&auto&值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为&auto&，可以使弹性子元素在弹性容器的两上轴方向都完全集中。
以下实例在第一个弹性子元素上设置了&margin-right:&。 它将剩余的空间放置在元素的右侧：
.flex-item
background-color:
cornflowerblue;
.flex-item
margin-right:
完美的居中
以下实例将完美解决我们平时碰到的居中问题。
使用弹性盒子，居中变的很简单，只想要设置&margin:&可以使得弹性子元素在两上轴方向上完全居中:
.flex-item
background-color:
cornflowerblue;
align-self
align-self&属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
以下实例演示了弹性子元素上 align-self 不同值的应用效果：
.flex-item
background-color:
cornflowerblue;
min-height:
{ -webkit-align-self:
flex-start;
align-self:
flex-start;}.item2
{ -webkit-align-self:
align-self:
flex-end;}
{ -webkit-align-self:
align-self:
{ -webkit-align-self:
align-self:
baseline;}
{ -webkit-align-self:
align-self:
flex&属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit |
[ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
各个值解析:
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[&flex-grow&]：定义弹性盒子元素的扩展比率。
[&flex-shrink&]：定义弹性盒子元素的收缩比率。
[&flex-basis&]：定义弹性盒子元素的默认基准值。
以下实例中，第一个弹性子元素占用了 2/4 的空间，其他两个各占 1/4 的空间:
.flex-item
background-color:
cornflowerblue;
{ -webkit-flex:
{ -webkit-flex:
{ -webkit-flex:
CSS3 弹性盒子属性
下表列出了在弹性盒子中常用到的属性:
指定 HTML 元素盒子类型。
指定了弹性容器中子元素的排列方式
设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
设置弹性盒子的子元素超出父容器时是否换行。
修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-direction 和 flex-wrap 的简写
设置弹性盒子的子元素排列顺序。
在弹性子元素上使用。覆盖容器的 align-items 属性。
设置弹性盒子的子元素如何分配空间。
链接：http://www.runoob.com/css3/css3-flexbox.html
◆旧版本写法：
●IE浏览器不支持●其他浏览器需要加前缀
display:-webkit-
//设置弹性伸缩盒模型
1.-webkit-box-orient
//主要实现盒子内部元素...
box-fiex兼容性的写法
-webkit-box-flex : ;（Safari浏览器，chrome浏览器)
-moz-box-flex: ;（Firefox浏...
css3 弹性布局和多列布局弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。弹性盒子基础定义一个弹性盒子在父盒子上定义display属性：#bo...
思 考1、学会了弹性布局如何使用？
2、那些地方会用到弹性布局？
3、弹性布局在 Safari浏览器下的兼容性？弹性布局参考手册：阮一峰flex菜鸟css3-flex实现代码
菜鸟教程(r...
在CSS 3中，CSS Flexible Box模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。
虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用C...
弹性盒子（flexbox）
组成：弹性容器（Flex container）和弹性子元素（Flex
弹性容器（Flex container）：
display:flex|inli...
设置弹性盒子：
display: -webkit-
display: -webkit-
设置垂直排列：
-webkit-flex-flow: c...
两列宽度自适应布局
#left{ width:20%;
height:300 background-color: float:}
#right{ width...
CSS3中引入的弹性盒子布局已经有一段时间，也经历了几次比较重大的修改，可本人一直都没怎么使用过这种布局，惭愧万分！这几天研究了一下这种布局方式，记录一下学习笔记，以后日后用到时过来查看。
新版本的 Flexbox 模型，示例
没有更多推荐了，css3基础、（弹性、响应式）布局注意点
时间： 14:21:07
&&&& 阅读：260
&&&& 评论：
&&&& 收藏：0
E[attr]只使用属性名，但没有确定任何属性值
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的&?&不能不写
E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|=&value&]指定了属性名，并且属性值是value或者以&value-&开头的值（比如说zh-cn） 不能是词列表（如：dd b-leo或者dd b）
1、css3属性选择器
E:nth-child(n)
表示E的父级中的第n个子节点E
E:nth-child(odd){background:red}/*匹配奇数行*/
E:nth-child(even){background:red}/*匹配偶数行*/
标签 *:nth-child(n);/*找标签下第N个元素*/
E:nth-child(2n){background:red} /*n为0-无穷大
E:nth-last-child(n) 表示E父级中的第n个字节点，从后向前计算
E:nth-of-type(n)
表示E父级中的第n个字节点，且类型为E. E为这类集合，然后在集合中找第n的元素
E:nth-last-of-type(n)表示E父级中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E父级中的第一个子节点 =&nth-child(1)
E:last-child 表示E父级中的最后一个子节点 =&nth-last-child(1)
E:first-of-type 表示E父级中的第一个子节点且节点类型是E的 =&nth-of-type(1)
E:last-of-type 表示E父级中的最后一个子节点且节点类型是E的 =&nth-last-of-type(1)
E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
E:only-of-type 表示E的父级中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
2、css3结构伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
（如：div:target{ display:block;}）
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击、编辑的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时触发
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配,s通常是.类名如:(p:not(.cc))
E~F表示E元素毗邻的F元素
Content 属性,其常结合after、before使用。
3、css3伪类
direction:unicode-bidi:bidi-
文字排版（rtl右至左）
-webkit-text-stroke:3
white-space: 文字超出不换行
4、css3注意地方
1、弹性盒模型：
注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box
Box-orient 定义盒模型的布局方向
Horizontal 水平显示
vertical 垂直方向
box-direction 元素排列顺序
Normal 正序
Reverse 反序
box-ordinal-group 设置元素的具体位置（如1、2...）
Box-flex 定义盒子的弹性空间大小
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 对盒子富余的空间进行管理
Start 所有子元素在盒子左侧显示，富余空间在右侧
End 所有子元素在盒子右侧显示，富余空间在左侧
Center 所有子元素居中
Justify 富余空间在子元素之间平均分布
box-align 在垂直方向上对元素的位置进行管理
Star 所有子元素在据顶
End 所有子元素在据底
Center 所有子元素居中
2、盒模型阴影：
box-shadow:[inset] x y blur [spread] color
inset：内投影
不给：外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径(先扩展原有形状，再开始阴影)
3、其他盒模型新增属性：
box-reflect 倒影
方向 above(顶)|below(底)|left|
距离（可选）
渐变（可选）-webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%)
resize 自由缩放
Both 水平垂直都可以缩放
Horizontal 只有水平方向可以缩放
Vertical 只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用才可以缩放
box-sizing 盒模型解析模式
Content-box
标准盒模型
盒模型的宽高=border+padding+content(width|height)
Border-box 怪异盒模型 width/height=content
盒模型的宽高=width/height
Content的宽高=width/height-border-padding
4、Css3分栏布局：
column-width 栏目宽度
column-count 栏目列数
column-gap
column-rule
栏目间隔线
宽度、内容都是平均分配
5、css3弹性布局、分栏布局注意点、特性
响应式布局:
1、媒体类型
all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备（常用）
speech ‘听觉‘类似的媒体类型
tty 不适用像素的设备
条件同时成立
not关键字是用来排除某种制定的媒体类型
only用来指定某种特定的媒体类型
3、媒体特性
(max-width:600px)
(max-device-width: 480px)
设备输出宽度
(orientation:portrait)
(orientation:landscape)
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
4、样式引入方式（三种）
（1）、&link rel="stylesheet" type="text/css" href="styleA.css"
media="screen and (min-width: 800px)"&
（2）、@import url("css/reset.css")
（3）、@media screen [and 条件]{
属性：属性值；
5、样式引入举例
&link rel=&stylesheet& media=&all and (orientation:portrait)& href=&portrait.css&&
&link rel=&stylesheet& media=&all and (orientation:landscape)&href=&landscape.css&&
@media screen and (min-width:400px) and (max-width:500px) {.box {margin: 0}}
-----------------------------------------------------------------------------------
&link rel="stylesheet" type="text/css" href="styleA.css"
media="screen and (min-width: 800px)"&
&link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)"&
&link rel="stylesheet" type="text/css" href="styleC.css"
media="screen and (max-width: 600px)"&
-----------------------------------------------------------------------------------
6、移动端meta
&meta name="viewport" content="" /&
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
5、响应式布局及注意点
indexa.css代码如下：
@charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2 -webkit-column-count:4; -webkit-column-gap:30 -webkit-column-rule:1px solid #000;}
indexb.css代码如下：
@charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2 -webkit-column-count:2; -webkit-column-gap:20 -webkit-column-rule:1px solid #000;}
indexc.css代码如下：
@charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2}
具体实例1：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&无标题文档&/title&
&!--重要部分--&
&link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)"&
&link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)"&
&link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)"&
&div class="wrap"&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
具体实例2：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&无标题文档&/title&
&link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css"&
&link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css"&
&div class="wrap"&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
具体实例3：
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&无标题文档&/title&
@media screen and (min-width:800px) {
.wrap{border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2 -webkit-column-count:4; -webkit-column-gap:30 -webkit-column-rule:1px solid #000;}
@import url("indexc.css") screen and (min-width:400px) and (max-width:800px);
@media screen and (max-width:400px) {
.wrap{border:1px solid #000; font:16px/28px "宋体";color:#000; text-indent:2 -webkit-column-count:2; -webkit-column-gap:20 -webkit-column-rule:1px solid #000;}
&div class="wrap"&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
&p&按照淘宝首页的无缝图片切换做：第一张和最后一张复制，打开浏览器时ul的left是-520，然后走完最后一张，ul的left是-1040。这样实现无缝切换，我就是卡在这里了，它这么样实现到最后一个还是顺着到-1040，保证不是倒 ...&/p&
6、响应式布局实例
&!DOCTYPE HTML&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&无标题文档&/title&
@font-face {
font-family: ‘ff‘;
src: url(‘1-webfont.eot‘);
src: url(‘1-webfont.eot?#iefix‘) format(‘embedded-opentype‘),
url(‘1-webfont.woff‘) format(‘woff‘),
url(‘1-webfont.ttf‘) format(‘truetype‘),
url(‘1-webfont.svg#untitledregular‘) format(‘svg‘);
font-weight:
font-style:
#wrap{width:<span style="color: #margin:0 position:}
#wrap label{float:margin:<span style="color: #}
#wrap label span:nth-of-type(1){float:height:30background:#f60; font:14px/30px "宋体"; color:#padding:<span style="color: # transition:.3s;}
#wrap label span:nth-of-type(1):hover{ background:}
#wrap label i{ font:30px "ff"; padding:<span style="color: # vertical-align:}
#wrap label span:nth-of-type(2){ position:left:0;top:30border:1px solid #000;height:<span style="color: # opacity:0;z-index:1;padding:10 font:12px/24px "宋体";color:rgba(0,0,0,1);transition:2s;text-shadow:<span style="color: # 30px rgba(0,0,0,1); color:rgba(0,0,0,0);}
#wrap input{ position:top:-50}
#wrap input:checked~span:nth-of-type(1){background:}
#wrap input:checked~span:nth-of-type(2){ z-index:2;opacity:1; text-shadow:<span style="color: # 0 rgba(0,0,0,0); color:rgba(0,0,0,1);}
&div id="wrap"&
&input id="btn1" type="radio" name="btns" checked /&
&span&&i&0&/i&dddd简介&/span&
&span&ddddddddddd2542532ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd&br /&
目前主要针对的更多惊喜。&/span&
&input id="btn1" type="radio" name="btns" /&
&span&&i&1&/i&dddffd&/span&
&span&sfsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsdfsfsf&/span&
&input id="btn1" type="radio" name="btns" /&
&span&&i&2&/i&fdgfd&/span&
&span&sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf&/span&
&input id="btn1" type="radio" name="btns" /&
&span&&i&3&/i&sfdsf&/span&
&span&sfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsfsfdsf fffdsf&/span&
7、css3伪类(结合：checked伪类实现鼠标单击切换效果)实例
&标签：原文地址：http://www.cnblogs.com/codc-5117/p/5596947.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！}