5月21日笔记
亿贝首页
代码演示（css和img未展示）：
点击查看代码
<!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 id="content">
<div id="main">
<div class="container">
<div id="img_switch">
<img src="img/banner3.jpg"/>
<table width="283px" border="0" cellspacing="0" cellpadding="0" class="zzz" style="position:absolute;top:30px;right:150px;">
<tr>
<td width="110px" id="left" class="denglu1" onmouseover="change('left')">亿贝CALL</td>
<td class="denglu2" id="right" onmouseover="change('right')">亿贝通讯录</td>
</tr>
<tr>
<!-- 在背景图td内部插入表单 -->
<td height="192" colspan="2" background="img/denglu.png" valign="top">
<div style="padding:20px 12px 0 12px;box-sizing:border-box;">
<!-- 用户名行 -->
<div style="display:flex;align-items:center;margin-bottom:10px;">
<span style="width:50px;font-size:13px;">用户名</span>
<input type="text" id="username" style="flex:1;height:22px;border:none;outline:none;padding:0 6px;">
</div>
<!-- 密码行 -->
<div style="display:flex;align-items:center;margin-bottom:14px;">
<span style="width:50px;font-size:13px;">密 码</span>
<input type="password" id="pwd" style="flex:1;height:22px;border:none;outline:none;padding:0 6px;">
</div>
<!-- 登录按钮+忘记密码 -->
<div style="display:flex;align-items:center;justify-content:center;gap:15px;padding:0 8px;">
<img src="img/btn4.jpg">
<span style="font-size:12px;color:#222;cursor:pointer;">忘记密码</span>
</div>
</div>
</td>
</tr>
</table>
<img id="prev" src="img/left.png" style="position:absolute;left:10px;top:50%;transform: translateY(-50%);width:50px;height:50px;cursor:pointer;z-index:99;">
<img id="next" src="img/right.png" style="position:absolute;right:10px;top:50%;transform: translateY(-50%);width:50px;height:50px;cursor:pointer;z-index:99;">
<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 class="denglu">
</div>
</div>
</div>
<div class="box1">
<div class="img1">
<img src="img/icon3.jpg"/>
</div>
<div class="txt">
<div class="txt2">
<h2><a href="#"></a>亿贝call</h2>
<p>了解有关选项卡和选项卡快捷方式、加速器和InPrivate浏览的更多信息加速器和InPrivate浏览的更多信息</p>
</div>
<div class="at2">
<img src="img/btn1.jpg"/>
<span>>>了解详情</span>
</div>
</div>
</div>
<div class="box1">
<div class="img1">
<img src="img/icon4.jpg">
</div>
<div class="txt">
<div class="txt2">
<h2><a href="#"></a>亿贝call</h2>
<p>了解有关选项卡和选项卡快捷方式、加速器和InPrivate浏览的更多信息加速器和InPrivate浏览的更多信息</p>
</div>
<div class="at2">
<img src="img/btn1.jpg"/>
<span>>>了解详情</span>
</div>
</div>
</div>
<div class="clear"></div>
<div class="shuiping"></div>
<div class="box2">
<h2 class="title1">
<img src="img/icon1.jpg" />
最新动态
</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="tex3">
<h2 class="title2"><img src="img/icon2.gif" /> 客服中心</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>
<div class="clear"></div>
<div class="foot">
<div class="foot_nav">
<a href="#">帮助中心</a>| <a href="#">关于我们</a>
</div>
<div class="foot_bar">
<img src="img/logo.jpg" width="144" height="42" align="left"/>&co
粤ICP备09104593
</div>
<div class="clear"></div>
</div>
</div>
</div>
<script type="text/jscript" src="js/1.js"></script>
<div class="yibei1">亿贝CALL
<div class="dangqian"><span style="color:#F00"/>当前位置</span>&首页nbsp;>亿贝CALL</div>
</div>
<div class="right">
<div class="box6">
<div class="prot3">
<div class="prot4">
<div class="at4">
<p>您可以随时充值、查询余额、查询话单、查询资费信息，让您明明白白消费。您可以随时充值、查询余额、查询话单、查询资费信息，让</p>
<br />
<br />
<img src="img/img2.jpg" />
</div>
<div class="jiantou"></div>
</div>
</div>
</div>
<div class="box5">
<div class="prot1">
<div class="port2">
<h2 class="title3"><img src="img/icon8.jpg" width="32" height="32"> 常见问题</h2>
<ul class="menu2">
<li><a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a></li>
<li><a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a></li>
<li><a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a></li>
<li><a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a></li>
<li><a href="http://www.865171.cn/">以随时充值、查询余额、查询话单、查</a></li>
</ul>
<div class="more"><a href="http://www.865171.cn/">>>>了解详情</a></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="left">
<div class="at3">
<div class="at3_l"><img src="img/icon3.gif" width="90" height="90" /></div>
<div class="at3_c">
<h2>亿贝通讯录<span>（版本 1.23）</span></h2>
<p>下载即赠送2元话费，无月租、长途费用，拨打国内任意电话每分钟低至0.08元，独有的快速拨号技术，让您使用亿贝通话变得非常方便。</p>
</div>
<div class="at3_r"><a href="http://www.865171.cn/"><img src="img/btn1.jpg" width="142" height="39"/></a></div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l"><a href="http://www.865171.cn/"><img src="img/5.jpg" width="59" height="60" /></a></div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">安全方便</a></h2>
<p>能帮您把手机中的电话号码备份到一个有密码保护的网络存储空间中，永不丢失，操作界面简洁美观，只需2到3分即可完成备份。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l"><a href="http://www.865171.cn/"><img src="img/6.jpg" width="59" height="60" /></a></div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">备份提醒</a></h2>
<p>当您隔一段时间忘记备份时，我们会自动通过短信或邮件提醒您进行备份。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l"><a href="http://www.865171.cn/"><img src="img/7.jpg" width="59" height="60" /></a></div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">快速恢复</a></h2>
<p>在您购买新手机时，能帮您把备份的电话号码迅速下载到您的新手机上。</p>
</div>
<div class="clear"></div>
</div>
<div class="box4">
<div class="box4_l"><a href="http://www.865171.cn/"><img src="img/8.jpg" width="59" height="60" /></a></div>
<div class="box4_r">
<h2><a href="http://www.865171.cn/">在线浏览</a></h2>
<p>在您手机没带或者没电时，还能通过WAP和WEB网站随时随地查看您的电话号码本。</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
效果图：
浙公网安备 33010602011771号