图片和文字保持相对位置不变以及background属性

最新推荐文章于 2022-09-27 14:18:45 发布

DHASA

最新推荐文章于 2022-09-27 14:18:45 发布

阅读量2.9k

点赞数 1

分类专栏： web前台

本文链接：https://blog.csdn.net/DHASA/article/details/50782401

版权

web前台专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这个代码大神分分钟写完。先来看效果图：

下面是代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aa</title>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{list-style:none;}
.wrap {
	width:460px;
	margin:0 auto;
}
.list-bg {
	width:100%;
	height:24px;
	background:url(images/a.png) no-repeat;
}
.list li{float:left;width:33%;text-align: center;margin-top: 10px;}
.list li.first{
	text-align:left;
}
.list li.last{
	 text-align:right;
}
</style>
</head>
<body>
<div class="wrap">
	<div class="list-bg"></div>
	<ul class="list">
		<li class="first">基本信息</li>
		<li>基本信息</li>
		<li class="last">基本信息</li>
	</ul>
</div>
</body>
</html>

再来看效果图：

再来看代码：（其实和上面是一样的，但是由于我的代码里面还有其他上下文环境，css略有不同）

<div class="wrap">
	<div class="list-bg1 tp_create_procedure"></div>
	<ul class="list">
		<li class="first">基本信息</li>
		<li>教学设计</li>
		<li class="last">教学环节</li>
	</ul>
</div>

css样式如下：

ul,li{list-style:none;}
.wrap {
	width:460px;
	margin:0 auto;
}
.list-bg1 {
	width:100%;
	height:24px;
	background:url(../images/tp_create_first.png) center top no-repeat;
}
.list-bg2 {
	width:100%;
	height:24px;
	background:url(../images/tp_create_second.png) center top no-repeat;
}
.list-bg3 {
	width:100%;
	height:24px;
	background:url(../images/tp_create_third.png) center top no-repeat;
}
.list li{
	float:left;
	width:33%;
	text-align: center;
	margin-top:10px;
}
.list li.first{
	text-align:left;
}
.list li.last{
	 text-align:right;
}

先来看这个问题：

之所以称之为大神，一是对我而言，二是确实是看了之后分分钟。。

布局这个东西，android也是，一个块要包含在一起，个人觉得不要因为不影响效果就省事不写必要的层，会很乱，个人觉得也不够健壮。回到主题上，既然文字和图片应该是一个整体出现，那就应该有一个大的div，然后这两部分再分别包div，但是我没有想清楚在最外层div中设置图片和文字两个部分的共同属性值，再者就是没有上面代码里清晰的思路。。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

background:url(../images/tp_create_third.png) center top no-repeat;

除了no-repeat之外还可以取这些值：

重复的情况如图：

center和top分别表示水平和竖直方向。具体再去查吧。。

DHASA

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片和文字保持相对位置不变以及background属性

这个代码大神分分钟写完。先来看效果图：下面是代码：aa*{padding:0;margin:0;}ul,li{list-style:none;}.wrap { width:460px; margin:0 auto;}.list-bg { width:100%; height:24px; background:url(images/a.png) no-r
复制链接

扫一扫