布置

1、通过怪异盒子+padding布置div位置:

.header{
	width:100%;
	height:44px;
	padding:7px 50px 7px 8px;
	box-sizing:border-box;
}

在这里插入图片描述

2、设置标签内文字的位置

通过line-height来设置;因为文字的位置是line-height的一半,所以设置
line-height,即可设置文字位置

3、第二行元素在第一行元素高出的地方补齐排列

不采用方法:采用display:inline-block;给行内元素设置宽高,第二行元素不会在第一行多余
的地方补齐
(1)采用float浮动可以

4、文字其他位置添加如照片等元素可以使用::after等伪类对象,再通过定位
布置其位置

.header .login{
	width:44px;
	height:44px;
	line-height:72px;
}
.header .login::before{
	content:'';
	position:absolute;
	left:50%;
	width:24px;
	height:26px;
	background-image:url('../img/ico_home.png');
}
发布了281 篇原创文章 · 获赞 3 · 访问量 4766

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104004965
今日推荐