- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当您将它加载到移动设备上时,我试图摆脱每个页面底部的空白区域。我找不到该空间的定义位置或删除或减少空间的位置。有可能吗?或者我无能为力?
另外我也想知道我的脚本是否有任何问题?一切似乎都很好,但还是想问一下。
*** {
box-sizing: border-box;
}
/*@font-face {
font-family: zcool;
src: url(https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou);
}*/
html,
body {
height: 100%;
/* defines the whole view area */
width: 100%;
/* defines the whole view area */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines the font for the whole webpage */
}
a {
text-decoration: none;
/* removes hyperlink decoration/line */
}
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bg2.png");
/* defines the source of the background-image */
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
body {
padding: 0;
/* removes padding */
margin: 0;
/* removes margin */
border: 0;
/* removes border */
background-attachment: fixed;
/* fixes the background image */
background-size: 100% auto;
/* defines the size of the background image */
background-image: url("img/bgm.png");
background-repeat: no-repeat;
/* keeps background image from repeating itself */
background-size: 100% 100%;
/* defines the size of the background image */
text-align: justify;
/* justifies all the text everywhere */
}
}
** .section h1,
h2 {
text-align: center;
/* centers headings inside of div */
/* parent */
}
h1 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
}
h2 {
/*desktop*/
/* centers headings inside of div */
/* child */
text-align: center;
margin-left: auto;
margin-right: auto;
text-decoration: underline;
}
code {
/*desktop*/
font-size: 20px;
/* font-size of code */
}
kbd {
/*desktop*/
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 20px;
/* defines font size */
}
@media (max-width: 768px) {
/*mobile*/
code {
font-size: 10px;
/* defines font size */
}
}
@media (max-width: 768px) {
/*mobile*/
kbd {
font-family: "Times New Roman", Times, serif;
/* defines font */
font-size: 10px;
/* defines font size */
}
}
ul#horizontal-list {
list-style: none;
/* removes bullet from list */
}
ul#horizontal-list li {
display: inline;
/* ??? */
}
ul {
margin: 0;
/* removes space */
padding: 0;
/* removes space */
overflow: hidden;
/* ??? */
}
li {
float: center;
/* centers the list element */
}
li a {
display: block;
color: white;
/* color op hyperlink */
text-align: center;
/* centers text */
padding: 16px;
/* adds spacing around. good for buttons */
text-decoration: none;
/* removes any hyperlink decoration */
}
li a:hover {
background-color: red;
/* turns the background red when hovering over it with mouse */
}
.navbar {
position: fixed;
/* fixes the nav bar */
top: 0;
/* position where it is fixed */
/*height: 50px;*/
width: 100%;
/* defines width, 100% will always go edge to edge on screens */
background-color: black;
/* background color */
color: white;
/* text color */
text-align: center;
/* centers text */
left: 0;
/* ??? */
right: 0;
/* ??? */
z-index: 1;
/* ??? */
}
.navbar ul {
display: flex;
/* ??? */
align-items: center;
/* centers all the elements/items */
justify-content: center;
/* ??? */
list-style-type: none;
/* removes decoration */
margin-top: 0px;
/* removes spacing on top */
}
.header {
background-image: url(img/j.svg);
/* background image/graphic */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
height: 100%;
/* positions the image */
width: 100%;
/* positions the image */
margin-top: 8%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.header {
background-image: url(img/j.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
background-size: 100% 78%;
/* sizes the image */
/*height: 100%; positions the image */
width: 100%;
/* positions the image */
margin-top: 19%;
/* will add margin on top */
margin-bottom: -8%;
/* will add margin on bottom */
}
}
.body {
/* defines body container/section (background) */
/* PARENT */
width: 90%;
/* defines width */
margin: auto;
/* centers */
padding: 0;
/* removes padding */
border: 0;
/* removes padding */
color: black;
/* text color */
padding-left: 5%;
/* spacing from screen to container/section */
padding-right: 5%;
/* spacing from screen to container/section */
overflow: hidden;
/* keeps text from going over container/section */
height: auto;
/* small text -> small body, big text -> big body */
}
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.johnswork {
/* defines background image */
background-image: url(img/johnswork.svg);
/* source of background image */
background-repeat: no-repeat;
/* keeps image from repeating */
height: 20%;
/* sizes the image */
width: 100%;
/* sizes the image */
margin-bottom: 5%;
/* spacing between image and text */
}
}
.content {
/* defines section/container with actual material */
/* CHILD */
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 30px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.content {
margin: auto;
/* centers section/container */
height: 100%;
/* defines height of section/container */
width: 90%;
/* defines height of section/container */
background-color: white;
/* background color of section/container */
color: black;
/* text color */
border-right: double;
/* adds double border on the right */
border-left: double;
/* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64);
/* defines shadow around section/container */
text-align: justify;
/* jsutifies text in container/section */
font-size: 15px;
/* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
margin-top: 2%;
/* spacing between top of section/container and text/material */
padding-top: 5%;
/* boxes content inside body */
padding-bottom: 10%;
/* boxes content inside body */
padding-left: 5%;
/* boxes content inside body */
padding-right: 5%;
/* boxes content inside body */
}
}
.social {
margin: auto;
/* centers section/container */
/* CHILD */
display: flex;
/* ??? */
justify-content: center;
/* center aligns content */
align-items: center;
/* center aligns content */
}
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
.social a img {
/* ONLY FOR CONTACT.HTML */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: none;
/* removes border */
text-decoration: none;
/* removes any decoration from image links */
}
}
a img {
/* EVERY IMG IN A LINK */
height: 150px;
/* height of image inside a link/href */
width: 150px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
@media (max-width: 768px) {
/* when screen size is < 768px apply the following styles */
/*mobile*/
a img {
/* EVERY IMG IN A LINK */
height: 50px;
/* height of image inside a link/href */
width: 50px;
/* height of image inside a link/href */
color: black;
/* text color of image */
border: 1px solid black;
/* defines border */
border-radius: 8px;
/* rounds borders */
text-decoration: none;
/* removes any decoration from image links */
}
}
.floatl {
/*desktop*/
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
.floatr {
/*desktop*/
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
.floatc {
/*desktop*/
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
@media (max-width: 768px) {
/*mobile*/
.floatl {
float: left;
/*aligns element/object;*/
margin-right: 15px;
/*spacing between right side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatr {
float: right;
/*aligns element/object;*/
margin-left: 15px;
/*spacing between left side of element/object and text*/
}
}
@media (max-width: 768px) {
/*mobile*/
.floatc {
display: block;
/* centers image */
margin-left: auto;
/* centers image */
margin-right: auto;
/* centers image */
}
}
.footer {
/* defines footer */
height: 50px;
/* defines height of footer */
width: 72%;
/* defines width of footer to match content/body section/container */
background-color: black;
/* background color of the footer */
color: white;
/* footer text color */
vertical-align: middle;
/* centers between top and bottom */
margin: auto auto 50px;
/* centers between left and right */
}
#copyright {
display: table;
/*displays as table inside section/container*/
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}
#cpy {
display: table-cell;
/* displays as cell inside the table */
vertical-align: middle;
/* alignment of the cell */
font-family: 'ZCOOL QingKe HuangYou', cursive;
/* defines font */
}
<!DOCTYPE html>
<html lang="en-US">
<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="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" /> -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<!-- <link rel="icon" type="image/x-icon" href="img/favicons/favicon.ico"/> -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="javascript.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3711944124990656",
enable_page_level_ads: true
});
</script>
<meta name="description" content="My Personal Portfolio">
<title>John's Work | WELCOME</title>
</head>
<body>
<nav 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>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<div class="johnswork">
<img src="img/johnswork.svg" alt="John's Work" style="text-decoration: none">
</div>
<section class="article1">
<h2> Article l</h2>
<h1>How to bypass LanSchool on School Computers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada
magna, in suscipit purus.
</p>
<code>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</code>
<p>
<kbd>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</kbd>
</p>
</section>
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>
最佳答案
.footer
有 margin: auto auto 50px;
这是导致问题的原因。改为 margin: 0 auto;
margin: auto auto 50px;
希望对你有帮助。谢谢
* {
box-sizing: border-box;
}
/*@font-face {
font-family: zcool;
src: url(https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou);
}*/
html,
body {
height: 100%; /* defines the whole view area */
width: 100%; /* defines the whole view area */
font-family: 'ZCOOL QingKe HuangYou', cursive; /* defines the font for the whole webpage */
}
a {
text-decoration: none; /* removes hyperlink decoration/line */
}
body {
padding: 0; /* removes padding */
margin: 0; /* removes margin */
border: 0; /* removes border */
background-attachment: fixed; /* fixes the background image */
background-size: 100% auto; /* defines the size of the background image */
background-image: url("img/bg2.png"); /* defines the source of the background-image */
background-repeat: no-repeat; /* keeps background image from repeating itself */
background-size: 100% 100%; /* defines the size of the background image */
text-align: justify; /* justifies all the text everywhere */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
body {
padding: 0; /* removes padding */
margin: 0; /* removes margin */
border: 0; /* removes border */
background-attachment: fixed; /* fixes the background image */
background-size: 100% auto; /* defines the size of the background image */
background-image: url("img/bgm.png");
background-repeat: no-repeat; /* keeps background image from repeating itself */
background-size: 100% 100%; /* defines the size of the background image */
text-align: justify; /* justifies all the text everywhere */
}
}
.section h1, h2 {
text-align: center; /* centers headings inside of div */ /* parent */
}
h1 { /*desktop*/ /* centers headings inside of div */ /* child */
text-align: center;
margin-left: auto;
margin-right: auto;
}
h2 {/*desktop*/ /* centers headings inside of div */ /* child */
text-align: center;
margin-left: auto;
margin-right: auto;
text-decoration: underline;
}
code {/*desktop*/
font-size: 20px; /* font-size of code */
}
kbd {/*desktop*/
font-family: "Times New Roman", Times, serif; /* defines font */
font-size: 20px; /* defines font size */
}
@media (max-width: 768px) { /*mobile*/
code {
font-size: 10px; /* defines font size */
}
}
@media (max-width: 768px) { /*mobile*/
kbd {
font-family: "Times New Roman", Times, serif; /* defines font */
font-size: 10px; /* defines font size */
}
}
ul#horizontal-list {
list-style: none; /* removes bullet from list */
}
ul#horizontal-list li {
display: inline; /* ??? */
}
ul {
margin: 0; /* removes space */
padding: 0; /* removes space */
overflow: hidden; /* ??? */
}
li {
float: center; /* centers the list element */
}
li a {
display: block;
color: white; /* color op hyperlink */
text-align: center; /* centers text */
padding: 16px; /* adds spacing around. good for buttons */
text-decoration: none; /* removes any hyperlink decoration */
}
li a:hover {
background-color: red; /* turns the background red when hovering over it with mouse */
}
.navbar {
position: fixed; /* fixes the nav bar */
top: 0; /* position where it is fixed */
/*height: 50px;*/
width: 100%; /* defines width, 100% will always go edge to edge on screens */
background-color: black; /* background color */
color: white; /* text color */
text-align: center; /* centers text */
left: 0; /* ??? */
right: 0; /* ??? */
z-index: 1; /* ??? */
}
.navbar ul {
display: flex; /* ??? */
align-items: center; /* centers all the elements/items */
justify-content: center; /* ??? */
list-style-type: none; /* removes decoration */
margin-top: 0px; /* removes spacing on top */
}
.header {
background-image: url(img/j.svg); /* background image/graphic */
background-repeat: no-repeat; /* keeps image from repeating */
background-size: 100% 78%; /* sizes the image */
height: 100%; /* positions the image */
width: 100%; /* positions the image */
margin-top: 8%; /* will add margin on top */
margin-bottom: -8%; /* will add margin on bottom */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
.header {
background-image: url(img/j.svg); /* source of background image */
background-repeat: no-repeat; /* keeps image from repeating */
background-size: 100% 78%; /* sizes the image */
/*height: 100%; positions the image */
width: 100%; /* positions the image */
margin-top: 19%; /* will add margin on top */
margin-bottom: -8%; /* will add margin on bottom */
}
}
.body { /* defines body container/section (background) */ /* PARENT */
width: 90%; /* defines width */
margin: auto; /* centers */
padding: 0; /* removes padding */
border: 0; /* removes padding */
color: black; /* text color */
padding-left: 5%; /* spacing from screen to container/section */
padding-right: 5%; /* spacing from screen to container/section */
overflow: hidden; /* keeps text from going over container/section */
height: auto; /* small text -> small body, big text -> big body */
}
.johnswork { /* defines background image */
background-image: url(img/johnswork.svg); /* source of background image */
background-repeat: no-repeat; /* keeps image from repeating */
height: 20%; /* sizes the image */
width: 100%; /* sizes the image */
margin-bottom: 5%; /* spacing between image and text */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
.johnswork {/* defines background image */
background-image: url(img/johnswork.svg); /* source of background image */
background-repeat: no-repeat; /* keeps image from repeating */
height: 20%; /* sizes the image */
width: 100%; /* sizes the image */
margin-bottom: 5%; /* spacing between image and text */
}
}
.content { /* defines section/container with actual material */ /* CHILD */
margin: auto; /* centers section/container */
height: 100%; /* defines height of section/container */
width: 90%; /* defines height of section/container */
background-color: white; /* background color of section/container */
color: black; /* text color */
border-right: double; /* adds double border on the right */
border-left: double; /* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64); /* defines shadow around section/container */
text-align: justify; /* jsutifies text in container/section */
font-size: 30px; /* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive; /* defines font */
margin-top: 2%; /* spacing between top of section/container and text/material */
padding-top: 5%; /* boxes content inside body */
padding-bottom: 10%; /* boxes content inside body */
padding-left: 5%; /* boxes content inside body */
padding-right: 5%; /* boxes content inside body */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
.content {
margin: auto; /* centers section/container */
height: 100%; /* defines height of section/container */
width: 90%; /* defines height of section/container */
background-color: white; /* background color of section/container */
color: black; /* text color */
border-right: double; /* adds double border on the right */
border-left: double; /* adds double border on the left */
box-shadow: 0px -7px 15px 1px rgb(58, 62, 64); /* defines shadow around section/container */
text-align: justify; /* jsutifies text in container/section */
font-size: 15px; /* defines font size */
font-family: 'ZCOOL QingKe HuangYou', cursive; /* defines font */
margin-top: 2%; /* spacing between top of section/container and text/material */
padding-top: 5%; /* boxes content inside body */
padding-bottom: 10%; /* boxes content inside body */
padding-left: 5%; /* boxes content inside body */
padding-right: 5%; /* boxes content inside body */
}
}
.social {
margin: auto; /* centers section/container */ /* CHILD */
display: flex; /* ??? */
justify-content: center; /* center aligns content */
align-items: center; /* center aligns content */
}
.social a img { /* ONLY FOR CONTACT.HTML */
height: 150px; /* height of image inside a link/href */
width: 150px; /* height of image inside a link/href */
color: black; /* text color of image */
border: none;
text-decoration:none; /* removes any decoration from image links */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
.social a img { /* ONLY FOR CONTACT.HTML */
height: 50px; /* height of image inside a link/href */
width: 50px; /* height of image inside a link/href */
color: black; /* text color of image */
border: none; /* removes border */
text-decoration:none; /* removes any decoration from image links */
}
}
a img { /* EVERY IMG IN A LINK */
height: 150px; /* height of image inside a link/href */
width: 150px; /* height of image inside a link/href */
color: black; /* text color of image */
border: 1px solid black; /* defines border */
border-radius: 8px; /* rounds borders */
text-decoration:none; /* removes any decoration from image links */
}
@media (max-width: 768px) { /* when screen size is < 768px apply the following styles */ /*mobile*/
a img { /* EVERY IMG IN A LINK */
height: 50px; /* height of image inside a link/href */
width: 50px; /* height of image inside a link/href */
color: black; /* text color of image */
border: 1px solid black; /* defines border */
border-radius: 8px; /* rounds borders */
text-decoration:none; /* removes any decoration from image links */
}
}
.floatl { /*desktop*/
float: left; /*aligns element/object;*/
margin-right: 15px; /*spacing between right side of element/object and text*/
}
.floatr { /*desktop*/
float: right; /*aligns element/object;*/
margin-left: 15px; /*spacing between left side of element/object and text*/
}
.floatc { /*desktop*/
display: block; /* centers image */
margin-left: auto; /* centers image */
margin-right: auto; /* centers image */
}
@media (max-width: 768px) { /*mobile*/
.floatl {
float: left; /*aligns element/object;*/
margin-right: 15px; /*spacing between right side of element/object and text*/
}
}
@media (max-width: 768px) { /*mobile*/
.floatr {
float: right; /*aligns element/object;*/
margin-left: 15px; /*spacing between left side of element/object and text*/
}
}
@media (max-width: 768px) { /*mobile*/
.floatc {
display: block; /* centers image */
margin-left: auto; /* centers image */
margin-right: auto; /* centers image */
}
}
.footer { /* defines footer */
height: 50px; /* defines height of footer */
width: 72%; /* defines width of footer to match content/body section/container */
background-color: black; /* background color of the footer */
color: white; /* footer text color */
vertical-align: middle; /* centers between top and bottom */
/* margin: auto auto 50px; centers between left and right */
margin: 0 auto;
}
#copyright {
display: table; /*displays as table inside section/container*/
font-family: 'ZCOOL QingKe HuangYou', cursive; /* defines font */
}
#cpy{
display: table-cell; /* displays as cell inside the table */
vertical-align: middle; /* alignment of the cell */
font-family: 'ZCOOL QingKe HuangYou', cursive; /* defines font */
}
<!DOCTYPE html>
<html lang="en-US">
<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="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" /> -->
<link href="https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou" rel="stylesheet">
<!-- <link rel="icon" type="image/x-icon" href="img/favicons/favicon.ico"/> -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="javascript.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3711944124990656",
enable_page_level_ads: true
});
</script>
<meta name="description" content="My Personal Portfolio">
<title>John's Work | WELCOME</title>
</head>
<body>
<nav 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>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<div class="johnswork">
<img src="img/johnswork.svg" alt="John's Work" style="text-decoration: none">
</div>
<section class="article1">
<h2> Article l</h2>
<h1>How to bypass LanSchool on School Computers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.
</p>
<code>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</code>
<p>
<kbd>
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
</kbd>
</p>
</section>
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>
关于html - 如果在移动设备上加载,页面底部的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54936756/
如何在不使用垫片的情况下将 View 定位在底部。我知道我可以在 VStack 中放置一个间隔器和我的 View 来实现它,但我不想使用一个间隔器,因为我不希望我的 View 占据所有的垂直空间。使用
我想让文本 float 到现有标签的右下角。 我仍在使用旧学校表(编辑现有代码)。我的代码是这样的:
我有一个包含文本的表格单元格,但我怎样才能使文本齐平到单元格的顶部或底部(上面没有填充)?我试过垂直对齐,但它仍然没有到达顶部“边缘”。 我的代码 3.2325
我想用 javascript 打印一个特殊的页面 div。 function printDiv(divName) { var printContents = document
我需要检查元素是否距离页面底部 x 像素,以动态加载新内容。目前,即使栏位于底部,scrollTop 和高度也不匹配。 jquery 是允许的,虽然基本的 javascript 会更有帮助。 最佳答案
我正在用 pygame 重新制作 flappy bird,但主题是星球大战。我已经完成了游戏的美术和一般格式设置,但现在我需要调整细节。我一直在改变数字,试图让光剑完全到达屏幕的顶部和底部,因为目前有
http://pastehtml.com/view/bfzerlo1m.html 如何将红色框放在橙色 div 底部的 CENTER + 中? 红框的高度和宽度都是动态的,每个框都不同.. (它需要在
我正在研究和测试表格。到目前为止,我成功地使用 following fiddle 将选择框列表中的项目一项一项地向上和向下移动。 . 代码实例(向上移动): function moveUp() { $
在设计 IOS 应用程序时,我可以在页脚放置“后退”按钮功能吗? 最佳答案 我认为指南中没有任何内容禁止这样做,但是您的潜在用户习惯于将后退按钮放在左上角,因此除非您有充分的理由将后退按钮放在底部,并
你可以只在顶部/底部而不是所有(T、B、L、R)设置单元格填充或间距吗? 最佳答案 CSS? td { padding-top: 2px; padding-bottom: 2px; } 关于H
我正在为我的 React 应用程序使用无限滚动,并具有检测我何时恰好位于页面底部的功能: const [isFetching, setIsFetching] = useState(false); //
所以我有一个页面,其中有一个类似聊天的 div,里面充满了文本。它具有固定的高度和宽度(由 css 定义)。 我需要它在每次更新时滚动到底部,这是我到目前为止使用的 JS: $("#div1").an
我遇到了与此处描述的相同的问题:UIWebView doesn't scroll to the bottom of the webpage loaded/created (不幸的是没有人回答) 我有一
我有一个溢出设置为滚动的 div,它本质上是逐行从文件中流式传输数据。我想在流溢出时自动滚动到 div 的底部,但不使用“单击此处滚动到底部”按钮。 我已经知道 scrollTop = scrollH
我正在 Android studio 中构建一个应用程序,但遇到了一些问题。我在 main_activity.xml 中有一个 ImageView
我有一个扩展 Jpanel 的类,里面有一个动画。我有两个操作按钮可以停止和启动它,但是我需要这些按钮出现在 Jpanel 的底部。我已经尝试过: add(go,BOTTOM_ALIGNMENT);
嗨,我正在为ios设备(ipad)开发phonegap / cordova项目。该应用程序通过蓝牙键盘接收输入文本(因为我不想在屏幕上显示键盘)。到目前为止,应用程序可以按预期接收输入。但是关于外观,
我想在底部放置一个页脚。 出于某种原因,它会像这样出现。 在 index.html 中,我有:
我得到了一个带有内联编辑功能的 jqgrid,并且可以添加新行。 目前,新行以“编辑”模式显示在网格顶部。我想要的是将新行添加到网格底部,因为我的“添加新行”按钮位于自定义底部分页器中... 有人知道
在 Swift 3 中,我以编程方式创建了一个(底部)工具栏,其中包含自定义按钮,中间用灵活的垫片分隔自定义按钮,将一个(“上一个”)推到左边缘,另一个(“下一个”)到 View 的右边缘。但我无法显
我是一名优秀的程序员,十分优秀!