当你在移动设备上加载它时，我试图摆脱每个页面底部的空白区域。我无法找到该空间的定义位置或删除位置或减少空间。它是否可能或者我无能为力？
另外我也想知道我的脚本是否有任何问题？一切似乎都很好，但仍然想问。
*** {
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>