常见Html布局的CSS样式设置！(span图标、伪类元素+过渡动画transition)

最新推荐文章于 2024-06-29 13:41:31 发布

杜杜杜俊杰

最新推荐文章于 2024-06-29 13:41:31 发布

阅读量2.4k

点赞数

分类专栏： HTML 文章标签： html css3

本文链接：https://blog.csdn.net/qq_39590098/article/details/104416644

版权

case 01

页面大框架的布局设置

第一种：（用的比较多）
先将网页结构分成大块(div)，每块都设置成 width：100%; 给height设置高度，再内部自己定义宽高
第二种：
大块(div)的高度不设置，只设置width:100% , 高度由大块内部盒子撑开
第三种：
大块(div)的宽度不设置，只设置高度，宽度由内部width:100%撑开【该种情况适用于只放图片banner】
【注意：只设置高度，不设置宽度，其中宽度默认会是占满父级的宽度】

//以下是第一种布局的设置！
//HTML
<body>
	<div class="header"></div>
	<div class="banner"></div>
	<div class="footer"></div>
</body>

//CSS
.header{
	width:100%;
	height:80px;
}
.banner{
	width:100%;
	height:500px;
}
.footer{
	width:100%;
	height:300px;
}

case02

span标签用于放置小图标

手法：
- display：inline-block; //设置成行内块
- 设置宽高(width、height) //用宽高撑出背景内容
- background：url(图片位置) no-repeat center; //不重复，居中显示
- background-size：contain; //填充满

//HTML
<a href="javascript:;" class="my-cart">
	<span class="icon-cart"></span>购物车
</a>
 
//CSS
.icon-cart{
     display: i

最低0.47元/天解锁文章

杜杜杜俊杰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常见Html布局的CSS样式设置！(span图标、伪类元素+过渡动画transition)

case01span标签用于放置小图标手法：display：inline-block; //设置成行内块设置宽高(width、height) //用宽高撑出背景内容background：url(图片位置) no-repeat center; //不重复，居中显示background-size：contain; //填充满//HTML<a href="...
复制链接

扫一扫