我有问题。我正在尝试制作简单的基于HTML的网站。我想制作图像和白色字段" full"屏幕(宽度100%),但它在某种程度上限制了两侧的边缘。我是一个新鲜的webguy所以可能解决方案很简单,但到目前为止我找不到它。
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ARSPOLSKA</title>
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
<body>
<!-- ========= HEADER ========= -->
<div class="belka-menu">
<div class="limiter">
<div id="logo"></div>
<p>TECHNICZNE ZAOPATRZENIE PRZEMYSŁU</p>
<nav class="nawigacja">
<ul>
<li><a href="regulamin.php">REGULAMIN</a></li>
<li><a href="#">KATALOG PRODUKTÓW</a></li>
<li><a href="promocje.php">PROMOCJE</a></li>
<li><a href="http://www.adamscrew.cba.pl/wordpress">STRONA GŁÓWNA</a></li>
</ul>
</nav>
</div>
</div>
<!-- ====== HEADER ====== -->
<!-- ====== SLIDER ====== -->
<div class="slider-imitation"></div>
<!-- ====== SLIDER ====== -->
<!-- ====== ZAWARTOSC ====== -->
<div class="container-item">
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img1.jpg"/></div>
<div class="text">
Jesteśmy firmą handlową zajmującą się obsługą i zaopatrzeniem oraz wsparciem technicznym dla
działów utrzymania ruchu zakładów i firm.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img4.jpg"/></div>
<div class="text">
Posiadamy zaplecze umożliwiające wykonanie prac związanych z obróbką, skrawaniem,
pracami związanymi ze spawaniem oraz szeroko pojętymi usługami.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img3.jpg"/></div>
<div class="text">
Współpracujemy z największymi dystrybutorami dzięki temu otrzymują Państwo produkty najwyższej jakości w 100% oryginalne.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img2.jpg"/></div>
<div class="text">
Jesteśmy w stanie dostosować się do potrzeb każdego przedsiębiorstwa.
</div>
</div>
</div>
<!-- ====== ZAWARTOSC ====== -->
<!-- ====== STOPKA ====== -->
<footer class="stopka">
<div class="limiter">
<div class="stopka-logo"></div>
<div class="stopka-info">
<h1>ARSPOLSKA Jóźkowicz i wspólnicy Sp. J.</h1>
<p>ul. Przemysłowa 14B</p>
<p>59-300 Lubin</p>
<p>NIP 692-250-43-38</p>
</div>
<div class="stopka-info">
<h1>KONTAKT</h1>
<p>tel: 515 012 162</p>
<p><b><a href="mailto:kontakt@arspolska.com" target="_top">kontakt@arspolska.com</a></b></p>
</div>
<div class="podstopka">Copyright © 2017 ARSPOLSKA Wszystkie prawa zastrzeżone.</div>
</div>
</footer>
<!-- ====== STOPKA ====== -->
</body>
</html>
&#13;
/* ====== GLOBALNE ====== */
@font-face {
font-family: "Open Sans";
src: url('../OpenSans.ttf'), url('../OpenSans.eot');
/* IE */
}
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
}
h1 {
margin-top: 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
#logo {
background-image: url("../img/logo.png");
background-size: 90px;
height: 87px;
width: 133px;
z-index: 999999;
float: left;
background-repeat: no-repeat;
margin-top: 1px;
}
.limiter {
width: 1200px;
margin: auto;
}
.slider-imitation {
height: 586px;
width: 100%;
background-image: url(../img/1.png);
background-attachment: fixed;
background-position: center;
}
/* ====== MENU ====== */
.belka-menu p {
font-family: "Open Sans";
font-size: 15px;
color: #979797;
padding-top: 25px;
padding-left: 120px;
position: absolute;
}
.belka-menu {
position: fixed;
display: block;
width: 100%;
z-index: 99;
border-top: 5px solid #f05928;
background-color: #ffffff;
height: 90px;
right: 0;
top: 0;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
/* ====== NAWIGACJA ====== */
.nawigacja li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
background-color: #fff;
text-align: center;
padding-top: 25px;
float: right;
}
.nawigacja li a {
color: #979797;
font-size: 16px;
font-family: "Open Sans";
}
.nawigacja li a:hover {
color: #f05928;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: color 0.5s;
text-decoration: none;
font-weight: bold;
}
/* ====== STOPKA ====== */
.stopka {
padding: 40px 0;
color: #999;
background-color: #fff;
border-top: 1px solid #e5e5e5;
margin-top: 40px;
clear: both;
text-align: left;
height: 200px;
}
.stopka-info {
display: block;
height: 100%;
margin: auto 20px;
max-width: 300px;
float: left;
line-height: 13px;
}
.stopka-logo {
background-image: url('../img/logo.png');
display: block;
height: 140px;
width: 140px;
max-height: 140px;
max-height: 140px;
float: left;
margin-right: 20px;
background-repeat: no-repeat;
}
.podstopka {
display: block;
background-color: #f05928;
height: 30px;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
clear: both;
color: #fff;
}
/*====== CONTAINER ======*/
.container-home {
width: 100%;
height: 200px;
background-color: #ffffff;
clear: both;
}
.container-item {
text-align: center;
height: 400px;
width: 100%;
display: block;
background-color: #ffff;
clear: both;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
}
#item {
border: 1px solid #e5e5e5;
background-color: #fff;
display: inline-block;
width: 250px;
height: 300px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
vertical-align: top;
}
h1 {
font-weight: bold;
color: #8e8e8e;
font-size: 14px;
}
#item:hover {
border: 2px solid #f05928;
-webkit-transition: -webkit-transform 4s;
/* Safari */
transition: transform 4s;
}
.text {
margin-top: 20px;
font-size: 13px;
text-align: center;
}
.foto img {
width: auto;
height: auto;
max-width: 220px;
max-height: 220px;
}
.box {
height: 100%;
padding-top: 25px;
padding-bottom: 25px;
margin-top: 50px;
}
&#13;
答案 0 :(得分:1)
您可能需要设置身体边距。默认情况下,您的浏览器有一些边距(Chrome上为8px),因此内容不会显示在滚动条后面。
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
border: 0;
}