[学习技巧记录]服务模块样式细线技巧和服务模块溢出隐藏技巧

本文详细介绍了如何使用CSS实现服务模块中的细线样式,通过设置负margin值来解决边框合并问题,创建出细线效果。同时,通过设置`overflow: hidden`属性,实现了服务模块内容的溢出隐藏,保持了布局的整洁。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
这是一个newflash 板块。从上往下做,上面的news部分做完了,现在要做黄色框内部分,这个盒子class命名为server。因为结构一样,用ul>li*12>a[]>span+p,其中的小图片用精灵图来做。

  • 结构写法
		 		<div class="service">
		 			<ul>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>话费</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>机票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>电影票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>游戏</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>彩票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>加油站</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>酒店</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>火车票</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>众筹</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>理财</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>礼品卡</p>
		 					</a>
		 				</li>
		 				<li>
		 					<a href="#">
		 						<span></span>
		 						<p>白条</p>
		 					</a>
		 				</li>
		 			</ul>
		 		</div>
  • 样式写法
    1.先写.service,w248+h208 border 1px #e4e4e4 在这里插入图片描述
    service {
    width: 248px;
    height: 208px;
    border: 1px solid #e4e4e4;
    border-top: none;
    }
    这里为了显示效果,我将边框改为了红色 如下:
    在这里插入图片描述
    2.第二步写里边的li
    li量的w62+h70,li左浮动 边框1px
    .service li {
    float: left;
    width: 62px;
    height: 70px;
    text-align: center;
    border: 1px solid #e4e4e4;
    }
    为了效果,将li边框改为黑色,如下:在这里插入图片描述
    这时候你会发现li之间的边框变粗了,此时不是1px,而上2px,因为li与li之间边框发生了并列显示。如何解决呢??
    3.解决样式细线的技巧
    我们让每个li往左和往上移动1px,就用margin负值,可以使右边的li压住左边的li,实现边框合并,做出细线表格,上边框也是同理。
    .service li {
    float: left;
    width: 62px;
    height: 70px;
    text-align: center;
    border: 1px solid #e4e4e4;
    margin-top: -1px;
    margin-left: -1px;
    } 如下图,就得到了解决。在这里插入图片描述
    4.但是此时又有了新问题,下面的li并没有到红色盒子service里。原因很简单,因为li长度不够了,那么这时,我们给ul的宽度设长一些。
    .service ul {
    width: 270px;
    }
    结果如下
    在这里插入图片描述
    5.模块溢出隐藏技巧
    这时候黑色盒子溢出了,但是我们只需要显示在红色盒子service里,说明li的父元素service溢出了,所以我们利用元素的显示和溢出属性,overflow:hidden 作用在service上,就可以了。
    .service {
    width: 248px;
    height: 208px;
    border: 1px solid #e4e4e4;
    border-top: none;
    overflow: hidden;
    }如下图,所有问题就解决了
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值