#UI+前端#（四）插入图片

学习

可以先加上border看空间布局，最后在删去
经常更换的图片，当做内容用image标签
类似logo，不会换的，我们认为它是背景，会提高效率
类似通栏，很宽的，需要居中的（image无法在小容器里面居中），我们也用背景方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{
				/*width: 500px;
				height: 500px;
				如果不规定宽高，宽占满整行，高与图片有一定缝隙*/
				width: 2030px;
				height: 400px;/*一般图片多大框多大*/
				border: 1px solid #00f;
				display: block;/*转成块级标签就没有空隙了,或者将高度调成图片的高度*/
			}
			.div2{
				width: 500px;
				height: 400px;
				border: 1px solid #f00;
				background-image: url(img/2.jpg);/*背景图片不是内容，撑不起框，因此必须写宽高*/
				background-repeat: no-repeat;/*不重复no-repeat*/
				background-position: center;/*大概控制位置：left top bottom right，居中：center*/
				/*background:  #ff0 url(img/2.jpg) center no-repeat;可以写在一起*/
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<img src="img/1.jpg">
		</div> <!--有图就有框-->
		<div class="div2"></div>
	</body>
</html>

练习

对目标图片分块

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="content1">
			<div class="titleCon">
				<div>
					<h1>编辑精选</h1>
					<p>EDIT SELECT</p>
				</div>
				<a href="#">MORE>></a>
			</div>
			<div class="contentCon">
				<ol>
					<div>
						<a href="#">La go go</a>
						<a href="#">KNIT</a>
						<a href="#">DRESS</a>
					</div>
					<ul>
						<a class="red" href="#">显瘦</a>
						<a href="#">大码</a>
						<a href="#">遮腿粗</a>
						<a href="#">保暖</a>
						<a href="#">日韩甜美</a>
						<a href="#">休闲运动</a>
						<a href="#">针织</a>
						<a class="red" href="#">约会</a>
						<a href="#">暗黑街头</a>
						<a class="red" href="#">限时5折</a>
					</ul>
				</ol>
				<div>
					<a href="#"><img src="img/fashion.jpg"></a>
				</div>
				<ul>
					<a href="#"><img src="img/1.jpg"></a>
					<a href="#"><img src="img/2.jpg"></a>
					<a href="#"><img src="img/3.jpg"></a>
					<a href="#"><img src="img/4.jpg"></a>
					<a href="#"><img src="img/5.jpg"></a>
					<a href="#"><img src="img/6.jpg"></a>
				</ul>
			</div>
		</div>
		
	</body>
</html>

*{
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}

.content1{
	width: 1200px;
	margin: 100px auto;
	
}

.titleCon{
	border-bottom: 2px solid #333;
	overflow: hidden;
}

.titleCon>div{
	float: left;
	margin-bottom: 13px;
}

.titleCon>div>h1{
	float: left;
	font-family: "微软雅黑","宋体";
	font-size: 24px;
	color: #333;
	font-weight: normal;
}

.titleCon>div>p{
	float: left;
    font-family: "微软雅黑","宋体";
	font-size: 16px;
	color: #666;
	padding: 11px 0 0 15px;
}

.titleCon>a{
	float: right;
	background-color: #b31718;
	width: 100px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	font-family: "微软雅黑";
	font-size: 14px;
	margin-top: 15px;
}

.contentCon{
	width: 1200px;
	margin-top: 20px;
	overflow: hidden;
}

.contentCon>ol{
	width: 180px;
	height: 500px;
	float: left;
}

.contentCon>ol>div>a{
	display: block;
	width: 180px;
	line-height: 80px;
	background-color: #efe6e7;
	margin-bottom: 10px;
	font-family: "微软雅黑";	
	font-size: 28px;
	color: #333;
	text-align: center;
}

.red{
	
	color: #b31718 !important;
}

.contentCon>ol>ul{
	overflow: hidden;
	padding: 20px 0;
	background-color:  #f5f7f6;
}

.contentCon>ol>ul>a{
	float: left;
	width: 90px;
	height: 38px;
	background-color: #f5f7f6;
	font-family: "微软雅黑";	
	font-size: 12px;
	color: #333;
	text-align: center;
}

.contentCon>div{
	width: 400px;
	height: 500px;
	float: left;
	margin-left: 10px;
}

.contentCon>ul{
	width: 590px;
	height: 500px;
	float: right;
}

.contentCon>ul>div{
	width: 190px;
	height: 245px;
	background-color: #f5f7f6;
}

vircorns

发布了145 篇原创文章 · 获赞 8 · 访问量 1万+

私信关注

#UI+前端#（四）插入图片

学习

练习

猜你喜欢