模板实例

本文总结了前端开发中常见的布局技巧,包括子集浮动与父集溢出隐藏、图片悬浮定位、响应式设计中的logo对齐、幻灯片标题垂直居中、产品图片尺寸统一、网站风格一致性维护及CSS代码组织等。

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

1. 子集浮动,父集溢出隐藏。

 2. 一个<div>内<img/>图片悬浮,则父position:relative, 子<img/>position:absolute.

3.手机端,logo留边距。注意logo是否变形。

4.幻灯片中的标题垂直居中,手机端边距若太大,留白不对称,看着别扭。

5.产品图片大小保持一致,这样就可以统一固定文字与图片边距,保持网页一致性。

6.网站风格统一。

7.写css时,代码分类。{display:float;|width,height|padding,margin|其他}

8.以大图为背景,默认状况下,图片会被拉伸。默认幻灯片有max-height:600px的属性。这样超过这个高度的图片会被压缩。如果给父集固定一个高度,自己<img/>的最大高度集承(max-height:inherit;)怎图片会等比例被截取。

9.{left:0;}时,图片左对齐,图片宽度为80px,为实现居中,则{left: 50%}后,让其左挪其宽度的一半。

转载于:https://www.cnblogs.com/Abby2017/p/9509922.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值