在前端开发中,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实现页面布局和样式效果。