老王前端HTML课后练习第6课——运用hover改变字体和背景颜色

原创 老王  2020-05-06 10:35:28  阅读 583 次 评论 0 条
摘要:

一个简单hover属性做改变背景和字体颜色

其实很简单先来看看body里面的div,就几个盒子

	<div id="box">
		<p>美图赏析</p>
		<a href="#">美女人像</a>
		<a href="#">风光人文</a>
		<a href="#">动物微距</a>
		<a href="#">鸟类摄影</a>
		<a href="#">综合摄影</a>
	</div>

然后CSS样式里面:

			#box{
				width:300px;
				height:420px;
				margin:100px auto;
			}
			p{
				text-indent:2em;
				width:300px;
				height:60px;
				line-height:60px;
				background:url("images/demo2/bg.png")no-repeat;
				background-position:-165px -406px;
				font-size:24px;

			}
			a{	
				text-indent:12px;
				display:block;
				width:300px;
				height:50px;
				line-height:50px;
				background:#9a9a9a;
				margin:1px;
			}
			a:hover{
				background:#f96;
				color:#fff;
			}

其实主要就是给了a标签一个hover,鼠标放上去以后更改背景和字体颜色而已,最终实现的效果如下:

hover属性改变背景和字体 老王前端HTML课后练习第6课——运用hover改变字体和背景颜色  CSS3样式 前端 笔记 hover 第1张


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

发表评论


表情

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