[分享]css做百度页面

CSS可以让百度页面变得更加美观和易于操作。在这里，我们将看到如何使用CSS来设计一个百度页面。

 /* 页面整体样式 */
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
  }

  /* 头部样式 */
  #header {
    background-color: #fff;
    padding: 20px;
    border-bottom: 1px solid #ccc;
  }

  #logo {
    display: inline-block;
    width: 80px;
    height: 44px;
    background-image: url('http://www.baidu.com/img/bd_logo1.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 20px;
  }

  #search-box {
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 0 10px;
  }

  #search-box input[type="text"] {
    border: none;
    outline: none;
    width: 80%;
    font-size: 16px;
  }

  #search-box button {
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    width: 20%;
  }

  #search-box button img {
    max-width: 100%;
    max-height: 100%;
  }

  /* 主要内容样式 */
  #main {
    padding: 20px;
    margin-top: 50px;
  }

  /* 搜索结果列表样式 */
  .result-item {
    margin-bottom: 20px;
  }

  .result-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  } 

使用CSS来设计百度页面可以使页面看起来更加整洁和专业。您可以看到上面的代码段对于整个页面的样式都进行了定义。头部样式包括了百度的logo和搜索框。主要内容包括了搜索结果列表的样式。我们可以通过使用类（class）选择器来定义每个搜索结果的样式，以便样式可以重复使用。

这只是CSS可以实现的一部分。希望这篇文章能够对那些想要更加了解CSS和如何用CSS设计百度页面的读者有所帮助。