效果:
文档结构:
从网页上摘下来的图片(省的自己去弄雪碧图)
源码:
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;
}