<html>
<head>
<title>ZZ Web</title>
<style>
*{font: size 16px;text-decoration: none;}
a:hover{color:blue}
a:visited{color:black}
a:link{color: black}
.topNav{width:50%;height: 50px;float: left;}
.topNav a {text-decoration: none;margin: 0px 15px;font-size: 15px;}
.login{width:50%;height: 50px;float: left;text-align:right; }
.main{width: 100%;height: 500px;float: left;}
.logo{text-align: center;}
.logo img{width: 240px;}
.serachBox{width: 500px;height: 50px;margin: 50px auto 0px auto;}
.serachBox input {width: 390px;height: 40px;}
.serachBox button {width: 100px;height: 40px;padding: 0px;border: 0px;color:white;background-color: rgb(12, 131, 241);}
.HotSerach{width: 500px;margin: 50px auto 0px auto;}
.HotSerach p {width: 250px;height: 30px;line-height: 30px; float :left ;margin:2px 0px 2px 0px;font-size:14px ;}
#ButtonLogin{background-color: rgba(33, 106, 243, 0.863);padding: 5px 15px;color: white;margin-left: 25px;border-radius: 10px;}
</style>
</head>
<body>
<div class="topNav">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">直播</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">网盘</a>
<a href="#">文库</a>
<a href="#">更多</a>
</div>
<div class="login">
<a href="#">设置</a>
<a id ="ButtonLogin">登录</a>
</div>
<div class="main">
<div class="logo">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
</div>
<div class="serachBox">
<input type="text"/>
<button>搜索</button>
</div>
<div class="HotSerach">
<p>赓续中华文脉</p>
<p>妹妹8科成绩总分66 哥哥回应</p>
<p>50多辆车在高速离奇炸胎热</p>
<p>每个春运的梦里 都是家的方向</p>
<p>驻马店一仓库起火黑烟冲天</p>
<p>古巨基回应小舅子欠债数百万</p>
</div>
</div>
</body>
</html>