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

原创 老王  2020-08-12 23:07:22  阅读 1772 次 评论 0 条
摘要:

鼠标上某些画面上改变其样式内容大小、位置、图片的设置,可以用hover进行实现

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

圆角和hover的使用-图文对齐.gif 老王前端HTML课后练习第9课——图片文字分类对齐  老王前端HTML课后练习第9课——Hover图片文字分类对齐 CSS3样式 html 笔记 hover 第1张

以下是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属性改变类的颜色

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

本文地址:http://www.wangfangwen.com/post/89.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?