第一次前端考核，师长门要求我们模范一个百度搜索的首页面，昨天已经发布了第二次的考核作业了，今天我把按照第一次考核的师长给的建议，做了些代码规范的修改。我做的修改有，一、把原来写在html内部的js代码用<script src=""></srript>引用给分离到独立的js文件了；二、给html\css\js的相应标签都加上 了注释，方便以后自己和别人查看；三、在html中基本按照一行一个个标签，在css中一行一个属性，并且按照显示、定位、盒子、文字、其他属性进行先后顺序的排放。
我实现的功能是基本的html布局，css样式编写，js部分只做了一个二级导航。
效果图如下：
下面是具体实现代码。
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<!--为网页标题添加icon-->
<link rel="shortcut icon" href="../img/baidu.ico">
<link rel="stylesheet" type="text/css" href="../css/new_Baidu4.css">
</head>
<body>
<script src="../js/baidu.js"></script>
<div id="head">
<!--导航栏-->
<ul class="nav">
<li>
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1"
target="_blank" id="feiyan" class="bold">抗击肺炎</a>
</li>
<li>
<a href="http://news.baidu.com/" target="_blank" class="bold">新闻</a>
</li>
<li>
<a href="https://www.hao123.com/" target="_blank" class="bold">hao123</a>
</li>
<li>
<a href="https://map.baidu.com/@12609384.2,2631450.58,12z" target="_blank" class="bold">地图</a>
</li>
<li>
<a href="http://v.baidu.com/?fr=bd" target="_blank" class="bold">视频</a>
</li>
<li>
<a href="https://tieba.baidu.com/index.html" target="_blank" class="bold">贴吧</a>
</li>
<li>
<a href="http://xueshu.baidu.com/" target="_blank" class="bold">学术</a>
</li>
<li>
<a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_blank" id="login">登录</a>
</li>
<li>
<a href="#" id="setting">设置</a>
</li>
</ul>
</div>
<!--盒子模型：一个div大盒里面再放一个diplay变成block的的文字盒子-->
<div id="more_Products_Outside" class="outside_Mouseout">
<span id="more_Products_Inside" class="inside_Mouseout">更多产品</span>
</div>
<!--二级导航-->
<ul id="products_List">
<!--在每个li中插入嵌套在a标签中的图片和文字-->
<li><a href="http://e.baidu.com/ebaidu/home?refer=889" >
<img src="../img/earth.jpg"><br/>
<span class="display">百度营销</span>
</a></li>
<li><a href="http://music.taihe.com/" >
<img src="../img/music.jpg"><br/>
<span class="display">音乐</span>
</a></li>
<li><a href="http://image.baidu.com/" >
<img src="../img/picture.jpg"><br/>
<span class="display">图片</span>
</a></li>
<li><a href="https://zhidao.baidu.com/">
<img src="../img/know.jpg"><br/>
<span class="display">知道</span>
</a></li>
<li><a href="https://wenku.baidu.com/">
<img src="../img/articles.jpg"><br/>
<span class="display">文库</span>
</a></li>
<li><a href="http://top.baidu.com/">
<img src="../img/data.jpg"><br/>
<span class="display">风云榜</span>
</a></li>
<li>
<a href="#" id="all_Products">全部产品>></a><br/><br/>
</li>
</ul>
<div id="body">
<!--百度的中间图标-->
<div class="logo" ><a href="https://www.baidu.com/s?wd=%e6%9d%8e%e6%96%87%e4%ba%ae&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs"
target="_blank"class="logo" title="众志成城，抗击疫情">
<img src="../img/baiDu_logo.jpg" ></a>
</div>
<!--盒子有误，应以在输入栏和相机按钮外再加一个盒子-->
<div >
<form id="engine" >
<span class="input" ><input type="text" name="content" id="text"></span>
<span class="input" ><a href="#" id="camera"> </a></span>
<input type="submit" value="百度一下" name="baidu" id="baidu">
</form>
</div>
<!--二维码部分-->
<div class="scanner">
<img src="../img/scanner.jpg" class="scanner">
</div>
<p class="tip1">下载百度APP</p>
<p class="tip2">有事搜一搜 没事看一看</p>
</div>
<!--版尾模块-->
<!--以后不要用 -->
<div id="foot">
<p class="footer">
<a href="https://www.baidu.com/cache/sethelp/help.html"
target="_blank">把百度设为主页</a>
<a href="http://home.baidu.com/" target="_blank">关于百度</a>
<a href="http://ir.baidu.com/" target="_blank">About Baidu</a>
<a href="http://e.baidu.com/?refer=888" target="_blank">百度推广</a>
(京)-经营性-2017-0020</p>
<p class="footer">
©2020 Baidu
<a href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a>
<a href="#">意见反馈</a>
京ICP证030173号<img src="../img/ICP.jpg">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
<img src="../img/police.jpg">
</p>
<div>
</body>
</html>
``
css代码
```javascript
*{margin:0px auto;font-family:"微软雅黑";padding:0px;}
/*根据页面大小自动添加滚动条*/
body{overflow:auto;}
#head{margin-bottom:0px;overflow:hidden;margin-top:10px;}
/*导航栏样式,对象是整个ul*/
.nav{
position:relative;right:85px;/*相对定位，相对原来位置左移85px*/
float:right;/*向左浮动*/
text-align:right;
list-style:none;
background-image:url(../img/red_point.jpg);/*抗击肺炎右上角的红点*/
background-repeat:no-repeat;
background-position:67px top;
}
/*ul下的li*/
.nav li{
float:left;/*在ul里面每个li向左浮动*/
margin-left:12px;
font-size:13px;
line-height:25px;
padding:2px 3px;
}
.nav li a{color:#000;}
.nav li a:hover{color:#00f;}
/*hover伪类，改变字体颜色*/
/*三个特别的分开设置*/
#feiyan{color:#f00;}
#feiyan:hover{color:#00f;}
#login{color:#000;}
#login:hover{color:#00f;}
#setting{color:#000;}
#setting:hover{color:#00f;}
/*共同的一同设置*/
.bold{font-weight:bold;color:#000;}
/*js的二级导航样式*/
.inside_Mouseout{
color:#fff;/*鼠标移出后内盒样式*/
font-size:13px;padding:3px;
background-color:#38f;
}
.inside_Mouseover{
font-size:13px;
color:#333;/*鼠标移入时内盒样式*/
background-color:#f8f8f8;
}
.outside_Mouseout{/*鼠标移出时外盒样式*/
position:absolute;top:0px;right:0px;
width:85px;
height:43px;
text-align: center;
line-height: 43px;
background-color:#fff;
}
/*鼠标移入时外盒样式*/
.outside_Mouseover{
position:absolute;top:0px;right:0px;
border:1px solid #f0f0f0;
width:85px;
height:43px;
text-align: center;
line-height: 43px;
background-color:#f8f8f8;
}
/*二级导航样式*/
#products_List{display: none;
position:absolute;top:43px;right:0px;
}
/*二级导航各元素样式*/
#products_List li{
padding-top:5px;
padding-bottom:5px;
border-bottom:1px solid #f0f0f0;
border-left:1px solid #f0f0f0;
border-top:1px solid #f0f0f0;
width:85px;
text-align: center;
background-color:#f8f8f8;
list-style: none;
}
#all_Products{text-decoration:underline;}
#products_List li a img{
height:40px;
width:40px;
}
#products_List li a{font-size:12px;
text-decoration:none;
color:#333;
}
#products_List li a:hover{text-decoration:underline;}
#body{margin-bottom:50px;}
/*中间logo的样式*/
.logo img{
position:absolute;top:22px;left:3px;
height:88px;
width:258px;
}
.logo{
display:block;
width:270px;
height:129px;
position:relative;
margin-bottom:25px;
}
/*搜索引擎样式*/
#engine{height:36px;
width:638px;
overflow:hedden;
margin-bottom:70px;
overflow:hidden;
border:1px solid #999;
}
/*输入栏和小相机*/
.input{float:left;
position:relative;
}
/*输入栏*/
#text{border:0px;
width:501px;
height:36px;
}
.input a{display: block;
height:36px;
width:37px;
text-decoration:none;
}
#camera{background-image:url(../img/camera_gray.jpg);
background-repeat: no-repeat;
background-position:1px 3px;
}
#camera:hover{background-image:url(../img/camera_blue.jpg);
background-repeat: no-repeat;
background-position:3px 3px;
}
/*蓝色按钮*/
#baidu{background-color:#3385ff;
color:#fff;
width:100px;
height:36px;
border:0px;
}
#baidu:hover{cursor:pointer;
background-color:#3376ff;
}
/*二维码*/
.scanner{width:117px;
height:117px;
}
/*二维码小面的小广告*/
.tip1,.tip2{width:148px;
text-align:center;
}
.tip1{font-size:16px;
line-height:32px;
letter-spacing:3px;
}
.tip2{font-weight:300px;
font-size:14px;
line-height: 14px;
color:#999;
}
/*版尾模块*/
.footer{font-size:12px;
line-height:22px;
margin-top:0px;color:#999;
width:560px;
text-align: center;
}
.footer a{color:#999;}
.footer a:hover{color:#999;}
.footer img{height:22px;
width:17px;
vertical-align:middle;
}
js代码
window.onload=function (){
var oMPI=document.getElementById('more_Products_Inside');// 盒子的里层
var oMPO=document.getElementById('more_Products_Outside');// 盒子的外层
var oList=document.getElementById('products_List');// 二级导航
var oSet=document.getElementById('setting');// 盒子隔壁的另一个盒子
// 鼠标移到盒子里时，二级导航展开，盒子的样式改变
oMPO.onmouseover=function () {
oList.style.display='block';
oMPO.className='outside_Mouseover';
oMPI.className='inside_Mouseover';
}
// 鼠标移到隔壁盒子意味着鼠标移出更多产品盒子，二级导航隐藏，盒子样式还原。
oSet.onmouseover=function (){
oList.style.display='none';
oMPO.className='outside_Mouseout';
oMPI.className='inside_Mouseout';
}
// 当鼠标移到二级导航时，二级导航不要消失，样式效果保持不变
oList.onmouseover=function () {
oList.style.display='block';
oMPO.className='outside_Mouseover';
oMPI.className='inside_Mouseover';
}
// 鼠标移出二级导航时，二级导航消失，样式效果还原
oList.onmouseout=function (){
oList.style.display='none';
oMPO.className='outside_Mouseout';
oMPI.className='inside_Mouseout';
}
}
扫一扫
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
