html - Html 和 css 背景颜色
问题描述
我正在做私人项目,我不知道如何为页面的整个宽度设置文章的背景颜色,而不仅仅是在文本周围,就像在 screen1 中一样。
.logo
{
text-align: center;
font-size: 40px;
margin-top: 40px;
margin-bottom: 30px;
letter-spacing: 5px;
text-transform: uppercase;
color: #ddd;
font-weight: 700px;
}
nav
{
background-color: #1c74b2;
text-align: center;
width: 100%;
}
body
{
background-color: #2F3336;
color: #efefef;
}
.menu
{
padding-top: 13px;
padding-bottom: 13px;
color: #efefef;
list-style-type: none;
margin: 0;
font-size: 18px;
min-height: 40px;
line-height: 200%;
width: 100%;
}
.menu > li
{
display: inline-block;
border-right: 1px dashed #0a2b42;
padding-right: 20px;
padding-left: 20px;
width: 145px;
}
.menu > li:last-child
{
border-right: 1px dashed #0a2b42;
}
.menu > li:first-child
{
border-left: 1px dashed #0a2b42;
}
.menu a
{
text-decoration: none;
color: #fff;
transition: transform .2s ease-in-out;
}
.menu a:hover
{
color: #0a2b42;
transform: scale(1.2);
}
h1
{
font-size: 40px;
font-weight: 500px;
color: #39a5f1;
margin-top: 40px;
margin-bottom: 20px;
}
.one
{
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.two
{
background-color: #191d21;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
.footer
{
width: 100%;
min-height: 50px;
background-color: #1c74b2;
text-align: center;
font-size: 16px;
padding: 17px;
margin: 0px;
}
#Lorem
{
background-color: #191d21;
}
<!DOCTYPE html>
<html>
<head>
<title>STRONA GŁÓWNA</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Comaptible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="styleindex.css">
</head>
<body>
<header>
<h1 class="logo">DRUGA WOJNA ŚWIATOWA</h1>
<nav>
<ul class="menu">
<li><a href="#">Strona Główna</li></a>
<li><a href="#">Fronty wojny</li></a>
<li><a href="#">Nowe technologie</li></a>
<li><a href="#">Mapy polityczne</li></a>
<li><a href="#">Materiały źródłowe</li></a>
<li><a href="./strona1.html">Logowanie</li></a>
<li><a href="#">Kontakt</li></a>
</ul>
</nav>
</header>
<main>
<section>
<div class="one">
<header>
<h1>INTRODUCTION</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.
</p>
</header>
</div>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</section>
</main>
<footer>
<div class="footer">
<p>II WOJNA ŚWIATOWA © wszelkie prawa zastrzeżone. Dzięki za odwiedzenie i zapraszam ponownie.</p>
</div>
</footer>
</body>
</html>
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.two {
background-color: #f0f0f0;
margin-bottom: 125px;
text-align: center;
width: 100%;
}
#Lorem {
background-color: #f0f0f0;
margin-right: auto;
margin-left: auto;
margin-bottom: 125px;
text-align: center;
width: 950px;
}
</style>
</head>
<body>
<div class="two">
<article id="Lorem">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar nibh id dolor placerat, et
luctus libero pretium. Vivamus eget arcu ligula. Vivamus blandit diam non sapien cursus malesuada. In
vulputate facilisis velit ut interdum. Nam commodo ex quis ipsum rutrum, convallis venenatis ex
tincidunt. Praesent tincidunt semper ex, eget semper ante porta vel. Integer egestas turpis vitae
ullamcorper ultricies. Ut arcu tortor, imperdiet vel felis et, fermentum rutrum dolor. Vestibulum
bibendum eu massa et tincidunt. Integer a porta enim. Curabitur quis imperdiet ante, aliquam tincidunt
felis. Praesent nec est ac massa hendrerit tempus. Vivamus in mattis quam.</p>
</article>
</div>
</body>
</html>
使用这个我希望你的问题会得到解决
推荐阅读
- php - 为什么我的插入没有将产品信息添加到 PHP 中的 MySql 数据库中?
- events - GameMaker Studio 2 - 多个事件 - 如果 mouse_enter 事件则绘制
- java - 如何解释这行 Java 代码?
- python - 是否可以在 Shady 中共享动画回调?
- go - PHP cURL 随机超时,收到 100% 的正文
- hadoop - 在 Athena 中为特定日志格式创建表
- excel - 如何使用特定指示找到两个匹配的单元格并将它们合并?
- git - git:从远程主机复制文件夹
- html - 如何在 CSS 中实现曲线背景?
- c# - 用于测试标准登录密码要求的 Selenium C# 脚本