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

问题描述 投票：0回答：2

我试图在页面的页脚和屏幕的底部之间放一些空格，以便可以看到背景。我还想知道为什么“内容”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>
html css footer shadow spacing
2个回答
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>
1
投票

如果你想让你的页脚没有冲到屏幕底部，只需在qazxsw poi中添加一点qazxsw poi。在我的例子中，我和qazxsw poi一起去了。

至于阴影的长度，它是你正在寻找的第二个值（逗号之前和之后）。我把它改成了margin-bottom：

.footer

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

这些都可以在以下（格式化）示例中看到：

30px
4px
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.