如何在页脚和页面底部之间放置空格？

时间：2019-02-27 21:38:13

标签： html css footer shadow spacing

我试图在页面的页脚和屏幕底部之间留一些空间，以便可以看到背景。我也想知道为什么“内容” div左右两侧的阴影没有到达底部？我是否为阴影使用了错误的代码？我希望阴影只在左右两侧。谢谢！

* {
  box-sizing: border-box;
}

@font-face {
	font-family: 'zcool';
	src: 	url('fonts/zcool.ttf') format('ttf');
	local: 	url('fonts/zcool.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
  
}

body {
	padding: 0;
	margin: 0;
	border: 0;
	background-attachment: fixed;
	background-size: 100% auto;
	background-image: url("img/background.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	background-color: black;
	color: white;
	text-align: center;
	left: 0;
	right: 0;
	z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
	background-image: url(img/johnswork.png);
	background-image: 
		-webkit-image-set(
		url(img/johnsworkm.png) 1x,
		url(img/johnswork.png) 2x,
		);
	background-image: 
		image-set(
		url(img/johnsworkm.png) 1x,
		url(img/johnswork.png) 2x,
		);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
    
}

.body {
	height: 100%;
	width: 90%;
	margin: auto;
	padding: 0;
	border: 0;
	color: black;
	padding-left: 5%;
	padding-right: 5%;
	overflow: hidden;
	
	/*background-color: grey;*/
}

.content {
	margin: auto;
	height: 100%;
	width: 90%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
	text-align: justify;
	font-size: 20px;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

.social {
	margin: auto;
	display: flex;
	justify-content: center;
}


.me {
	float: left;
	margin-right: 3%;
	height: 100%;
}


.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
}

#copyright {
	display: table;
}


#cpy{
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>


	<div class="navbar">

		<ul>
			<li><a href="index.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="contact.html">CONTACT</a></li>
		</ul>

	</div>


	<div class="header">
		<!--Can stay empty-->
		<img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
	</div>

		<div class="body">
			<div class="content">
			
			Lorem ipsum dolor sit amet, consectetur adipiscing.
			
			</div>
		</div>

	<div class="footer" id="copyright" style="text-align:center">
	<div id="cpy">&copy; DA COSTA JOAO (2019)</div>
	</div>



</body>

</html>

2 个答案:

答案 0 :(得分：1)

如果您希望页脚不与屏幕底部对齐，只需在margin-bottom上添加.footer。在我的示例中，我已经选择了30px。

对于阴影的长度，它是您要查找的第二个值（在逗号前后）。我已将其更改为4px：

box-shadow: 12px 4px 15px -4px rgba(31, 73, 125, 0.8), -12px 4px 8px -4px rgba(31, 73, 125, 0.8);

请注意，这将使阴影向下向下移动。
您可能需要增加宽度以适应此情况。

这两个都可以在下面的（格式化的）示例中看到：

* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'zcool';
  src: url('fonts/zcool.ttf') format('ttf');
  local: url('fonts/zcool.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-attachment: fixed;
  background-size: 100% auto;
  background-image: url("img/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: red;
}

.navbar {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
  left: 0;
  right: 0;
  z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
  background-image: url(img/johnswork.png);
  background-image: -webkit-image-set( url(img/johnsworkm.png) 1x, url(img/johnswork.png) 2x, );
  background-image: image-set( url(img/johnsworkm.png) 1x, url(img/johnswork.png) 2x, );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.body {
  height: 100%;
  width: 90%;
  margin: auto;
  padding: 0;
  border: 0;
  color: black;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
  /*background-color: grey;*/
}

.content {
  margin: auto;
  height: 100%;
  width: 90%;
  background-color: white;
  color: black;
  border-right: double;
  border-left: double;
  box-shadow: 12px 4px 15px -4px rgba(31, 73, 125, 0.8), -12px 4px 8px -4px rgba(31, 73, 125, 0.8);
  text-align: justify;
  font-size: 20px;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left: 5%;
  padding-right: 5%;
}

.social {
  margin: auto;
  display: flex;
  justify-content: center;
}

.me {
  float: left;
  margin-right: 3%;
  height: 100%;
}

.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
  margin-bottom: 30px;
}

#copyright {
  display: table;
}

#cpy {
  display: table-cell;
  vertical-align: middle;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>
  <div class="navbar">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>

  <div class="header">
    <!--Can stay empty-->
    <img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
  </div>
  
  <div class="body">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing.
    </div>
  </div>

  <div class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
  </div>
</body>

</html>

答案 1 :(得分：0)

您可以做类似的事情。

我更改了您的box-shadow: 0px 0px 18px 3px rgba(31, 73, 125, 0.8);，并将margin-bottom添加到课程.footer; 

* {
  box-sizing: border-box;
}
@font-face {
	font-family: 'zcool';
	src: 	url('fonts/zcool.ttf') format('ttf');
	local: 	url('fonts/zcool.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
}
html,
body {
  height: 100%;
  width: 100%;      
}
body {
	padding: 0 0 10px 0;
	margin: 0;
	border: 0;
	background-attachment: fixed;
	background-size: 100% auto;
	background-image: url("img/background.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
ul#horizontal-list {
  list-style: none;
}
ul#horizontal-list li {
  display: inline;
}
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: center;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
.navbar {
	position: fixed;
	top: 0;
	height: 50px;
	width: 100%;
	background-color: black;
	color: white;
	text-align: center;
	left: 0;
	right: 0;
	z-index: 1;
}
.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}
.header {
	background-image: url(img/johnswork.png);
	background-image: 
		-webkit-image-set(
		url(img/johnsworkm.png) 1x,
		url(img/johnswork.png) 2x,
		);
	background-image: 
		image-set(
		url(img/johnsworkm.png) 1x,
		url(img/johnswork.png) 2x,
		);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%;
	width: 100%;
    
}

.body {
	height: 100%;
	width: 90%;
	margin: auto;
	padding: 0;
	border: 0;
	color: black;
	padding-left: 5%;
	padding-right: 5%;
	overflow: hidden;    	
	/*background-color: grey;*/
}
.content {
	margin: auto;
	height: 100%;
	width: 90%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	box-shadow: 0px 0px 18px 3px rgba(31, 73, 125, 0.8);
	text-align: justify;
	font-size: 20px;
	padding-top: 10% 5%;    	
}
.social {
	margin: auto;
	display: flex;
	justify-content: center;
}
.me {
	float: left;
	margin-right: 3%;
	height: 100%;
}
.footer {
  height: 50px;
  width: 72%;
  background-color: black;
  color: white;
  margin: auto auto 20px;
  vertical-align: middle;
}
#copyright {
	display: table;
}
#cpy{
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>
<body>
	<div class="navbar">
	  <ul>
	    <li><a href="index.html">HOME</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="contact.html">CONTACT</a></li>
      </ul>
	</div>
	<div class="header">
	  <!--Can stay empty-->
	  <img src="img/johnswork.jpg" alt="John's Work" height="235px" width="900px">
	</div>
    <div class="body">
	  <div class="content">    			
	    Lorem ipsum dolor sit amet, consectetur adipiscing.    			
      </div>
	</div>
	<div class="footer" id="copyright" style="text-align:center">
	<div id="cpy">&copy; DA COSTA JOAO (2019)</div>
   </div>
 </body>
   </html>

相关问题
最新问题