Web前端开发技术第十五周课堂笔记

Posted on 2026-06-26 10:13  福寿桃呐  阅读(1)  评论(0)    收藏  举报

伊贝主页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>亿贝首页</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
	<body>
		<div class="top">
			<div class="top_bar">
				<div class="logo"></div>
				<div class="at1">手机访问WAP.INBAI.COM</div>
				<div class="clear"></div>
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">伊贝首页</a></li>
					<li><a href="#">伊贝CALI</a></li>
					<li><a href="#">伊贝通讯录</a></li>
					<li><a href="#">最新动态</a></li>
					<li><a href="#">留言板</a></li>
					<li><a href="#">帮助中心</a></li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="main">
				<div class="container">
					<Div class="img_switch">
						<img src="img/banner3.jpg"/>
						<table width="283px" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="110px" id="left" class="denglu1" onmouseover="change('left')">登录</td>
                                    <td class="denglu2" id="right" onmouseover="change('right')">注册</td>
                                </tr>
                                <tr>
                                    <td height="192" colspan="2" background="img/denglu.png">
                                        <table width="283px">
                                            <!--<tr><td>用户名</td><td><input type="text" name="" id="" value="" /></td></tr>
                                            <tr><td>密码</td><td><input type="text" name="" id="" value="" /></td></tr>
                                            <tr><td></td><td>Data</td></tr>-->
                                        </table>
                                    </td>
                                </tr>
                        </table>
							<Div id="img_switch_text">
							<Div id="number_nav">
								<ul>
									<li style="background-color: #FF0000">1</li>
									<li>2</li>
									<li>3</li>
									<li>4</li>
									<li>5</li>
									<li>6</li>
									<li>7</li>
									<li>8</li>
								</ul>
							</Div>
						</Div>
					</Div>
				</div>
				<!--小猪打电话-->
				<div class="box1">
					<div class="img1"><img src="img/icon3.jpg"/></div>
					<div class="txt">
						<h2><a href="#">亿贝CALI</a></h2>
						<p>了解有关选项卡和选项卡快捷方式、加速器和 InPrivate 浏览的更多信息加速器和 InPrivate 浏览的更多信息</p>
						<div class="txt2">
							<div class="at2">
								<img src="img/btn1.jpg"/>
								<span><a href="#">>>了解详情</a></span>
							</div>
						</div>
					</div>
				</div>
				<div class="box1">
					<div class="img1"><img src="img/icon4.jpg"/></div>
					<div class="txt">
						<h2><a href="#">亿贝CALI</a></h2>
						<p>了解有关选项卡和选项卡快捷方式、加速器和 InPrivate 浏览的更多信息加速器和 InPrivate 浏览的更多信息</p>
						<div class="txt2">
							<div class="at2">
								<img src="img/btn1.jpg"/>
								<span><a href="#">>>了解详情</a></span>
							</div>
						</div>
					</div>
				</div>
				<div class="shuiping"></div>
				<div class="box2">
					<h2 class="title1">
						<img src="img/icon1.jpg"/>
						&nbsp;&nbsp;最新动态                
					</h2>
					<ul class="menu1">
						<li><a href="#">有关选项卡和选项卡快捷方式、加速器和InPrivate</a><span>00-00-00</span></li>
						<li><a href="#">有关选项卡和选项卡快捷方式、加速器和InPrivate</a><span>00-00-00</span></li>
						<li><a href="#">有关选项卡和选项卡快捷方式、加速器和InPrivate</a><span>00-00-00</span></li>
						<li><a href="#">有关选项卡和选项卡快捷方式、加速器和InPrivate</a><span>00-00-00</span></li>
					</ul>
					<div>
						<a href="#" style="float:right; color:#b05004;">>>了解详情</a>
					</div>
				</div>
				<div class="box3">
					<!--标题+下图-->
						<div class="txt3">
							<h2 class="title2"><img src="img/icon2.gif"/>&nbsp;&nbsp;客服中心</h2>
							<img src="img/phone.gif" width="198" height="111"/>
						</div>
						<!--点击留言-->
						<div class="img2">
							<a href="#"><img src="img/icon5.gif" width="162" height="158"/></a>
						</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="heikuai">
			<div class="foot">
					<!--左-->
				<div class="foot_nav">
				  	<a href="#">帮助中心</a>|<a href="#">隐私条款</a>|<a href="#">关于我们</a>
				</div>
				  <!--右-->
				<div class="foot_bar">
				  	<img src="img/logo2.jpg"  width="114" height="42" align="left"/>&copy;2026.INBAI Technology Co.Ltd<br />
				    粤ICP备09104593
				</div>
				  <!--清除浮动-->
				<div class="clear"></div>
			</div>	
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let num=0
		let arr=["img/banner3.jpg","img/banner4.jpg"]
		let img=document.querySelector('img')
		let as=document.querySelectorAll('#number_nav li')
		function changeImg(){
		//把上一个数字的背景设置为透明
		as[num].className='trans'
		//num在0、1、0、1......之间循环
		if(num<arr.length-1){
			num++
		}else{
				num=0
			}
		//设置img的src属性
		img.src=arr[num]
		//把当前数字的背景设置为红色
		as[num].className='red'
		}	
		//每隔2秒运行一次函数
		setInterval(changeImg,2000)
	</script>
</html>

css样式

*{margin: 0;padding: 0;}
body{
    background-color: #909090;
    background-image: url(../img/bg3.jpg);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-attachment: fixed;
    font-size: 12px;
}
.clear{
	clear: both;
	width: 100%;
	height: 0px;
	overflow: hidden;
}
.top{
    width: 100%;
    height: 118px;
    background-color: #909090;
    background-image: url(../img/bg1.jpg);
    /*背景颜色和背景图像一般同时设置；当图片太小时默认重复，从左到右*/
    /*background-repeat:repeat-x ;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
    background-position:20px 320px;*/ 
}
.top_bar,.nav ul{
    margin: 0 auto;
    width: 1000px; 
}
.logo{
	float: left;
	width: 241px;
	height: 79px;
	background-image: url(../img/logo.jpg);
}
.at1{
	float: right;
	margin-top: 18px;
	width: 209px;
	height: 30px;
	background-image: url(../img/bg1.png);
	text-indent: 50px;
}
/*.clear{
	float: left;
	width: 100px;
	height: 100px;
	background-color:blue ;
}*/
.nav{
	background-image: url(../img/bg2.jpg);
	height: 40px;
	line-height: 40px;
}
.nav ul li{
	float: left;
	width: 166px;
	background-image: url(../img/nav_s.jpg);
	background-repeat: no-repeat;
	background-position: left 2px;
	list-style-type: none;
	/*color: #fff;*/
	font-size: 14px;
	text-align: center;
}
.nav ul li a{
	display: block;
	width: 166px;
	height: 40px;
	color: #fff; 
	text-decoration: none;
}
.nav ul li a:hover{
	background-image: url(../img/nav_h.jpg);
	background-repeat: no-repeat;
	background-position: center 1px;
}
.content{
	background-color: #939393;
	background-image: url(../img/bg5.jpg);
	background-repeat:repeat-x ;
}
.main{
	width: 1000px;
	background-color: #F0F0F0;
	margin: 0 auto;
	padding: 0 0 180px 0;
}
.container{
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 264px;
	width: 1000px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 35px;
	margin-left: 0px;
}
.img_switch{
    height: 261px;
    position: relative;
}

.denglu1{
    float: left;
    width: 107px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: url(../img/lib1.png) no-repeat left;
    color: #fff;
}
.denglu2{
    float: left;
    width: 107px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: url(../img/lib2.png) no-repeat left;
    color: #fff;
}
.img_switch table{
    float: right;
    position: relative;
    bottom: 250px;
    right: 100px;
    position: absolute;
    /*bottom:0px;*/
    top: 20px;
    right: 100px;
}
#img_switch_text{
    width: 262px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    height: 15px;
}
#number_nav ul{
    font 12px Arial,Helvetica,sans-serif;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    color: #FFFFFF;
}
#number_nav ul li{
    float: left;
    font-weight: bold;
    background: #000;
    margin-right: 8px;
    width: 23px;
    cursor: pointer;
    line-height: 17px;
    height: 17px;
    text-align: center;
}
.box1{
	float: left;
	width: 403px;
	height: 200px;
	/*background-color: white;*/
	margin-left: 70px;
	padding-bottom: 18px;
}
.img1{
	float: left;
	width: 122px;
	height: 152px;
	/*background-color: blue;*/
	margin-right: 15px;
	margin-left: 10px;
	margin-top: 20px;
}
.txt{
	float: left;
	width: 246px;
	/*height: 152px;*/
	/*background-color: blue;*/
	margin-top: 17px ;
}
.txt h2{
	margin-bottom: 12px;
}
.txt h2 a{
	color: #3A0C00;
	font-size: 16px;
}
/*.txt p{
	text-align: justify;
}*/
.txt2{
	margin-top: 30px;
	height: 68px;
	margin-bottom: 6px;
	text-align: justify;
}
.at2{
	height: 39px;
	line-height: 39px;
	position: relative;
}
.at2 a{
	color: #AF4F02;
}
.at2 span{
	position: absolute;
	right: 0;
	bottom: 0;
}
.shuiping{
	background: url(../img/bg6.jpg);
	height: 2px;
	width: 100%;
	margin-bottom: 18px;
	overflow: hidden;
}
.box2{
	width: 435px;
	float: left;
	background: url(../img/bg7.jpg) repeat-y right center;
	
	margin: 0 0 0 50px;
	padding-right: 20px;
	display: inline;
}
h2.title1{
	height: 30px;
	line-height: 30px;
	color: #3A0C00;
	font-size: 16px;
}
.title1 * {
	vertical-align: middle;
}
.menu1{
	margin-bottom: 5px;
}
.menu1 li{
	background: url(../img/icon6.jpg) no-repeat left center;
	height: 24px;
	line-height: 24px;
	position: relative;
	list-style-type: none;
}
.menu1 li a{
	margin-left: 15px;
}
.menu1 li span{
	position: absolute;
	right: 0;
	top: 0;
}
.box3{
	width: 435px;
	float: left;
	padding: 0 0 0 32px;
}
.title2{
	height: 30px;
	line-height: 30px;
	display: block;
	color: #3A0C00;
	font-size: 16px;
}
.title2 * {
	vertical-align: middle;
}
.txt3{
	width: 200px;
	float: left;
	margin: 0 46px 0 0;
	display: inline;
}
.img2{
	float: left;
	width: 161px;
}
.heikuai{
	width: 100%;
	height: 50px;
	background-color: #000000;
}
.foot {
	background-position: left bottom;
	background-attachment: fixed;
	background: url(../img/bg3.jpg) repeat-x;
	height: 52px;
	width: 1000px;
	margin: 0 auto;
	color: #6d6d6d;
	margin-top: 30px;
}

.foot_nav {
	float: left;
	color: #6d6d6d;
	padding: 12px 0;
}

.foot_nav a {
	color: #6d6d6d;
	padding: 0 5px;
}

.foot {
	background: url(bg3.jpg) repeat-x;
	height: 52px;
	width: 1000px;
	margin: 0 auto;
	color: #6d6d6d;
}

.foot_nav {
	float: left;
	color#6d6d6d;
	padding: 12px 0;
}

.foot_nav a {
	color: #6d6d6d;
	padding: 0 5px;
}

.foot_bar {
	float: right;
	line-height: 20px;
	font-size: 11px;
	padding: 2px 0 0 0;
}

​ background
​ background-color: 背景颜色
​ background-image: 背景图像
​ background-repeat: 背景重复
​ background-position: 背景图像定位

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3