银龄网

 找回密码
 注册会员

QQ登录

只需一步,快速开始

查看: 125|回复: 8

[原创] 【聊代码】第四十五集:css样式(之十一)

[复制链接]
发表于 2018-8-27 22:39:25 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
[i=s] 本帖最后由 海特行者 于 2018-8-28 11:06 编辑 [/i]

聊代码(第四十五集)css样式(之十一)

 

       请看下面四女图,把鼠标放在图上,可以看到边距情况。我对下面的代码不作解析,建议学代码的朋友复制这个代码,改变其中的属性或属性值,观察其变化。这样会有助于更加深刻的理解,同时,这样做就是很好的自学锻练。

 

Ballade
靓影沉鱼
Ballade
娇姿落雁
Ballade
芳容闭月
Ballade
美貌羞花

 

 

 

 

       代码:

<style type="text/css">
div.img
{ margin:3px; border:5px solid #bebebe; width:auto; float:left; text-align:center; }
div.img img
{ margin:3px; border:2px solid #0f0; }
div.img a:hover img
{ border:20px solid #0000ff; }
div.desc
{ text-align:center; width:150px; font-size:16px; color:#0000ff; margin:10px 5px 10px 5px; }
</style>
<div class="img"><a href="/i/tulip_flaming_club.jpg" target="_blank"><img alt="Ballade" height="240" src="http://www.oldkids.cn/upload/2018/08/27/blog_2018082714093
6510.jpg" width="132" /> </a>
<div class="desc">靓影沉鱼</div> </div>
<div class="img"><a href="/i/tulip_flaming_club.jpg" target="_blank"><img alt="Ballade" height="240" src="http://www.oldkids.cn/upload/2018/08/27/blog_2018082711532
0170.jpg" width="132" /> </a>
<div class="desc">娇姿落雁</div> </div>
<div class="img"><a href="/i/tulip_peach_blossom.jpg" target="_blank"><img alt="Ballade" height="240" src="http://www.oldkids.cn/upload/2018/08/27/blog_2018082714113
0009.jpg" width="132" /> </a>
<div class="desc">芳容闭月</div> </div>
<div class="img"><a href="/i/tulip_flaming_club.jpg" target="_blank"><img alt="Ballade" height="240" src="http://www.oldkids.cn/upload/2018/08/27/blog_2018082714170
8691.jpg" width="132" /> </a>
<div class="desc">美貌羞花</div> </div>

 

   拆解代码,给代码动“手术”,是最好的自学方法。

 

 

评分

参与人数 4老年币 +20 收起 理由
擎天一柱 + 5 很给力!
蓝色欣月 + 5 很给力!
静竹 + 5 很给力!
延缘缘 + 5 赞一个!

查看全部评分

发表于 2018-8-28 05:15:39 | 显示全部楼层
谢谢朋友  欣赏支持!
发表于 2018-8-28 08:17:53 | 显示全部楼层

老师上午好,欣赏您的精彩主题佳作,祝秋祺温馨快乐!
发表于 2018-8-28 10:35:15 | 显示全部楼层
谢谢老师辛苦!学习了。
发表于 2018-8-28 10:36:53 | 显示全部楼层
很奇妙!鼠标一点人物就移动了。
 楼主| 发表于 2018-8-28 10:52:23 | 显示全部楼层
大圣 发表于 2018-8-28 05:15
谢谢朋友  欣赏支持!

非常喜欢您作的曲,好听!
发表于 2018-8-29 05:03:32 | 显示全部楼层
海特行者 发表于 2018-8-28 10:52
非常喜欢您作的曲,好听!

我回帖点赞你 你回帖支持我 和谐互动快乐多
发表于 2018-9-3 17:24:46 | 显示全部楼层
进来欣赏支持老师的新代码佳作,下午问好~!
发表于 2018-10-3 19:21:30 | 显示全部楼层


您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

QQ|银龄网 ( 苏ICP备16036262号-5 )|网站地图

GMT+8, 2019-2-22 12:41 , Processed in 0.073068 second(s), 28 queries , Gzip On.

快速回复 返回顶部 返回列表