海妖 发表于 2015-1-16 00:01:33

来一发CSS实例教程:网页区块中题目右边更多

CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
破洛洛文章简介:一样平常我们城市把“更多”这个链接放在H标签中,然后用到绝对定位来完成。可使用负margin来完成这个效果,并且加倍复杂。别的,针关于语义方面,我稍作修正,一样平常我们都是将链接套在H标签中,我将之自力到内部,如许既便在禁用CSS后,仍是能坚持一个优秀的浏览情势而不
题目右边“更多”的完成

已经做上图所示的效果,会利用到position来绝对定位到h2标签的右边.如许的做法,代码的确会多好几行.实在能够用个笨一点的举措来完成的:
比如html代码以下:
<h2><ahref="#">题目</a><span>更多…</span></h2>
利用potsition的css差未几以下:
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
如许才干完成更多在右边.实在真的还能够更复杂:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px000;
height:20px;
}
实在只是使用了margin-top的正数来完成,由于默许的float会换行到h2标签上面往,以是让它自个跳上往。大抵代码就是云云了,是否是很复杂?我说很复杂嘛!因为很复杂,以是就不放出独自的测试页面了.
一样平常我们城市把“更多”这个链接放在H标签中,然后用到绝对定位来完成。可使用负margin来完成这个效果,并且加倍复杂。别的,针关于语义方面,我稍作修正,一样平常我们都是将链接套在H标签中,我将之自力到内部,如许既便在禁用CSS后,仍是能坚持一个优秀的浏览情势而不至引发歧义。
演示:
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-cn"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><metahttp-equiv="Content-Language"content="gb2312"/><title>关于题目中的“更多”</title></head><body><styletype="text/css">/*<!]>*/</style><divclass="test"><h2>Raino的H2测试</h2><ahref=""_fcksavedurl=""""title="点击检察更多概况"class="more">+更多</a><ul><li>列表1~~~~</li><li>列表2~~~~</li><li>列表3~~~~</li><li>列表4~~~~</li><li>列表5~~~~</li></ul></div></body></html>


缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

山那边是海 发表于 2015-1-17 23:52:13

直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

不帅 发表于 2015-1-24 13:48:38

技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。

小女巫 发表于 2015-2-1 16:50:20

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

金色的骷髅 发表于 2015-2-7 12:04:16

经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.

灵魂腐蚀 发表于 2015-2-22 04:38:11

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

小魔女 发表于 2015-3-7 00:31:48

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

谁可相欹 发表于 2015-3-14 01:33:50

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

兰色精灵 发表于 2015-3-21 00:35:10

布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
页: [1]
查看完整版本: 来一发CSS实例教程:网页区块中题目右边更多