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/ziye_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="首页.html">亿贝首页</a></li>
					<li><a href="">亿贝CALL</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 id="content">
				<div id="main">
					<div class="container">
						<div id="img_switch"><img id="tu" src="img/banner2.jpg"/>
							<div id="number_nav">
							</div>
						<div id="img_switch_text">
						</div>
						</div>
					</div>
					<div class="fenge">
						<img src="img/bg.jpg"/>
					</div>
					<div class="box">
						<div class="zuo">
							<h2>亿贝通讯录</h2>
						</div>
						<div class="you">
							当前位置：<a href="">首页 > 亿贝通讯录</a>
						</div>
						<div class="clear"></div>
					</div>
					<div class="shuiping"></div>
					<div class="xiazuo">	
						<div class="box1">
					        <div class="left1">
					        	<img src="img/icon3.gif"/>
					        </div>
					        <div class="zhong">
					        	<h2>亿贝通讯录</h2><span>(版本1.23)</span>
					        	<p>下载即赠送2元话费，无月租、长途费用，拨打国内任意电话每分钟低至0.08元，独有的快速拨号技术，让您使用亿贝通话变得非常方便。</p>
					        </div>
					        <div class="right1">
					        	<img src="img/btn1.jpg"/>
					        </div>
					        <div class="clear"></div>
					    </div>
					    <div class="clear"></div>
					    <div class="shuiping"></div>
						 <div class="box2">
						    <div class="left2">
						        <img src="img/5.jpg"/>
						    </div>
						    <div class="zhong2">
						    	<h2>安全方便</h2>
						    	<p>能帮您把手机中的电话号码备份到一个有密码保护的网络存储空间中，永不丢失，操作界面简洁美观，只需2到3分即可完成备份。</p>
						    </div>
						    <div class="clear"></div>
						</div>
						<div class="clear">
							
						</div>
						<div class="shuiping">
							
						</div>
						<div class="box2">
						    <div class="left2">
						        <img src="img/6.jpg"/>
						    </div>
						    <div class="zhong2">
						    	<h2>备份提醒</h2>
						    	<p>当您隔一段时间忘记备份时，我们会自动通过短信或邮件提醒您进行备份.</p>
						    </div>
						    <div class="clear"></div>
						</div>
						<div class="clear">
						</div>
						<div class="shuiping">
						</div>
						<div class="box2">
						    <div class="left2">
						        <img src="img/7.jpg"/>
						    </div>
						    <div class="zhong2">
						    	<h2>快速恢复</h2>
						    	<p>在您购买新机时，能帮您把备份的电话号码迅速下载到您的新手机上。</p>
						    </div>
						    <div class="clear"></div>
						</div>
						<div class="clear">
						</div>
						<div class="shuiping">
						</div>
						<div class="box2">
						    <div class="left2">
						        <img src="img/8.jpg"/>
						    </div>
						    <div class="zhong2">
						    	<h2>在线浏览</h2>
						    	<p>在您手机没带或者没电时，还能通过WAP和WEB网站查看您的电话号码本。</p>
						    </div>
						    <div class="clear"></div>
						</div>
						<div class="clear">
						</div>
						<div class="shuiping">
						</div>
					</div>
					<div class="xiayou">
					    <div class="box3">
					        <div class="box3_tip">
					            <img src="img/icon9.jpg" alt="提示灯泡" class="light_icon">
					            <p class="tip_text">
					                您可以随时充值、查询余额、查询话单、查询资费信息，让您明明白白消费。您可以随时充值、查询余额、查询话单、查询资费信息，让
					            </p>
					        </div>
					        <div class="box3_youxiang">
								<img src="img/img2.jpg"/>
					        </div>
					    </div>
					    <div class="box4">
						    <div class="tu">
						        <img src="img/icon8.jpg"/>
						    </div>
						    <h3>常见问题</h3>
						    <ul>
						        <li>以随时充值、查询余额、查询话单、查</li>
						        <li>以随时充值、查询余额、查询话单、查</li>
						        <li>以随时充值、查询余额、查询话单、查</li>
						        <li>以随时充值、查询余额、查询话单、查</li>
						        <li>以随时充值、查询余额、查询话单、查</li>
						    </ul>
						    <div class="xiang">
						        <a href="#">>>了解详情</a>
						    </div>
						</div>
					</div>
					</div>
				</div>
				<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>
</html>

css样式

*{margin: 0; padding: 0;}
body{
	font-family: "微软雅黑","arial, helvetica, sans-serif";
	background-color: #909090;
	background-image: url(../img/bg3.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
	background-attachment: fixed;
	font-size: 12px;
	color: #ffffff;
}
.clear{
	padding: 0;
	margin: 0;
	clear: both;
	width: 100%;
	height: 0;
	overflow: hidden;
}
.top{
	width: 100%;
	height: 118px;
	background-color: #909090;
	background-image: url(../img/bg1.jpg);
}
.top_bar{
	margin: 0 auto;
	width: 1000px;
}
.top_bar,.nav ul{
	margin: 0 auto;
	width: 1000px;
}
.logo{
	float: left;
	width: 241px;
	height: 79px;
	background-image: url(../img/logo.png);
}
.at1{
	float: right;
	margin-top: 18px;
	width: 209px;
	height: 30px;
	line-height: 30px;
	background-image: url(../img/bg1.png);
	text-indent: 50px;
}
.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{
	width: 166px;
	height: 40px;
	display: inline-block;
	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;
}
.bg5{
	background-image: url(img/bg5.jpg);
	width: 100%;
	height: 261px;
}
.main{
	height: 261px;
	margin: 0 auto;
	width: 1000px;
	background-image: url(img/banner4.jpg);
	position: relative;
}
.number{
	position: absolute;
	left: 20px;
	bottom:20px ;
	width: 200px;
	height: 25px;
}
.right{
	position: absolute;
	right: 20px;
	bottom:20px ;
	width: 200px;
	height: 200px;
}
#content{
	background-color: #939393;
	background-image: url(../img/bg5.jpg);
	background-repeat: repeat-x;
}
#main{
	background-color: #F0F0F0;
	width: 1000px;
	margin: 0 auto;
	/*padding: 0 0 18px 0;*/
	overflow: hidden;
}
.container{
	/*background-image: url(../img/bg.jpg);*/
	background-repeat: no-repeat;
	background-position: left bottom;
	width: 1000px;
	height: 100px;
	/*margin: 0 0 25px 0;*/
	overflow: hidden;
}
#img_switch{
	height: 216px;
	position: relative;
}
#img_switch_text{
	width: 262px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	height: 15px;
}
.shuiping{
	background-image: url(../img/bg6.jpg);
	height: 2px;
	width: 100%;
	margin-bottom: 18px;
	margin-top: 0;
	overflow: hidden;
}
.box{
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	height: 50px;
	overflow: hidden;
}
.zuo{
	float: left;
	height: 50px;
	line-height: 50px;
}
.you{
	float: right;
	height: 50px;
	line-height: 50px;
	text-align: right;
	font-size: 16px;
	color: #af4f02;
}
.box h2{
	float: none;
	color: #3A0B00;
	line-height: 50px;
	margin: 0;
	font-size: 25px;
	font-weight: normal;
	transform: translateY(-6px); 
	margin-left: 35px;
}
.you a{
	margin-right: 20px;
	font-size: 16px;
	color: black;
	text-decoration: none;
}
.you p{
	font-size: 16px;
	color: #af4f02;
}
.xiazuo{
	float: left;
	width: 600px;
	margin: 0 0 0 35px;
	padding: 15px 0;
}
/* 亿贝通讯录 */
.box1{
	width: 100%;
	overflow: hidden;
	margin-bottom: 15px;
}
.left1{
	float: left;
	width: 90px;
	margin-right: 15px;
}
.lef1 img{
	width: 100%;
	display: block;
}
.zhong{
	float: left;
	width: 340px;
	color: #000;
}
.zhong h2{
	font-size: 20px;
	color: #3A0C00;
	display: inline-block;
}
.zhong span{
	font-size: 16px;
	color: #333;
}
.zhong p{
	font-size: 14px;
	line-height: 1.6;
	margin-top: 8px;
	color: #333;
}
.right1{
	float: right;
	width: 130px;
	margin-top: 12px;
}
.right1 img{
	width: 100%;
	display: block;
}

/*安全方便板块  */
.box2{
	width: 100%;
	height: 80px;
	overflow: hidden;
	margin-top: 15px;
}
.left2{
	float: left;
	width: 60px;
	margin-right: 15px;
}
.left2 img{
	width: 100%;
	height: auto;
	display: block;
}

.zhong2{
	float: left;
	width: 510px;
	color: #000;
}
.zhong2 h2{
	font-weight: bold
	font-size: 20px;
	color: #3A0C00;
	margin-bottom: 5px;
}
.zhong2 p{
	font-size: 14px;
	line-height: 1.7;
	margin-top: 0;
	color: #333;
	overflow: visible;
	text-overflow: unset;
	display: block;
}

.xiayou {
    float: right;
    width: 330px;
    margin-right: 0;
    margin-top: 15px;
}
.box3 {
    width: 280px;
    background: #fff9e6;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 8px;
}
.box3_tip {
    overflow: hidden;
    margin-bottom: 12px;
}
.light_icon {
    float: left;
    width: 30px;
    height: 45px;
    margin-right: 10px;
}
.tip_text {
    float: left;
    width: calc(100% - 58px);
    font-size: 13px;
    color: #913b08;
    line-height: 1.5;
}
.box3_youxiang {
    display: block;
    margin-left: 25px;
    margin-top: 25px;
}
.box4{
	width: 280px;
    background: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 8px;
	margin-top: 15px;
	border: 1px solid #e6e6e6;
	margin-bottom: 20px;
}

.box4 .tu{
	float: left;
	width: 40px;
	height: 40px;
	margin-right: 8px;
}
.box4 .tu img{
	width: 100%;
	height: 100%;
	display: block;
}
.box4 h3{
	float: left;
	font-size: 18px;
	color: #333;
	line-height: 40px;
	font-weight: normal;
	margin-bottom: 20px;
}
.box4 ul{
	list-style: none;
	clear: both;
}
.box4 ul li{
	font-size: 13px;
	color: #444;
	line-height: 1.8;
	padding-left: 12px;
	position: relative;
	margin-bottom: 4px;
}
.box4 ul li::before{
	content: "›";
	position: absolute;
	left: 0;
	color: #b33000;
}
.box4 .xiang{
	text-align: right;
	margin-top: 12px;
}
.box4 .more a{
	color: #b33000;
	font-size: 14px;
	text-decoration: none;
}
.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;
}

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