css仿百度新闻

如今，大家看新闻已经不再是拿报纸翻阅了，我们已经开始使用互联网来浏览新闻。而在这一便捷的背后，隐藏的是无数网站的设计与构建。

而其中，百度新闻就是一个很好的例子。它不但新闻内容涵盖广泛，而且它的UI设计和CSS构建既简单又具有美感。有没有兴趣仿造一下呢？

/* 接下来，让我们看看百度新闻究竟长成了什么样子 */body {
      font-size: 14px;
      font-family: 'Microsoft Yahei';
      color: #333;
      background-color: #F4F4F4;
      overflow-x: hidden;
}
.container {
      width: 1180px;
      margin: 0 auto;
      background-color: #fff;
      padding: 0 15px 30px;
}
.top-bar {
      height: 56px;
      line-height: 56px;
      background-color: #ebebeb;
}
.logo {
      display: inline-block;
      margin-right: 15px;
      background-image: url('../images/bdlogo.png');
      background-position: center;
      background-repeat: no-repeat;
      width: 120px;
      height: 42px;
      text-indent: -100px;
}
.nav {
      display: inline-block;
      margin: 0 0 0 38px;
}
.nav a {
      display: inline-block;
      height: 56px;
      line-height: 56px;
      padding: 0 22px;
      color: #333;
}
    /* 看起来不错，较为简单，如果你感兴趣，可以自己尝试一下哦！ */ 

以上，就是一个简单版的百度新闻的仿造CSS样式，当然如果需要更具体的效果，还需要我们再端详一下，这一点可以通过百度新闻来了解。

除了基本的UI设计，CSS还可以构建很多复杂的效果哦，像特殊字体的处理，HTML5的使用，以及移动端优化等等。总之，在前端设计中，CSS是举足轻重的。如果你对CSS设计感兴趣，相信你也能像百度新闻一样，做出更加精美舒适的网站。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！