1.简述
学习前端很重要的一个方法就是多写代码，比如可以模仿不同网站的页面，尝试用自己的代码去实现相同的页面布局，然后再去对比自己写的代码与网站代码的区别，及其中的优劣，通过对比来发现自己的不足，从而让自己对布局的能力增强。
理就是这么个理，今天就来实现hao123网站首页的顶部。
2.效果图：
大致实现的效果如下面的动图。
3.代码实现：
代码总体来说特别简单，凡事从简入繁，作为前端新人，烦请各位大佬对文章中哪些不好的，帮忙指出来，我认真做笔记。
HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="nav-sec">
<div class="nav-upside">
<div class="page-width">
<div class="logo">
<img src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png" alt="">
<a class="setHP" href="http://www.hao123.com/redian/sheshouyef.htm">设为首页</a>
</div>
<div class="weather">
<div class="weather-txt">
<div class="toggle-city">
<span>深圳</span>
<a href="javascript:void(0)" id="toggleCity">切换</a>
</div>
<div class="city-select" id="citySelect">
<div>
<span>更换城市</span>
<a class="city-cancle" href="javascript:void(0)" id="cityCancle">取消</a>
</div>
<form action="" method="post">
<select name="" id="" value="G 广东">
<option value="G 广东">G 广东</option>
<option value="B 北京">B 北京</option>
<option value="S 上海">S 上海</option>
<option value="G 广东">G 广东</option>
</select>
<select name="" id="" value="G 广东">
<option value="G 广东">G 广东</option>
<option value="B 北京">B 北京</option>
<option value="S 上海">S 上海</option>
<option value="G 广东">G 广东</option>
</select>
<select name="" id="" value="G 广东">
<option value="G 广东">G 广东</option>
<option value="B 北京">B 北京</option>
<option value="S 上海">S 上海</option>
<option value="G 广东">G 广东</option>
</select>
<input type="submit" value="确定">
</form>
</div>
<div class="seven-day"><a href="http://www.baidu.com/s?word=%E5%B9%BF%E4%B8%9C%E6%B7%B1%E5%9C%B3%E4%B8%80%E5%91%A8%E5%A4%A9%E6%B0%94%E9%A2%84%E6%8A%A5&tn=50000167_hao_pg&ie=utf-8">七日天气</a></div>
</div>
<div class="weather-date-layer">
<div class="weather-date">
<div class="date-a">
<span class="cloud-bg weather-info-icon today-icon"></span>
<span class="weather-info-detail">
<span>多云</span>
<span>20 ~ 30℃</span>
</span>
</div>
</div>
<div class="weather-date">
<div class="date-a">
<span class="cloud-bg weather-info-icon tomorrow-icon"></span>
<span class="weather-info-detail">
<span>多云</span>
<span>20 ~ 30℃</span>
</span>
</div>
</div>
<a title="点击查看天气" class="weather-date-link" href="http://www.baidu.com/s?word=%E5%B9%BF%E4%B8%9C%E6%B7%B1%E5%9C%B3%E5%A4%A9%E6%B0%94&tn=50000167_hao_pg&ie=utf-8"></a>
</div>
</div>
<div class="cn-date">
<div class="cn-date-detail-layer">
<div class="date-week-info" title="点击查看万年历">
<span>4月08日</span>
<span>周一</span>
<div class="wrap_yibuyi">
<div class="item_list">
<div class="item">
<span class="yi">宜</span>
<span>沐浴 捕捉</span>
</div>
<div class="item">
<span class="bu_yi">忌</span>
<span>沐浴 捕捉</span>
</div>
<div class="item">
<span class="yi">宜</span>
<span>沐浴 捕捉</span>
</div>
</div>
</div>
<a href="https://www.baidu.com/s?word=%E6%97%A5%E5%8E%86&tn=50000167_hao_pg&ie=utf-8&H123Tmp=nunew9" class="date-week-info-link-layer"> </a>
</div>
<div class="link-query">
<a href="http://www.baidu.com/s?word=%E5%86%9C%E5%8E%86%E6%9F%A5%E8%AF%A2&tn=50000167_hao_pg&ie=utf-8" title="农历查询">农历查询</a>
<a href="https://www.baidu.com/s?word=%E6%98%9F%E5%BA%A7%E8%BF%90%E5%8A%BF&tn=50000167_hao_pg&ie=utf-8" title="星座运势">星座运势</a>
</div>
</div>
</div>
<div class="email-side">
<label for="email-input"><a class="email_link" href="javascript:void(0)">邮箱:</a></label>
<input class="email_input" type="email" id="email-input">
<div class="email_more_info">
<div class="pass_sub">
<select name="" id="" value="soho">
<option value="soho">@soho.com</option>
<option value="163">@163.com</option>
<option value="sina">@sina.com</option>
</select>
<input type="password" placeholder="邮箱密码">
<input type="submit" value="提交">
</div>
</div>
</div>
<div class="user_info">
<span class="login"><a href="">登录</a></span>
<span><a href="">网盘</a> </span>
<div><a href="javascript:void(0)">手机扫码有好礼</a></div>
</div>
</div>
</div>
<div class="nav-downside">
<div class="page-width">
<div class="search-layer">
<div class="company-logo"><img src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-26/352f1d243122cf52462a2e6cdcb5ed6d.png" alt=""></div>
<div class="search-box">
<select name="" id="" value="web">
<option value="web">网页</option>
<option value="music">音乐</option>
</select>
<input type="text" placeholder="搜你想要的">
<input type="button" value="百度一下">
<div class="hot-news-tag">
<ul>
<li><a href="javascript:void(0)">周冬雨被曝恋情</a></li>
<li><a href="javascript:void(0)">全球首富离婚</a></li>
<li><a href="javascript:void(0)">消防收神秘礼物</a></li>
<li><a href="javascript:void(0)">赵立新注销微博</a></li>
<li><a href="javascript:void(0)">黎姿晒20年前旧照</a></li>
<li><a href="javascript:void(0)">周冬雨被曝恋情</a></li>
<li><a href="javascript:void(0)">全球首富离婚</a></li>
<li><a href="javascript:void(0)">消防收神秘礼物</a></li>
<li><a href="javascript:void(0)">赵立新注销微博</a></li>
<li><a href="javascript:void(0)">黎姿晒20年前旧照</a></li>
<li><a href="javascript:void(0)">周冬雨被曝恋情</a></li>
<li><a href="javascript:void(0)">全球首富离婚</a></li>
<li><a href="javascript:void(0)">消防收神秘礼物</a></li>
<li><a href="javascript:void(0)">赵立新注销微博</a></li>
<li><a href="javascript:void(0)">黎姿晒20年前旧照</a></li>
<li><a href="javascript:void(0)">周冬雨被曝恋情</a></li>
<li><a href="javascript:void(0)">全球首富离婚</a></li>
<li><a href="javascript:void(0)">消防收神秘礼物</a></li>
<li><a href="javascript:void(0)">赵立新注销微博</a></li>
<li><a href="javascript:void(0)">黎姿晒20年前旧照</a></li>
<li><a href="javascript:void(0)">周冬雨被曝恋情</a></li>
<li><a href="javascript:void(0)">全球首富离婚</a></li>
<li><a href="javascript:void(0)">消防收神秘礼物</a></li>
<li><a href="javascript:void(0)">赵立新注销微博</a></li>
<li><a href="javascript:void(0)">黎姿晒20年前旧照</a></li>
</ul>
<span class="tag-more">></span>
</div>
</div>
</div>
<div class="rolling-txt">
<div class="rolling-list">
<div class="item"><span class="dotted">·</span><span class="item-txt"><a href="javascript"> 记录你的日志1</a></span></div>
<div class="item"><span class="dotted">·</span><span class="item-txt"><a href="javascript"> 记录你的日志2</a></span></div>
<div class="item"><span class="dotted">·</span><span class="item-txt"><a href="javascript"> 记录你的日志3</a></span></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS部分
html,body{background-color: #eee;}
*{margin:0;padding:0;font-size: 12px;}
a{text-decoration: none!important; color: #999;}
.cl-float{overflow: hidden;}
.cloud-bg{background-image: url(https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/weather/v3/a1.png);}
.tomorrow-icon::after,.today-icon::after{content:"今";position: absolute;right:0;bottom:0;text-align:center;padding:2px;border-radius: 100%;background-color:#fff;font-size:12px;line-height:14px;border:solid 1px;width:14px;height:14px;font-weight: 400;transform: scale(0.8)}
.tomorrow-icon::after{content:"明";}
.nav-upside,.nav-downside{height: 97px;padding-top: 20px;box-sizing: border-box;background-color: #fff;padding-left:10px;padding-right: 10px;}
.nav-downside{padding-top: 0;border-bottom: solid 1px #ccc;}
.page-width{width: 1190px;margin:0 auto;}
.logo{position: relative;display: inline-block;width: 190px;}
.logo img{width:120px;margin-left: -6px;}
.logo .setHP{position: absolute; right: 6px; top: -9px; border-radius: 20px; border:solid 1px #efefef;padding:2px 6px; color: #999; font-family: tahoma;}
.weather {display: inline-block;margin-left: 55px;top: 0;vertical-align: top;height: 60px;}
.weather-txt{display: inline-block;position: relative;padding:4px}
.weather-txt:hover{background-color: #f2f4f8;}
.weather-txt .toggle-city{margin-bottom: 2px;}
.weather-txt .toggle-city a{margin-left: 1px; color:#999;}
.city-select{position: absolute;visibility: hidden;width: 160%;background-color: #f2f4f8;padding:8px;top: 0;left: 0;}
.city-select select{display: block;width: 100%;margin:4px 0;}
.seven-day a{color:#222;}
.weather-date-layer{display: inline-block;top: 0;vertical-align: top;padding:4px;margin-left: 50px;position: relative;}
.weather-date-layer:hover{background-color: #f2f4f8;cursor: pointer;}
.weather-date-link{position: absolute;top:0;left:0;width:100%;height:100%;}
.weather-date{display: inline-block;margin-right:30px;}
.weather-info-icon{position: relative;float: left;display: inline;*zoom: 1;width: 38px;height: 35px;background-repeat: no-repeat;}
.weather-info-detail{float:right}
.weather-info-detail span{position: relative;display: block;width: 100%;}
.cn-date{display: inline-block;padding:5px;}
.cn-date a, .cn-date span{line-height: 1.5;}
.cn-date:hover{background-color: #f2f4f8; cursor: pointer;}
.date-week-info{position:relative;display: inline-block;margin-right: 15px;}
.date-week-info .bu_yi{display:inline-block;background-color:olive;color:#fff;padding:0px 4px;}
.date-week-info .yi{display:inline-block;background-color:green;color:#fff;padding:0px 4px;}
.wrap_yibuyi{height: 18px;overflow: hidden;position: relative;width:110%}
.wrap_yibuyi .item_list{position: absolute; transition:all ease-in-out 1s;left:0;}
.date-week-info-link-layer{display:inline-block;position: absolute; width:100%;height:100%;top: 0;left:0;}
.link-query{display: inline-block;float: right;top:0;}
.link-query a{color: #222;display:block;}
.email-side{display: inline-block; vertical-align: top;margin-left: 20px;padding:10px;position: relative;}
.email-side:hover{background-color: #f2f4f8;}
.email_link{color:#222!important;}
.email_link:hover{text-decoration-line: underline!important;}
.email_input{width:110px;cursor: pointer;}
.email_more_info{position: relative;text-align: right;}
.email_more_info select,.email_more_info input{display:block;width:114px;margin:2px 0}
.pass_sub{display: none}
.pass_sub input{display:inline-block;}
.pass_sub input[type="password"]{width:66px;}
.pass_sub input[type="submit"]{width:40px;}
.user_info{padding:5px;display: inline-block;margin-left: 35px;vertical-align: top;}
.user_info a{color: #222;}
.user_info:hover{background-color: #f2f4f8;}
.user_info span{ width:40px;display:inline-block;padding:0 0 0 10px;letter-spacing: 2px;}
.user_info .login{border-right: solid 1px #ccc;padding-left: 0;}
.search-layer{height: 60px;display: inline-block;margin-left:10%;}
.company-logo{display:inline-block; vertical-align: middle}
.company-logo img{height: 40px;}
.search-box{position:relative;height:40px;border:solid 1px dodgerblue;display:inline-block;vertical-align: middle}
.search-box option,.search-box select{width:70px;height:40px;font-size: 16px;color:#999;text-align: center;padding-left:10px}
.search-box input[type="text"]{width:500px;height:40px;border: 0;outline: 0;vertical-align: top;font-size: 16px;}
.search-box input[type="text"]:focus{outline: 0;}
.search-box select,.search-box select:focus{outline: 0;border: 0;}
.search-box input[type="button"]{outline: 0;border:0;background-color: dodgerblue;color: #fff;height:40px;line-height: 40px;text-align: center;width:120px;vertical-align: top;font-size: 16px;}
.search-box input[type="button"]:focus{outline: 0;}
.hot-news-tag{position: absolute; height: 30px;overflow: hidden;background:#fff;padding:10px;margin-top: 2px;}
.hot-news-tag ul{width: 100%;}
.hot-news-tag .tag-more{position: absolute;right: 10px;top: 0;transform: rotate(90deg);color:#222;font-size:25px; top:10px;cursor: pointer;}
.hot-news-tag ul li{list-style: none;display: inline-block;margin: 10px 15px 0 0}
.hot-news-tag ul li a{color: #222;font-size: 14px;}
.rolling-txt{display: inline-block;margin-left:20px;width:120px;height:40px;vertical-align: middle;overflow: hidden;position: relative;}
.rolling-list{white-space: nowrap;position: absolute;line-height: 40px;transition: all ease-in-out 1s; left: 0;}
.rolling-list>.item{font-size: 14px;line-height: 14px;padding-left: 20px;position: relative;display:inline-block; }
.rolling-list .dotted{font-size: 40px;position: absolute;top:-2px;}
.rolling-list .item-txt{margin-left: 10px;}
.rolling-list .item-txt a{color: #222;}
javascript 部分
function showEmailMoreDetail(isClose){
var moreDetail = document.querySelector(".pass_sub");
var emailSide = document.querySelector(".email-side");
if(isClose){
moreDetail.style.display="none";
emailSide.style.cssText = ""
}else{
moreDetail.style.display="inline-block";
emailSide.style.cssText = "background-color:#f2f4f8;"
}
}
function showHotNewsTagMore(isShowMore){
var hotNewsBox = document.querySelector(".hot-news-tag");
if(!isShowMore){
hotNewsBox.style.cssText = "box-shadow:2px 2px 4px 2px #ccc;height:auto;";
document.querySelector(".hot-news-tag .tag-more").style.cssText = "transform:rotate(270deg);"
}else{
hotNewsBox.style.cssText = "";
document.querySelector(".hot-news-tag .tag-more").style.cssText = ""
}
}
window.onload = function(){
var yibuyi_scroll_count = 0; //宜不宜
var isCloseEmailDetail = false;
var searchBar_scroll_count =0;
var isHotNewsTagMore = false;
/* 城市切换 */
document.querySelector("#toggleCity").onclick = function(){
document.querySelector("#citySelect").style.cssText="visibility:visible;z-index:1000;";
}
document.querySelector("#cityCancle").onclick = function(){
document.querySelector("#citySelect").style.cssText="";
}
/* 黄历滚动 */
setInterval(function(){
var itemlist = document.querySelector(".item_list");
var itemNum = itemlist.querySelectorAll(".item").length;
yibuyi_scroll_count ++;
if(yibuyi_scroll_count >= itemNum){
yibuyi_scroll_count = 0;
}
var moveCssText = "top:"+(-18*yibuyi_scroll_count)+"px;";
itemlist.style.cssText = moveCssText;
},3000);
/* 搜索框旁边 新闻热条滚动 */
setInterval(function(){
var itemlist = document.querySelector(".rolling-list");
var itemNum = itemlist.querySelectorAll(".item").length;
searchBar_scroll_count ++;
if(searchBar_scroll_count >= itemNum){
searchBar_scroll_count = 0;
}
var moveCssText = "left:"+(-120*yibuyi_scroll_count)+"px;";
itemlist.style.cssText = moveCssText;
},3000);
/*邮箱 */
document.querySelector(".email_link").onclick = function(){
showEmailMoreDetail(isCloseEmailDetail);
isCloseEmailDetail = !isCloseEmailDetail;
}
document.querySelector(".email_input").onclick = function(){
showEmailMoreDetail(isCloseEmailDetail);
isCloseEmailDetail = !isCloseEmailDetail;
}
/* 搜索框下方的更多tag */
document.querySelector(".hot-news-tag .tag-more").onclick = function(){
showHotNewsTagMore(isHotNewsTagMore);
isHotNewsTagMore = !isHotNewsTagMore;
}
}