电话
13363039260
使用CSS模仿百度首页
2024-01-18 14:53 小编
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
text-align: right;
padding-top: 25px;
}
.header a {
color: black;
font-size: 14px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}
.header a:hover {
color: blue;
}
.menu {
list-style:none;
display:none;
background-color: #f4f4f4;
/*定位*/
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 500px;
}
/*鼠标置于更多产品上时显示*/
.more:hover+.menu {
display: block;
}
.more {
background-color: #38f;
color: white;
font-size: 14px;
padding: 5px;
}
.content {
margin-top: 60px;
}
.search {
/*给定宽度 结合左右margin auto实现水平居中*/
width: 650px;
margin: 0 auto;
/*让块内部的行内元素和文本水平居中*/
text-align: center;
}
#input {
width: 460px;
height: 30px;
border: 1px solid gray;
outline: none;
}
/*聚焦时*/
#input:focus {
border: 1px solid #38f;
}
#go {
color:white;
padding: 7px 18px;
font-size: 14px;
background-color: #38f;
text-decoration: none;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<div>
<a href="">糯米</a>
<a href="">新闻</a>
<a href="">hao123</a>
<a href="">地图</a>
<a href="">视频</a>
<a href="">贴吧</a>
<a href="">登录</a>
<a href="">设置</a>
<span>更多产品</span>
<ul>
<li><a href="">测试</a></li>
<li><a href="">测试</a></li>
<li><a href="">测试</a></li>
<li><a href="">测试</a></li>
<li><a href="">测试</a></li>
</ul>
</div>
<!-- 中间内容 -->
<div>
<div>
<img src="http://www.baidu.com/img/bd_logo1.png" width="240" alt="">
<!-- 搜索框 -->
<div>
<input id="input" type="text"><a id="go" href="">百度一下</a>
</div>
</div>
</div>
<!-- 底部区域 -->
<div></div>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 