Question

我正在创建一个名为WebSpace的网站，我希望标题背景颜色从头到尾延伸。目前，它看起来像这样：

enter image description here

如果可能的话，我想摆脱顶部，左侧和右侧的额外空白，使用干净的解决方案。

这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/style.css"/>
    <link rel="stylesheet" href="/assets/layout.css"/>
    <title>WebSpace</title>
  </head>
  <body>
    <div class="row title">
      <span class="title">WebSpace</span>
    </div>
  </body>
</html>

style.css文件：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,100&subset=cyrillic,cyrillic-ext,latin-ext,latin);
body { 
    font-family: 'Roboto', sans-serif;
}
span.title {
    font-weight: 100;
    font-size: 66px;
    width: 100%;
    float: left;
}

我的layout.css文件：

body { overflow-x:hidden; !important}
html { width: 100%; }
div.row { width: 100%; }
div.span10 { width: 100%; }
div.span9 { width: 90%; }
div.span8 { width: 80%; }
div.span7 { width: 70%; }
div.span6 { width: 60%; }
div.span5 { width: 50%; }
div.span4 { width: 40%; }
div.span3 { width: 30%; }
div.span2 { width: 20%; }
div.span1 { width: 10%; }

/*Row Styles*/
div.title {
    background-color: #F7D023;
    height: 100px;
    color: white;
    position: absolute:
    left: 0;
    right: 0;
    overflow-x:hidden;  !important
}

Answer 1

浏览器使用不同的默认样式表。放：

html, body {
    padding: 0;
    margin: 0;
}

JSFiddle

或者更好的是，使用CSS reset。

使用CSS创建全角背景颜色

1 个答案: