如何通过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;}
保存,刷新一下页面试试,是不是你想要看到的效果了?
如何通过css控制内容显示顺序 第二行的内容优先显示的更多相关文章
- 在Linux的Terminal中显示文本文件特定行的内容
假设要操纵的文本文件的文件名是 textFile现在想做的事情是在不以编辑模式打开文件的情况下在终端直接提取并输出指定文本文件的指定行的内容 在终端提取指定文本文件的指定行的内容 Tool Comma ...
- Linux上查看大文件的开头几行内容以及结尾几行的内容
head -n 50 filePath 查看开头50行的内容 tail -n 50 filePath 查看文件结尾50行的内容
- css控制同一个页面的两个表格,一个显示有边框线,而另一个没边框线
不显示边框的:<table border="0" cellspacing="0" cellpadding="" ><tr ...
- css控制文本单行或者多行溢出显示为省略号...
p:first-child { background-color: pink; width: 150px; line-height: 28px; font-size: 20px; overflow: ...
- CSS小技巧-怎样让每行多余的文字显示文省略号?
1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis
- html div内第二行文字显示不下的时候才用省略号代替 css实现
有时候文字太多,但为了美观想要在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号 下面是css代码: overflow:hidden;text-overflow: ellipsis;//显示 ...
- CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
- CSS控制XML与通过js解析xml然后通过html显示xml中的数据
使用CSS控制XML的显示 book.css bookname{ display:block;color:Red} author{ display:block;font-style:italic} p ...
- css控制英文内容自动换行問題
css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...
随机推荐
- MATLAB importdata函数返回值类型
importdata函数是MATLAB中I/O文件操作的一个重要函数.需要注意的是,针对不同的文件内容,importdata函数的返回值类型也有所不同. MATLAB帮助文档中的详细说明如下: Bas ...
- JavaScript写选项卡
方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- flume+kafka (分区实现 默认单分区) (二)
这篇文章主要在上一篇文章的基础上讲一下 如何自定义flume到kafka的分区 上一节中从下面的地址下载了一个源码 https://github.com/beyondj2ee/flumeng-kafk ...
- 自定义textbox加入左右晃动效果
应用开发过程中经常会要求用户在textbox进行输入.例如:登陆,发布. 而一般没进行输入的时候我们都会简单的进行弹窗提示用户输入. 前阵子ios的同学搞了一个左右晃动的效果,觉得还不错,于是也搞了个 ...
- SP避免Form重复提交的三种方案
SP避免Form重复提交的三种方案 1) javascript ,设置一个变量,只允许提交一次. <script language="javascript"> ...
- 【风马一族_Android】让app上传到Android市场的网站介绍
豌豆荚 开发者中心 http://open.wandoujia.com/account/info China app http://www.chinaapp.org
- 《DNS加密更新》RHEL6
DNS加密更新: 继DNS更新之后,现在又玩DNS加密更新,差不多. DNS更新指定一台主机,那台主机或多台主机来更新它,其他主机没权限. DNS加密更新,谁有密码说就可以更新. 做过上次的更新之后, ...
- jquery循环table中tbody的tr中input:text,将值进行拼接传入控制器并返回状态和描述
引用jquery $(function(){ $("#按钮id").click(function(){ var nums="";//变量 $("#ta ...
- AngularJS(14)-动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!DOCTYPE html> &l ...
- ios 录音
http://code4app.com/ios/%E5%BD%95%E9%9F%B3%E5%92%8C%E6%92%AD%E6%94%BE/51ba821b6803fa6901000000