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

开发者社区> 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又该怎么写呢?

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

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26794 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2962 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11818 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7503 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22405 0
+关注
lzhdim
人在20岁以意志力著称,在30岁以智慧取胜,在40岁则靠的是理智的判断。 一个人只有时刻保持幸福快乐的感觉,才会使自己更加热爱生命,热爱生活。只有快乐,愉快的心情,才是创造力和人生动力的源泉;只有不断自己创造快乐,与自己快乐相处的人,才能远离痛苦与烦恼,才能拥有快乐的人生。
522
文章
4
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载