html - 背景颜色未占据全宽-6ren

html - 背景颜色未占据全宽

转载作者：行者123 更新时间：2023-11-28 15:49:04

27

4

我正在处理我的作品集，它有三个部分标签。我已经为整个 body 声明了背景颜色，但是，我希望不同的颜色为第 2 和第 3 部分标签采用全宽度 - 就像 body 背景颜色一样。

虽然我确实尝试使用下面的代码来实现这一点，但两个部分标签的背景颜色都没有占用整个页面宽度。对此的任何帮助将不胜感激。

HTML

<html>

<head>
    <title>Srujan Sagar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

    <header>
        Srujan Sagar
    </header>

    <section>
        <p class="main-content">
            Hello! I'm an India-based self-taught FrontEnd Developer.
            <br />
            <br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
        </p>

        <img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />

        <ul class="social-links">
            <li>
                <a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
                    <span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
                </a>
            </li>

            <li>
                <a href="#" target="_blank">
                    <span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
                </a>
            </li>

            <li>
                <a href="#" target="_blank">
                    <span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
                </a>
            </li>
        </ul>
        <br /> <br />
        <p class="line"></p>
    </section>

<nav class="main-content">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<section class="second-content">
  <h3>Hi there!</h3>
</section>
<section class="third-content">
  <h3>Hi there!</h3>
</section>
</body>

</html>

CSS:

body {
    /*background: url('../images/background_img.jp');*/
    background-color: #FFFAFB;
    text-align: center;
    font-family: 'Lato', sans-serif;
}

header {
    font-family: 'Pacifico', sans-serif;
    letter-spacing: 3px;
    font-size: 90px;
    padding-top: 10px;
    color: #A63A50;
  }
.main-content {
    font-size: 1.3em;
    font-family: 'Raleway', sans-serif;
    color: #CA7989;
    width: 500px;
    margin: 0 auto;
    padding-top: 25px;
}
.logo {
    border-radius: 50%;
    border: 1px solid #CA7989;
    margin: 30px 0 0 0;
}
.social-links {
    margin: 25px 30px 0 0;
}
a {
    text-decoration: none;
    color: #CA7989;
}
li {
    list-style-type: none;
    display: inline;
    margin: 0 10px 0 0;
}
.line {
    max-width: 550px;
    margin: 0 auto;
    border-top: 1px solid #CA7989;
}

nav a:hover {
  color: #A63A50;
  background: #F5E6E6;
}

.second-content {
    background:#ebebeb;
    width: 100%;
    height: 465px;
}
.third-content {
  margin-top:-18px;
  background:#CA7989;
  width: 100%;
  height: 465px;
}

在CodePen中查看以上代码

最佳答案

body {
    /*background: url('../images/background_img.jp');*/
    background-color: #FFFAFB;
    text-align: center;
    font-family: 'Lato', sans-serif;
    /* set margin and padding 0*/
    margin:0;
    padding:0;
}

关于html - 背景颜色未占据全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43498984/

27

4

0

文章推荐： html - 使用CSS在彼此内部创建4个圆圈

文章推荐： javascript - 从 JavaScript 中的文本返回数组

文章推荐： javascript - 为什么我的 if() 语句不起作用？ JavaScript

css - 窗口底部的位置标题+全宽
我有一个标题 1(#banner h1.index_banner_text)，它需要始终位于距页面底部 20 像素和距页面左侧 570 像素的位置。如果调整窗口大小，我希望标题自然堆叠，但始终与页面底
javascript - 倾斜底部边框 - 全宽
这个问题已经有答案了: CSS responsive slanted edge (1 个回答) 已关闭 7 年前。我想知道如何创建一个宽度为 100% 的 div，宽度为 300 像素，其中底部边框
jquery - 全宽 Accordion
我做了一个非常简单的水平全宽 Accordion ，但我遇到了一个错误 - 它的最后一部分在折叠过程中下降了。这是我的代码:https://jsfiddle.net/trzxs3u1/ 它可能来自同
html - 显示时图像未占据全高/全宽
我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-
css - 页眉 - 全宽
我的应用程序中有这个页面: http://actibities-uniongr.rhcloud.com/pages/view-demo 如果您将浏览器的窗口缩短到小于 1000 像素并水平滚动，您会看
html - Vimeo 全宽
这个问题在这里已经有了答案: How did YouTube create a fluid video player? (1 个回答) 关闭 5 天前。我正在尝试在网页中全宽显示一个 vimeo
jquery - Fancybox 全宽
我是编码新手，我试图只在我的 homepage 中使用每个 fancybox全宽和响应式 ( eg )，但这些选项都没有完成这项工作(fitToView、autoSize 或 aspectRatio)
markdown - 全宽 Markdown 表格
到目前为止，我已经在 Markdown 表格中获得了尽可能多的格式和居中文本，但是在控制相对于外部容器的表格尺寸方面我没有发现任何东西(至少除了当它太大时它会自动缩小的事实)换行文本。) 是否可以在
javascript - 全宽 Swiper 在幻灯片左侧有一个间隙
带有大屏幕的 Windows 版 Chrome 上的 Swiper 插件存在问题。它在幻灯片左侧留下空白，我创建了一支笔来演示这一点: https://codepen.io/anon/pen/BwMx
c# - 如何使用 WebView 全宽
在我的 Windows 应用商店应用程序中，我只有一个 XAML 中的 WebView: 我想在不同的屏幕尺寸或方向上将宽度设置为最大可用值。我试图获取砂砾本身的宽度来设置 WebVi
android - 水平 ScrollView 全宽
好吧，我开发了一个 HorizontalScrollView，里面有一些按钮。我可以通过 getWidth() 获取此 HorizontalScrollView 的宽度。但这会返回显示的 H
javascript - jcrop 全宽/高度比例裁剪
我们实现了 Jcrop在我们的系统中，到目前为止它运行良好。但是我们最近发现了一个小问题: 场景我们的网站允许用户上传他们公司的标志。我们的宽高比要求是 200/150，不幸的是，用户的公司 Log
ios - 全宽 View 不包含与父级相同的框架宽度
我遇到一个问题，我的 UIImageView 使用以下约束跨越整个屏幕宽度。将前导对齐到:Superview(等于:-20) 将尾部对齐到:Superview(等于:-20) Top Space t
css - 全宽 div 内的响应式图像
我有这个标记: 和这个 css(我正在使用 Twitter Bootstrap): img { height: auto; max-width
javascript - 全宽、响应式、网格布局
谁能给我解释一下这个页面是如何运作的？ http://wexley-demo.squarespace.com/ 我看到有javascript，但不明白。这也是实现这种效果最简单的方法吗？ – 缩放、
javascript - 调整大小时 slider 全宽
我正在研究这个 slider : http://codepen.io/anon/pen/viBHe 当您打开页面时， slider 获得屏幕的 100% 宽度，这很好用，也是我想要实现的，但问题是当您
html - 全宽 SVG 剪辑
我目前正在为单页网站制作剪切路径: http://grafomantestsite3.be/ 如您所见，这适用于 chrome，但不适用于 firefox、opera 等。我做了一个代码笔来说明我的
html - 全宽 anchor 标签问题
代码如下: Overall Advance Rating(1 foodees rated) 这里也是在对图像进行评级后获得光标。我如何处理光标直到只有图像。我曾尝试使
jquery - 全宽 Bootstrap 下拉菜单
我正在尝试制作一个与此页面中的菜单类似的 Bootstrap 菜单。https://makr.com/ 这就是我想出的，但我现在几乎卡住了。如何使下拉文本显示在每个下拉按钮下方，就像在 https:
html - 全宽 Vimeo 嵌入无响应
我在 div 中嵌入了一个 vimeo，它是视口(viewport)的全宽。该视频在几天内运行良好，但现在播放按钮(和所有其他按钮)完全没有响应。我试过弄乱 z-index 但那不起作用。

首页

博学

6Ren·AI

商城

html - 背景颜色未占据全宽