css模仿百度页面 |wordpress评论css

/* 设置页面的全局样式 */
body {
font-family: Arial, sans-serif;
}
a {
color: #333;
text-decoration: none;
}
/* 模仿百度首页的顶部导航栏 */
.top-nav {
background-color: #fff;
height: 40px;
border-bottom: 2px solid #ebebeb;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.top-nav .logo {
float: left;
margin-left: 20px;
line-height: 40px;
}
.top-nav .search {
float: left;
margin-left: 20px;
margin-top: 6px;
border: none;
border-radius: 20px;
height: 28px;
width: 300px;
padding-left: 15px;
font-size: 14px;
}
.top-nav .button {
float: left;
margin-left: 10px;
margin-top: 6px;
height: 28px;
background-color: #3385ff;
color: #fff;
border: none;
border-radius: 20px;
padding: 0 20px;
}
/* 模仿百度首页的主要内容区域 */
.main {
padding-top: 60px;
text-align: center;
}
.main .title {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.main .input-box {
margin: 0 auto;
width: 550px;
}
.main .input-box input {
border: none;
border-radius: 20px;
height: 50px;
width: 500px;
padding: 0 20px;
font-size: 20px;
margin-right: -4px;
float: left;
}
.main .input-box .button {
float: right;
border: none;
border-radius: 20px;
height: 50px;
width: 50px;
background-color: #3385ff;
color: #fff;
}
/* 模仿百度首页的底部信息栏 */
.footer {
margin-top: 100px;
text-align: center;
font-size: 14px;
color: #666;
line-height: 30px;
}
.footer a {
color: #666;
}

以上是模仿百度首页所使用的CSS样式代码。通过上述代码，大家可以更好地掌控网页的样式和布局，达到模仿百度首页的效果。当然，CSS还可以有很多创意和玩法，需要大家在实践中不断探索和实践。