一个项目中img和a的那点事,多余5px高度以及a定义尺寸

2014-06-01 12:56 栏目:技术开发, 知识在线 查看(4918)

湖南幸运赛车爱彩人彩票网 www.schu9.cn 前几天有一个客户的一个项目,其实主要还是前端的工作,一个简单的??槠涫稻褪怯肧QL调用到一个商城的数据,然后再写下前端,前端直接用html和CSS就够了,这个地方。想实现的前端效果也很简单,就是如下图所示。

152124w64esn6c80wsn6ge

效果展示

相信只要熟悉前端的朋友都知道,这是一个非常常规的的前端???。然而我交给我的一个网上认识的童鞋在写这个东西,让他当做练练手,结果就出问题了。主要有两个问题,第一就是img下的造成整体高了5px;第二就是下面绝对定位的,的尺寸不能与整体统一。如下图的两个箭头之处。

152507ravok9t1tattdup5

每一个图片的HTML代码如下:

152945yk69k2b7ntdq66x2

下面是CSS代码

153122wwgurrh8ew35enon

关于定义<a>的尺寸

其 实看到这里大家已经很清楚了,比如下面的.indexad li span a 中明明已经定义了width:230px;这跟img的宽度是一致的,那么为什么就是文字短了一截呢?那是因为这个宽度的约束根本就没有效果,如果我文字 多一点或者少一点,这个宽度会变。其实只需要在这个<a>的CSS中加入一句display: block;即可。

关于img多出5px高度

其 实看那个图就已经知道了,因为我是在浏览器的调试状态下截图的,大家可以看到会标注出有个17px的高度,而默认的文字是12px,因此多余的就是 5px。而且在图片上的<a>我们是没有文字的,因此这里可以直接定义这个<a>的文字大小为0;有就是加上indexad li ?a{font-size:0;}。同样地我们还可以定义<a>的高度为0,根据上面定义<a>的方法就是加上indexad li a{height:0;display:block;}。

就经过上面两个简单的处理就可以修复这两个问题,从而实现开始我们需要的那种效果。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:一个项目中img和a的那点事,多余5px高度以及a定义尺寸 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 303| 709| 1000| 457| 534| 233| 344| 62| 911| 489|