使用CSS模仿百度首页
百度一下,你就知道
* {
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;
}
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 使用CSS模仿百度首页
本文地址: https://pptw.com/jishu/666802.html