个人中心
gpt4 book ai didi

html - 如何使网站上的文章元素居中？

转载 作者：行者123 更新时间：2023-11-28 00:54:49 25 4
gpt4 key购买 nike

我正在做类(class)作业，但我不知道如何让我网站上的文章看起来像书本。我的代码和网站的图片如下。

enter image description here

CodePen link 

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>

最佳答案

从您的 CSS 中的 article 中删除 clear: both;(CodePen 中的第 174 行)。这就是让内容换行。

关于html - 如何使网站上的文章元素居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52999995/

25 4 0
文章推荐： javascript - SSRS ReportViewer 使用 HTML5 渲染器渲染报告的速度很慢
文章推荐： c++ - cuda header 包含失败
文章推荐： javascript - 将 JSON 对象数组转换为字符串数组以与 C3.js 图表库一起使用
文章推荐： c++ - QI 在查询 IAMStreamConfig 时返回 E_NOINTERFACE
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com