如何通过css控制内容显示顺序 第二行的内容优先显示

  我们有时进行网页设计时为了想让用户感兴趣的内容优先显示在前,又不想改动代码的先后顺序,要怎么操作呢?(或者换种说法:源代码中要先看到A再看到B,而视觉上是先B再A)举个简单的例子,想让第二行的内容在不改动代码的情况在视觉上显示在第一行。如图,左图是正常显示,想让它们对换一下顺序,像右图一样展示出来。

 

  我们可以通过div+css的形式来定义

  css中position的absolute(绝对)和relative(相对)两个参数,我们将上面右图的css作如下定义:

.bock1 { width:300px; height:100px; background:#ffcccc;position:relative; margin-top:100px;}
.bock2 { width:300px; height:100px; background:#65b6be;position:absolute;top:0;}

  保存,刷新一下页面试试,是不是你想要看到的效果了?

时间: 2024-10-26 06:55:30

如何通过css控制内容显示顺序 第二行的内容优先显示的相关文章

css应用样式的顺序-CSS应用层次及顺序的问题

问题描述 CSS应用层次及顺序的问题 本人的代码如下 : asp:gridview -- asp:gridview <div class="goto"> <a href="BasicData.aspx">基础信息维护</a> </div> 问题如下图: ![图片说明](http://img.ask.csdn.net/upload/201508/15/1439639940_44076.png) ![图片说明](http:

solr 满足条件的数据优先显示

问题描述 solr 满足条件的数据优先显示 solr 满足条件的数据优先显示,求高手指点~~~~版本是3.4的 假如搜索出的结果里面包含20个班的数据,优先显示本班的.

CSS控制的内容超过容器宽度后显示省略号

css|控制|显示 一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可以达到同样的效果,虽然不完美. li {    width:50px;    white-space:nowrap;    text-overflow:ellipsis;    overflow: hidden;    } 首先是一个容器,可以是div,li,td等等,先定义宽度,"white-space:nowrap"是强制在一行内显示所有文本,不回行.&q

CSS控制文字的显示与隐藏引出的BUG

css|控制|显示 这一段CSS代码相当简单,目的就是想用CSS来控制某段文字的显示与隐藏.起初我采用了下面的代码,令人不可思议的是,它们在我的IE6.0上居然没有任何反应,大家不信可以亲自试验一下. <style type="text/css">a {font-size:12px;text-decoration:none;height:50;}a:hover {text-decoration:none;}a span {font-size:12px;display:non

CSS控制 如何让12px以下的文字正常显示

css|控制|显示 在网页中如何让大小为12px以下的文字正常显示可以有很多方式,例如 NT 系统支持这样的: 11px 运行代码框 <style by tesion.>p{font: 11px tahoma}</style><p>tahoma font style, size 11px. 中文字体 </p>   [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 中文运行代码框 <style by tesion.>p{font: 1

网页设计中如何让CSS控制网页背景?

css|控制|设计|网页|网页背景|网页设计 在符合标准的网页设计中如何用CSS控制网页的背景呢?包括背景的颜色,背景的图片等一些问题,在本教程中一次给你讲清楚. ·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的.这个的默认值是transparent(透明色). 例:body{background-color:yellow}H1{background-color:#000000} ·背景图片 backgr

CSS规则的执行顺序(转)

你对CSS规则的执行顺序是否了解,这里和大家分享一下,若两条规则具有相同的权值.起源及特殊性,那在样式表中最后出现的规则优先. 1.CSS规则之特殊性 首先来看一下这个例子将会发生的情形: <style type="text/css"> .grape { color: Blue; } H1 { color: Red; } </style> <h1 class="grape"> Meerkat <em>Central &

CSS实例教程;使用:before和:after插入内容

文章简介:我们使用:before来在元素的前面插入内容,使用:after在元素的后面插入内容(兼容浏览器:firefox.chrome.safari.opera.ie8+). 在css中,我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容. 从css2.0添加这两个伪元素选择器到css2.1到现在的3.0,都不断的在对这两个选择器进行改良和扩展. 首先,我们来看一下,在css2中,我们如何来插入内容(ie6 7不在考虑范围之内,因

运筹帷幄 用CSS控制网站总“队形”

css|控制 网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性.网页背景色以及链接文字属性等等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果. 为了达到修改整个网页的目的,我们需要编辑一个外挂式的CSS文档.根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它. 整体改变页面风格 现在网页中流行宋体的9pt和10.5pt的字体,按快捷键"Shift+F11"打开"CSS Style控制面板&