淘先锋技术网

首页 1 2 3 4 5 6 7

在前端开发中,CSS是不可或缺的一部分。今天我来分享一下如何使用CSS仿百度的效果。

/* 去除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置页面全屏 */
html,body {
width: 100%;
height: 100%;
}
/* 百度logo */
.logo {
width: 120px;
height: 30px;
background-image: url(https://www.baidu.com/img/bd_logo1.png);
background-repeat: no-repeat;
background-size: contain;
}
/* 搜索框 */
.search{
width: 600px;
height: 40px;
margin: 50px auto;
position: relative;
border-radius: 20px;
background-color: #f2f2f2;
}
.search input {
position: absolute;
top: 5px;
left: 10px;
width: 80%;
height: 30px;
border-radius: 20px;
border: none;
padding-left: 20px;
font-size: 20px;
}
.search button{
position: absolute;
top: 5px;
right: 10px;
width: 50px;
height: 30px;
border-radius: 20px;
border: none;
background-color: #3385ff;
color: #fff;
font-size: 16px;
}

通过上面的代码,我们可以仿百度实现页面全屏、百度logo、搜索框等效果。当然,这只是简单的样式仿制,还有很多交互未实现。但是通过这个简单的例子,我们可以了解到如何使用CSS实现页面布局和样式效果。