我正在做功课,我不知道如何在我的网站上使文章看起来像书。我的代码和网站的图片如下。
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
/*
Murfreesboro Regional Soccer League style sheet
Filename: styles.css
Author: Jerry Lopez
Date: 10/25/2018
HTML5 and CSS3 Illustrated Unit I, Independent Challenge 2
*/
/* reset styles */
html {
font-size: 14px;
}
a,
article,
body,
div,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
section,
ul {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
ul {
list-style-type: none;
}
/* body and page container */
body {
background: green;
background: url("images/grass.jpg");
font-family: Arial, Helvetica, sans-serif;
}
.container {
margin: 0 auto;
position: relative;
background-color: rgb(140, 198, 63);
}
p {
font-size: 1.2em;
}
/* skip navigation link */
p.skipnavigation a {
position: absolute;
left: -10000px;
}
p.skipnavigation a:focus {
left: 1em;
top: 1em;
color: black;
background: ivory;
z-index: 2;
}
/* header section */
header {
width: 76%;
padding: 1em 2% 0.5em;
text-align: center;
background-color: rgb(140, 198, 63);
overflow: auto;
float: left;
}
h1 {
font-size: 2.4em;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-shadow: 0 0 5px white;
}
header div {
max-width: 224px;
float: left;
display: none;
}
/* site navigation */
nav.sitenavigation {
padding: 2% 2% 2%;
width: 16%;
float: right;
text-align: right;
}
nav.sitenavigation ul {
text-align: left;
display: none;
position: absolute;
right: 2%;
}
nav.sitenavigation li {
font-size: 1.2em;
}
nav.sitenavigation a {
padding: 0.2em;
display: block;
background-color: #c8f098;
font-weight: bold;
}
nav.sitenavigation a:link {
color: black;
text-decoration: none;
}
nav.sitenavigation a:visited {
color: #888;
}
nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
color: black;
background-color: white;
}
nav.sitenavigation a:active {
position: relative;
top: 1px;
left: 1px;
}
/* main content */
article {
width: 100%;
font-size: 1.4em;
line-height: 1.6em;
padding: 1em 0;
background-color: white;
vertical-align: center;
}
article p {
margin-top: 1em;
padding: 0 3%;
clear: both;
}
article figure {
max-width: 100%;
float: left;
}
/* sidebar */
aside {
width: 24%;
padding: 1em 3%;
float: right;
display: none;
}
aside h2 {
margin: 0 0 0.4em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.6em;
}
aside p {
margin: 0 0 1em 1em;
padding-left: 7%;
}
aside p.accent {
margin: 0;
font-weight: bold;
}
/* footer section */
footer {
padding: 1em;
clear: both;
color: white;
background-color: black;
text-align: right;
}
/* small screen/tablet styles */
@media screen and (min-width: 500px) {
aside {
display: block;
}
article {
width: 70%;
clear: both;
font-size: 2em;
float: left;
}
}
/* standard screen styles */
@media screen and (min-width: 760px) {
body {
padding: 1em;
}
.container {
border-radius: 2em;
background-color: #c8f098;
}
header {
width: auto;
float: none;
border-radius: 2em 2em 0 0;
}
header div {
display: block;
}
nav.sitenavigation {
padding: 2%;
width: 21%;
float: left;
}
nav.sitenavigation img {
display: none;
}
nav.sitenavigation ul {
display: block;
position: static;
float: left;
}
nav.sitenavigation a {
margin-bottom: 0.6em;
}
article {
width: 50%;
}
aside {
width: 19%;
}
footer {
border-radius: 0 0 2em 2em;
}
}
/* print styles */
@media print {
article {
position: static;
margin: 0 auto;
}
aside,
body,
.container,
footer,
header {
color: #000;
background: #fff;
}
body {
max-width: 100%;
}
nav {
display: none;
}
}
@page {
margin: 0.75in;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Murfreesboro Regional Soccer League</title>
<!--
Murfreesboro Regional Soccer League main web page
Filename: index.html
Author: Jerry Lopez
Date: 10/25/2018
HTML5 and CSS3 Illustrated Unit I, Independent Challenge 2
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a></p>
<header>
<div>
<img src="images/mrsl.png" width="224" height="105" alt="">
</div>
<h1>Murfreesboro Regional Soccer League</h1>
</header>
<nav class="sitenavigation">
<div class="navigation-menu-button">
<img src="images/menu.png" width="60" height="60" alt="Show navigation">
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="started.html">Getting Started</a></li>
<li><a href="schedule.html">Schedules</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</nav>
<article>
<p>Get exercise, have fun, and build your soccer skills playing with us.</p>
<figure>
<img src="images/kick.jpg" width="400" height="267" alt="a leg in a shoe with cleats and a high blue sock kicking a soccer ball">
</figure>
<p>Teams for beginners as well as experienced players.</p>
</article>
<aside>
<h2 id="contentstart">Upcoming Events</h2>
<p class="accent">4/23</p>
<p>Open practice</p>
<p class="accent">4/25</p>
<p>Blue/Green scrimmage</p>
<p class="accent">5/1</p>
<p>Kids workshop (5-13)</p>
</aside>
<footer>
<p>c/o Davies Sporting Goods</p>
<p>418 N. Sartoris St.</p>
<p>Murfreesboro, TN 37130</p>
<p>(615) 555-2255</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分:0)
从CSS中的function data = Loadcell()
eml.extrinsic('arduino','addon','read_HX711')
a = arduino('COM5','Mega2560','libraries','ExampleAddon/HX711');
scale = -338000;
while 1
LoadCell = addon(a, 'ExampleAddon/HX711',{'D6','D5'});
data = (read_HX711(LoadCell)-7388092)/scale
end
end
中删除clear: both;
(在CodePen中的第174行)。这使得内容可以换行。
答案 1 :(得分:0)
您的if (Department == 'IT') {
// select option values should be A,B,C
} else (Department == 'Finance') {
// select option values should be X,Y,Z
}
的浮点数使其停留在左侧。尝试关闭浮动控件并使用内联代码块,这样您的article
CSS就会变成:
article