老王前端HTML课后练习第10课—大图轮播示例

原创 老王  2020-09-16 13:04:50  阅读 369 次 评论 0 条
摘要:

轮播图在网页设计中会经常遇见,这里写了一个很简单的初期的banner,定位用到相对和绝对定位position:absolute/relative


先来看看效果

css写轮播图 老王前端HTML课后练习第10课—大图轮播示例  CSS3样式 笔记 前端 第1张

一样的先来看div简单的代码部分:

	<div id="box">
		<!--顶上标题-->
		<div class="top"></div>
		<!--大图部分-->
		<div class="banner">
			<a href="#"><img src="images/3.jpg" /></a>
			<a href="#"><img src="images/4.jpg" /></a>
			<a href="#"><img src="images/5.jpg" /></a>
			<a href="#"><img src="images/6.jpg" /></a>		
		</div>	
		<!--左右两个选择图标-->
		<div class="left"></div>
		<div class="right"></div>
		<!--文字描述部分-->
		<div class="des">
			<p class="title">5分钟就能轻松搞定的派对妆 秒杀大红唇和烟熏妆</p>
			<p class="content">红唇与烟熏妆曾是派对的"标配",这个过时的规则早就该打破了.
			今年秋冬的彩妆流行是简洁时髦的美感:一抹亮片眼影,一个出其不意的眼线,一只镇住全场的唇膏
			.既然能5分钟就搞定的派对妆,为什么还要等上1个小时呢?</p>
		</div>
		<!--最底下的小圆圈-->
		<ul>
			<li style="background-color:#c03"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

下面是CSS部分

			#box{
				position:relative;
				width:1100px;
				height:600px;
				border-top:2px solid #aaa;
				margin:60px auto;
			}
			/*顶上标题*/
			#box .top{
				position:absolute;
				top:-45px;
				left:360px;
				width:380px;
				height:90px;;
				background:url("images/1.jpg")no-repeat;
				background-position:-6px -520px;
	
			}
			/*大图部分*/
			#box .banner{
				width:1000px;
				height:500px;
				margin:50px auto;
				overflow:hidden;


			}
			/*左右两个选择图标*/
			
			#box .left{
				position:absolute;
				top:360px;
				left:50px;
				width:50px;
				height:70px;
				background:url("images/2.png")no-repeat;
				background-position:-4px -80px;
			}
			#box .left:hover{
				background-color:rgba(2,2,2,0.5);/*背景图片已经有了,
				只能选中后单独改变背景的颜色且加透明*/
			}

			#box .right{
				position:absolute;
				top:360px;
				right:50px;
				width:50px;
				height:70px;
				background:url("images/2.png")no-repeat;
				background-position:-4px -150px;
			}
			#box .right:hover{
				background-color:rgba(2,2,2,0.5);
			
			}
			/*文字描述部分*/
			#box .des{
				position:absolute;
				bottom:-20px;
				left:105px;
				width:890px;
				height:145px;
				background:rgba(0,0,0,0.5);
			}
			/*文字描述部分-左边*/
			#box .des .title{
				float:left;
				width:280px;
				height:66px;
				font-size:24px;
				padding:40px 40px 30px 30px;
			}
			/*文字描述部分-右边*/
			#box .des .content{
				float:right;
				width:460px;
				height:20px;
				font-size:14px;
				border-left:1px solid #aaa;
				padding:20px 30px 50px 30px;
				margin-top:20px;
			}
			/*最底下的小圆圈*/
			#box ul{
				position:absolute;
				bottom:-60px;
				left:490px;/*1100/2-120/2=490px*/
				width:120px;
				height:30px;
				
			}
			#box li{
				float:left;
				width:10px;
				height:10px;
				margin:6px;
				background-color:#aaa;
				border-radius:50%;
			}

每一个模块都写了注释,分模块进行,总体比较简单,设置了圆角border-radius, 设置了图片定位,以及浮动float

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

发表评论


表情

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