老王前端HTML课后练习第9课——Hover图片文字分类对齐

先来看下效果图，在很多网站中分类属性会碰见，主要就是鼠标放上去会改变属性（文字、图片、颜色大小等等）

以下是HTML代码，内容简单，就是几个div盒子，加上图片设置大小即可

	<div id="content">
		<div class="box">
			<div class="left">
				<img src="images/demo1/1.jpg"/>
			</div>
			<div class="right">
				<h3 class="yellow">AmyRoiland</h3>
				<p class="yellow">[AmyRoiland]美国洛杉矶 风格复古又新潮,总能在清新、性感和亲切中相互切换。</p>
			</div>
		</div>
		<div class="box">
			<div class="left">
				<img src="images/demo1/2.jpg"/>
			</div>
			<div class="right">
				<h3 class="yellow">Dali Bille</h3>
				<p class="yellow">[Dali Bille]英国时尚美女 性格温柔</p>
			</div>
		</div>
		<div class="box">
			<div class="left">
				<img src="images/demo1/3.jpg"/>
			</div>
			<div class="right">
				<h3 class="yellow">LinWei</h3>
				<p class="yellow">[LinWei] 潭州时尚代码女神</p>
			</div>
		</div>
		<div class="box4">
			<div class="left">
				<img src="images/demo1/4.jpg"/>
			</div>
			<div class="right">
				<h3 class="yellow">Nical Nilsen</h3>
				<p class="yellow">[Nical Nilsen] 挪威 风格清新甜美</p>
			</div>
		</div>
	
	</div>

下面内容为css样式，主要用到之前所说的hover改变样式和颜色

			#content{
				width:480px;
				height:630px;
				margin:50px auto;
				padding:5px;
			}
			.box{
				width:362px;
				height:140px;
				border-bottom:1px solid #c6c6c6 ;
				margin:20px auto;
				
			}
			.box4 {
				width:362px;
				height:140px;
				margin:20px auto;
				
			}
			.left{
				float:left;
			
			}
			img{
				border:4px solid #aaa;
				width:100px;
				height:100px;
				border-radius:50%;
							
			}
			.right{
				width:248px;
				margin:4px auto;
				float:right;
			}
			h3{margin:10px;}
			p {
				font-size:14px;
				text-indent:10px;
				
			}
			.yellow:hover{color:#c90;}
			img:hover{border:4px solid #c90;}

其实就一个知识点，就是选择器后面对应hover属性改变类的颜色

代码，需要不断的练习才能加深印象，典型的：好记性不如烂笔头