CSS实践04：内容图片

1、美食页效果

将logo居中显示，并设置美食图片的排列。效果如下：

2、CSS设置

为美食网图片添加类名logo

<div class="logo">
	<img src="images/logo.png" alt="美食网" title="美食网">
</div>

设置图片居中

.logo{
	text-align: center;
}

查看logo.png的尺寸，设置图片尺寸

.logo img{
	width: 184px;
	height: 140px;
}

设置美食图片的类名photos

<ul class="photos">
		<li><img src="images/egg-1.jpg" alt="准备材料"></li>
		<li><img src="images/egg-2.jpg" alt="炒鸡蛋"></li>
		<li><img src="images/egg-3.jpg" alt="西红柿去皮"></li>
		<li><img src="images/egg-4.jpg" alt="爆香葱花"></li>
		<li><img src="images/egg-5.jpg" alt="炒西红柿"></li>
		<li><img src="images/egg-6.jpg" alt="把鸡蛋放入一起炒"></li>
		<li><img src="images/egg-7.jpg" alt="出锅前放盐"></li>
		<li><img src="images/egg-8.jpg" alt="出锅"></li>
</ul>

调整容器宽度

.main-content{
	width: 670px; <!-- 500px; -->
	padding: 20px;
	border: 1px solid #dddddd;
	margin: 30px auto 0 auto/* 30px 0 0 0; */
}

设置图片左边距为0

.photos{
	padding-left: 0;
}