完整版"/>
仿百度首页完整版
效果：
文档结构：
从网页上摘下来的图片（省的自己去弄雪碧图）
源码：
html+js(少量，内嵌)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="nav "><div class="navleft"><a href="#">新闻</a><a href="#">hao123</a><a href="#">地图</a><a href="#">直播</a><a href="#">视频</a><a href="#">贴吧</a><a href="#">学术</a><a href="#" id="more">更多</a><div id="ha"><table><tr><td><div style="text-align: center;"><a href="#" class="blo"><img src="images/a1.png" alt=""></a></br><a href="#">翻译</a></div></td><td><div style="text-align: center;"><a href="#" class="blo"><img src="images/a2.png" alt=""></a></br><a href="">学术</a></div></td><td><div style="text-align: center;"><a href="" class="blo"><img src="images/a3.png" alt=""></a></br><a href="">文库</a></div></td></tr><tfoot><tr><td colspan="3" style="text-align: center;"><a href="#">查看全部百度产品></a></td></tr></tfoot></table></div></div><div class="navright"><a href="#" id="login">登录</a><a href="#">设置</a></div></div><div class="main"><div class="pic"><a href=""><img src="images/1.png" alt=""></a></div><div class="search"><div class="holder"><input type="text" id="searchcontent"/><div class="photo"></div><a href="#">百度一下</a></div></div></div><div class="foot"><div class="footout"><a href="#">关于百度</a><a href="#">about BaiDu</a><a href="#">使用百度必读</a><a href="#">帮助中心</a><a href="#">京备10212222200</a></div></div><script>let moreBtn=document.getElementById("more");let haBtn=document.getElementById("ha");let searchBtn=document.getElementById("searchcontent");moreBtn.onmouseover=function(){haBtn.style.display="block";}moreBtn.onmouseout=function(){haBtn.style.display="none";}haBtn.onmouseover=function(){haBtn.style.display="block";}haBtn.onmouseout=function(){haBtn.style.display="none";}</script>
</body>
</html>css
/*css reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*end*/
.navleft{float: left;height: 40px;
}
.navright{float: right;height: 40px;
}
.nav{*zoom:1;
}
#ha{width: 180px;height: 150px;border-radius: 10px;position: absolute;top: 40px;left: 340px;box-shadow: 5px 0 5px lightgray,0 -5px 5px lightgray,0 5px 5px lightgray,5px 0 5px lightgray;display: none;
}
.nav::after{clear: both;content: "";display: block;height: 0;visibility: hidden;
}
.navleft>a{font: 13px/23px Arial,sans-serif;float: left;text-decoration: none;color: black;margin: 10px;padding : 5px 10px;
}
.navright>a{font: 13px/23px Arial,sans-serif;float: right;text-decoration: none;color: black;margin: 20px;padding: 3px 10px;
}
table a{font: 13px/23px Arial,sans-serif;text-decoration: none;margin: 5px;padding: 5px;
}
table img{width: 42px;height: 42px;margin-top: 8px;margin-left: 8px;margin-right: 8px;border: 1px solid rgba(0,0,0,.03);border-radius: 8px;display: block;
}
.nav a:hover{color: blue;
}
table div:hover{color: blue;background-color: rgba(0,0,0,.03);
}
#login{background-color: #7B8EF4;color: white;border-radius: 5px;
}
#login:hover{background-color:#4E6EF2;
}
.main{text-align: center;
}
.pic{text-align: center;
}
.pic img{width: 300px;height: 150px;
}
.search{text-align: center;width:100% ;height: 30px;
}
.foot{position: fixed;bottom: 0px;
}
.footout{width: 100%;display: flex;justify-content: center;align-items: center;
}
.foot a{padding-left: 200px;text-decoration: none;color: black;
}
.search{text-align: center;
}
.holder{display: inline-block;position: relative;
}
#searchcontent{height: 36px;width: 500px;float: left;border-style: solid;border-radius: 10px 0 0 10px;border-width: 2px;border-color: lightslategray;color: black;
}
.photo{position: absolute;background: url("../images/2.png") no-repeat -0px -48px;left: 480px;top: 10px;width: 24px;height: 20px;
}
.photo:hover{background: url("../images/2.png") no-repeat -0px -72px;
}
#searchcontent:focus{border-color: blue !important;
}
#searchcontent:hover{border-color: black;
}
.search a{text-decoration: none;display: inline-block;width: 100px;/*这里也可以使用基线对齐，height40px*/height: 42px;line-height: 36px;text-align: center;border-radius: 0px 5px 5px 0px;font-family: "微软雅黑";cursor: pointer;background-color: #4E6EF2;color: white;float: left;
}
.search::after{clear: both;content: "";display: block;height: 0;visibility: hidden;
}
.search a:hover{background-color: blue;
}
#ai{margin: 0 auto;width: 50px;height: 50px;background-color: red;
}
更多推荐
仿百度首页完整版
发布评论