菜鸟女求助:关于一段CSS小代码-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

菜鸟女求助:关于一段CSS小代码

菲菲2015 2014-05-01 09:04:44 11347


我想要的效果是这样的:每张小图下面能加两三个文字,并居中。
现有的代码如下:(哪位高手帮忙添改,谢谢!~)
<div class="wp  "><!-- 自定义二级导航 -->
<style type="text/css">

.vk_nv_sub { width: 960px; margin: 0 auto; margin-top: 0px; margin-bottom: 0px; padding: 0px 5px 10px 5px; /*background: #fff; */ /* border:1px solid #ccc; border-top:none; box-shadow:1px 1px 3px #ccc; */ }
.vk_nv_sub_item { float: left; display: inline-block; width: 225px /*320px*/;  margin-right: 15px; overflow: hidden; /* background-color: #0ad;   border-radius:5px;*/ }
.ie6 .vk_nv_sub_item { background-color: #0ad;  }
.vk_nv_sub_item_ct {    overflow: hidden;/* margin-right: 15px;  */ border-radius: 5px; }


.vk_right { float: right !important; margin-right: 15px !important; }
/*
.vk_color_bg_blue {   background:#0ad url(http://**yuexir.com/tubiao/dhyy.gif) no-repeat center bottom; }
.vk_color_bg_orange {  background:#f90 url(http://**yuexir.com/tubiao/dhyy.gif) no-repeat center bottom; }
.vk_color_bg_green {   background:#580 url(http://**yuexir.com/tubiao/dhyy.gif) no-repeat center bottom; }
.vk_color_bg_red {   background:#c55 url(http://**yuexir.com/tubiao/dhyy.gif) no-repeat center bottom; }
*/
.vk_color_bg_blue { background-color: #0ad;   display: inline-block;}
.vk_color_bg_green { background-color: #8b0;   display: inline-block; }
.vk_color_bg_orange { background-color: #f90;   display: inline-block;}
.vk_color_bg_red { background-color: #c55;  display: inline-block; }

.vk_nv_sub_item .icon_wp { float: left; display: inline-block; padding-top: 0px; width: 70px; height: 90px; overflow: hidden; color: #fff; font-size: 14px; text-align: center; }
.vk_nv_sub_item .icon_wp p a { color: #fff; font-size: 16px; font-weight: bold; height: 90px; line-height: 30px; overflow: hidden; }
.vk_nv_sub_item .icon { display: inline-block; margin: 10px 5px 0 5px; padding-top: 0px; width: 70px; height: 70px; }

.vk_nv_sub_item ul { width: 150px /* 240px*/; float: left; overflow: hidden; margin: 10px 0px 0 0px; }

.vk_nv_sub_item ul li a { float: left; width: 70px; height: 30px; line-height: 30px; text-align:center; padding: 0 ; font-size: 14px; color: #fff; }
.ie6 .vk_nv_sub_item ul li a { width: 65px; height: 30px; line-height: 30px; padding: 0 8px; }
.vk_nv_sub_item ul li a:hover { color: #fff; background: #green; text-decoration: none; }
.vk_nv_sub_item ul li.right { padding-right: 0; background: none; }
.vk_nv_sub_item ul li.left { padding-left: 0; margin-left: 0px; }

.vk_icon_1 .icon { background:url( http://**yuexir.com/tubiao/阳江.jpg ) no-repeat;}
.vk_icon_2 .icon { background:url( http://**yuexir.com/tubiao/湛江.jpg ) no-repeat;}
.vk_icon_3 .icon { background:url( http://**yuexir.com/tubiao/茂名.jpg ) no-repeat;}
.vk_icon_4 .icon { background:url( http://**yuexir.com/tubiao/粤西茶馆.png ) no-repeat;}
</style>

<div class="vk_nv_sub png cl">

  <div class="vk_nv_sub_item vk_icon_1 cl">

    <div class="vk_nv_sub_item_ct vk_color_bg_green">

      <div class="icon_wp">
        <div class="icon"></div>
      </div>

      <ul class="cl">
        <li class="left"><a href="http://**www.yuexir.com/forum.php?gid=108" >阳春</a></li>
        <li class="right"><a href="http://**www.yuexir.com/forum.php?gid=109" >阳东</a></li>
        <li class="left"><a href="http://**www.yuexir.com/forum.php?gid=165" >阳西</a></li>
        <li class="right"><a href="http://**www.yuexir.com/forum.php?gid=111" >三甲</a></li>
<li class="left"><a href="http://**www.yuexir.com/forum.php?gid=111" >三甲</a></li>
<li class="right"><a href="http://**www.yuexir.com/forum.php?gid=111" >三甲</a></li>
      </ul>

    </div>

    <div class="bg_vk_shadow_230"></div>

  </div>

  <div class="vk_nv_sub_item vk_icon_2 cl">
    <div class="vk_nv_sub_item_ct vk_color_bg_orange">
      <div class="icon_wp">
        <div class="icon"></div>
      </div>
      <ul class="cl">
        <li class="left"><a href="#" >交换资源</a></li>
        <li class="right"><a href="#" >积分兑换</a></li>
        <li class="left"><a href="#" >疑问解答</a></li>
        <li class="right"><a href="#" >休闲**</a></li>
      </ul>
    </div>
    <div class="bg_vk_shadow_230"></div>
  </div>
  <div class="vk_nv_sub_item vk_icon_3 cl">
    <div class="vk_nv_sub_item_ct vk_color_bg_blue">
      <div class="icon_wp">
        <div class="icon"></div>
      </div>
      <ul class="cl">
        <li class="left"><a href="#" >VIP资源</a></li>
        <li class="right"><a href="#" >开通VIP</a></li>
        <li class="left"><a href="http://**www.yuexir.com/forum-93-1.html" >思念活动</a></li>
        <li class="right"><a href="http://**www.yuexir.com/forum-190-1.html" >思念团购</a></li>
      </ul>
    </div>
    <div class="bg_vk_shadow_230"></div>
  </div>
  <div class="vk_nv_sub_item vk_icon_4 cl vk_right">
    <div class="vk_nv_sub_item_ct vk_color_bg_red ">
      <div class="icon_wp">
        <div class="icon"></div>
      </div>
      <ul class="cl">
        <li class="left"><a href="http://**www.yuexir.com/plugin.php?id=dsu_paulsign:sign" >天天签到</a></li>
        <li class="right"><a href="http://**www.yuexir.com/zstm_qqgroup-index.html" >加思念群</a></li>
        <li class="left"><a href="http://**www.yuexir.com/forum-92-1.html" >宝贵建议</a></li>
        <li class="right"><a href="http://**www.yuexir.com/forum-94-1.html" >申请合作</a></li>
      </ul>
    </div>
    <div class="bg_vk_shadow_230"></div>
  </div>
</div>
前端开发
分享到
取消 提交回答
全部回答(6)
  • zuijh
    2014-05-05 18:41:25
    楼主爆照吧
    0 0
  • 菲菲2015
    2014-05-05 18:39:15
    回3楼banian的帖子
    谢谢哇 你真是个好人
    0 0
  • 环保工程
    2014-05-02 21:25:32
    Re菜鸟女求助:关于一段CSS小代码
    感情楼主是基础为0拷贝别人代码呀
    CSS非常简单的,看书1小时就会了,更何况做网页的软件都有面板操作
    0 0
  • banian
    2014-05-02 11:13:09
    问问题不需要写明,小男子 小女子的,很多为了引起他人回答,故意弄个小女子。
    在CSDN论坛这种人很多。
    CSS这种问题,也不应该在这里问。这个是很基础的问题。建议多看看网站教学。

    <div class="icon_wp">
            <div class="icon"></div>
    </div>
    这里定义了你要的图片。
    <div class="icon"></div> 拆分成上下就可以了

    <div class="icon_wp">
            <div class="icon"></div>
           <div class="icon_Title">你要的文字</div>
    </div>

    css文件里增加  
    .icon_Title{width:100%; height:20px; float:left;clear:both;overflow: hidden;}  高度超出的话自己调整下
    0 0
  • 漫步西溪
    2014-05-01 15:16:55
    回1楼服务器之家的帖子
    我可以证明他不是男的!
    0 0
滑动查看更多
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程