看似简单的问题其实不简单-阿里云开发者社区

开发者社区> lzhdim> 正文

看似简单的问题其实不简单

简介: 使用CSS以后,读者会发现很多原来使用表格布局非常小儿科的问题,都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。 具体标题-1More 也就是在一行中,一个标题文字居左,又端放置另一个文字,以便制作一个详细内容的连接。
+关注继续查看

使用CSS以后,读者会发现很多原来使用表格布局非常小儿科的问题,都变得不那么简单了。比如xiaoyh119读者希望实现一个如下的效果。

具体标题-1More

也就是在一行中,一个标题文字居左,又端放置另一个文字,以便制作一个详细内容的连接。这样的样式,如果使用表格表格布局非常简单,只要使用一个一行两列的表格就解决了,代码如下。

1
2
3
4
5
<table>
   <tr>
      <td>具体文章标题</td><td align="right">More</td>
   </tr>
</table>

而如果使用CSS又该如何实现呢?首先我们仍顺着使用表格的思路,把左右两端的文字分别置入一个span标记中:

1
2
3
4
<h4 id="main-1">
    <span class="title">具体标题-1</span>
    <span class="more">More</span>
</h4>

那么CSS又该怎么写呢?为了能够使两个span中的文字在同一行中,因此一定要CSS中的浮动的性质来实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#main-1 {
	font-size: 12px;
	width:300px;
        margin:0 auto;
	border:1px gray solid;
}
 
#main-1 span.title{
	float:left;
}
 
#main-1 span.more{
	text-align:right;
	display:block;
}

这里首先将左边的文字设置为向左浮动,从而脱离标准流,这时它后面的文字会围绕它排列,从而使右边的“More”文字出现在同一行,但是为了使“More”文字位于最右端,就需要时这个span变为块级元素,这样它才会自动扩展,然后通过text-align:right使文字能够右对齐。

现在回头思考一下,我们上面的思路是仍然沿用了表格布局的思路进行的,那么进一步考虑一下,这个案例是否可以简化呢,实际上如果我们对HTML代码稍稍修改,就可以使CSS代码大幅度化简,首先把左右两端的文字交换一下位置:

1
2
3
<h4 id="main-1">
    <span class="more">More</span>具体标题-1
</h4>

那么CSS又该怎么写呢?为了能够使两个span中的文字在同一行中,因此一定要CSS中的浮动的性质来实现:

1
2
3
#main-1 span.more{
        float:right;
}

可以看到,这种方法,代码就比前面的方法简单了很多。因此,这里例子代码很简单,但是从中可以看出一个很有用的道理,用CSS进行页面的设计和布局,无论是一个复杂的大布局,还是一个简单的小样式,关键实现要真正把CSS的核心原理搞懂,比如这里的“盒子模型”、“标准流”、“浮动”和“定位”等基本原理,都真正理解清楚。

今天先讲到这里,后面我们还会继续沿着这里的案例继续探索和深入,更好地理解CSS的奥妙。如果对这个案例感兴趣,但是对具体原理不是很理解的读者,建议您再仔细研究一下《CSS设计彻底研究》视频教程的第1~4课。

最后,在给读者朋友一个“思考题”,这是袁马飞读者提出的问题,他希望实现如下这个效果,也就是文字要分为左中右三段,左右两端分局左右两端,中间段靠着左段,并且要求,鼠标指针经过时,相应的列表行背景变色,有兴趣的读者可以考虑一下,应该如何实现呢?能够实现IE6/IE7/Firefox都兼容吗?必须使用Javascript吗?如果使用Javascript又该怎么写呢?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6903 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2833 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4478 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7750 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9424 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5456 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2138 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
512
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载