下面是CSS模仿百度主页的代码:
body { font-family: '微软雅黑', sans-serif; } a { text-decoration: none; color: #333; } #logo { width: 150px; height: 40px; background: url('https://www.baidu.com/img/bd_logo1.png') no-repeat; } #search-form { width: 500px; margin: 0 auto; padding-top: 100px; } #search-input { width: 390px; height: 30px; border: 1px solid #ccc; border-right: none; padding-left: 10px; float: left; } #search-button { width: 100px; height: 32px; border: none; background-color: #3385ff; color: #fff; font-weight: bold; float: left; cursor: pointer; } #hot-topic { margin-top: 20px; } #hot-topic li { float: left; margin-right: 10px; } #hot-topic li a { font-size: 14px; } #news-list { width: 600px; margin: 0 auto; margin-top: 50px; } .news-item { margin-bottom: 20px; } .news-item .title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .news-item .time { font-size: 12px; color: #999; } .news-item .content { font-size: 14px; color: #333; line-height: 1.5; margin-top: 10px; }
这里大家主要使用了id选择器、类选择器、标签选择器等常用的选择器,还涉及到了盒子模型、浮动、文字排版等css基础知识。当然,这只是一个简单的例子,实际应用中还有很多需要考虑的地方。