第十二周 亿贝网页

亿贝网页

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>banner</title>
		<style type="text/css">
			.content{
				height: 261px;
				background-image: url(img/bg5.jpg);
			}
			.main{
				margin: 0 auto;
				width: 1000px;
				height: 261px;
				background-image: url(img/banner3.jpg);
				position: relative;
			}
			.number{
				position: absolute;
				left: 20px;
				bottom: 20px;
				width: 200px;
				height: 25px;
				background-color: #0099FF;
			}
				.number ul{
					
				}
				.number ul li{
					/*横向*/
					float: left;
					/*去掉远点修饰符*/
					list-style-type: none;
				}
				.number  ul li a{
					/*文字改为白色*/
					color: #FFFFFF;
					/*去掉下划线*/
					text-decoration: none;
					background-color: #2D1100;
					display: block;
					height: 25px;
					line-height: 25px;
					width: 40px;
					margin-right: 8px;
					text-align: center;
					
				}
			.denglu{
				position: absolute;
				right: 20px;
				bottom: 20px;
				width: 200px;
				height: 200px;
				background-color: #0099FF;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="main">
				<!--<img src="img/banner3.jpg" />-->
				<div class="number">
					<ul>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li><a href="#">6</a></li>
						<li><a href="#">7</a></li>
						<li><a href="#">8</a></li>
					</ul>
				</div>
				<div class="denglu"></div>	
				
			</div>
			
		</div>
	</body>
</html>

css:

*{margin: 0; padding: 0;}
body{
   	background-color: #909090;
   	background-image: url(../img/bg3.jpg);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: left bottom;
    font-size: 12px;
    color: #FFFFFF;
	}
.clear{
	clear: both;/*全部清除*/
	width:100%;
	height: 0px;
	overflow: hidden;
	}
.top{
   	width: 100%;
    height: 118px;
    background-image: url(../img/bg1.jpg);
    background-color:black;
    /*background-repeat: repeat-x;*/
    /*background-repeat: repeat-y;*/
    /*background-repeat: no-repeat;
    background-position: 20px 98px;*/
	}
.top_bar,.nav ul{
    margin: 0 auto;
    width: 1000px;
    /*background-color: chartreuse;*/
	}
.logo{
	float: left;
	width:241px;
	height:79px;
	background-image: url(../img/img/logo.png);
	background-repeat: no-repeat;
	}
.at1{
	float: right;
	margin-top: 18px;
    width:209px;
	height:30px;
	background-image: url(../img/img/bg1.png);
	line-height: 30px;
	text-indent: 50px;
	}
.nav{
	/*默认就重复*/
	background-image: url(../img/img/bg2.jpg);
	height: 40px;
	line-height: 40px;
			
	}
.nav ul li{
	float: left;
	width: 166px;
	background-image: url(../img/img/nav_s.jpg);
	background-repeat: no-repeat;
	background-position: left 2px;
	list-style-type: none;
	font-size: 14px;
	text-align: center;		
	}
.nav ul li a{
	display: block;
	color: #F0F0F0;
	width: 166px;
	height: 40px;
	text-decoration: none; 
	}
.nav ul li a:hover{
	background-image: url(../img/img/nav_h.jpg);
	background-repeat: no-repeat;
	background-position: center 1px;
}
posted @ 2026-05-31 13:24  今今日晴  阅读(20)  评论(0)    收藏  举报