MDN-CSS-排版社区大学首页

最新推荐文章于 2024-07-17 16:03:30 发布

Dreamzz2

最新推荐文章于 2024-07-17 16:03:30 发布

阅读量339

点赞数 1

文章标签： css servlet 前端

本文链接：https://blog.csdn.net/Dreamzz2/article/details/126210425

版权

效果图：

HTML：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>St Huxley's Community College</title>
    <link href="index.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>St Huxley's Community College</h1>
    </header>

    <section>
      <h2>Brave new world</h2>

      <p>
        It's a brave new world out there. Our children are being put in
        increasing more competitive situations, both during recreation, and as
        they start to move into the adult world of
        <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>,
        <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>,
        <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other
        life choices. Having the wrong mindset, becoming
        <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or
        making the wrong choices can contribute to them experiencing difficulty
        in taking their rightful place in today's ideal society.
      </p>

      <p>
        As concerned parents, guardians or carers, you will no doubt want to
        give your children the best possible start in life — and you've come to
        the right place.
      </p>

      <h2>The best start in life</h2>

      <p>
        At St. Huxley's, we pride ourselves in not only giving our students a
        top quality education, but also giving them the societal and emotional
        intelligence they need to win big in the coming utopia. We not only
        excel at subjects such as genetics, data mining, and chemistry, but we
        also include compulsory lessons in:
      </p>

      <ul>
        <li>Emotional control</li>
        <li>Judgement</li>
        <li>Assertion</li>
        <li>Focus and resolve</li>
      </ul>

      <p>If you are interested, then you next steps will likely be to:</p>

      <ol>
        <li><a href="#">Call us</a> for more information</li>
        <li><a href="#">Ask for a brochure</a>, which includes signup form</li>
        <li><a href="#">Book a visit</a>!</li>
      </ol>
    </section>

    <aside>
      <h2>Top course choices</h2>

      <ul>
        <li><a href="#">Genetic engineering</a></li>
        <li><a href="#">Genetic mutation</a></li>
        <li><a href="#">Organic Chemistry</a></li>
        <li><a href="#">Pharmaceuticals</a></li>
        <li><a href="#">Biochemistry with behaviour</a></li>
        <li><a href="#">Pure biochemistry</a></li>
        <li><a href="#">Data mining</a></li>
        <li><a href="#">Computer security</a></li>
        <li><a href="#">Bioinformatics</a></li>
        <li><a href="#">Cybernetics</a></li>
      </ul>

      <p><a href="#">See more</a></p>
    </aside>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Finding us</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Prospectus</a></li>
      </ul>
    </nav>

    <footer>
      <p>&copy; 2016 St Huxley's Community College</p>
    </footer>
  </body>
</html>

CSS：

/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}

/* Layout */

section {
  float: left;
  width: 50%;
}

aside {
  float: left;
  width: 30%;
}

nav {
  float: left;
  width: 20%;
}

footer {
  clear: both;
}

header,
section,
aside,
nav,
footer {
  padding: 20px;
}

/* header and footer */

header,
footer {
  border-top: 5px solid #a66;
  border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */
/* ||设置header的字体 */
header {
  font-family: sans-serif;
}

/* ||设置body的字体和样式 */
body {
  font-family: serif;
  line-height: 1.5;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
}

/* ||设置全站网页 font-size 为 10px。 */
html {
  font-size: 10px;
}

/* ||设置各个元素的字体大小 */
h1 {
  font-size: 4em;
  text-align: center;
  letter-spacing: 0.2em;
}

h2 {
  font-size: 2.5em;
}

p {
  font-size: 1.5em;
}

section h2 + p {
  text-indent: 20px;
}

/* ||设置超链接的样式（顺序：L,V,F,H,A） 记忆：LoVe Fears HAte */
a {
  padding: 2px 1px 0;
}

a:link {
  color: #a66;
}

a:visited {
  color: #a66;
}

a:focus {
  color: #a66;
  text-decoration: none;
  outline: none;
}

a:hover {
  color: #a66;
  text-decoration: none;
}

a:active {
  background-color: antiquewhite;
  color: #a00;
}

/* ||设置section下紧挨着h2的p元素里面的a的样式 */
section h2 + p a {
  padding: 2px 16px 0 1px;
  background: url("lianjie.png") 100% 0 no-repeat;
}

/* ||去掉默认的黑点 */
ul {
  list-style-type: none;
}

/* ||设置section,aside中li的样式 */
section ul li,
aside ul li {
  padding-left: 2rem;
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

section ul li {
  background-image: url("orange.png");
}

aside ul li {
  background-image: url("star.png");
}

/* ||设置nav中a的样式 */
nav ul li a {
  text-decoration: none;
  display: block;
  width: 20rem;
  height: 8rem;
  border: 1px solid #a66;
  margin: 2rem 0;
  text-align: center;
  line-height: 8rem;
  font-size: 2rem;
  font-weight: bold;
}

nav ul li a:hover {
  background-color: antiquewhite;
}