Question

我的问题主要是了解我书中的这一步所要求的内容。它逐字逐句地说。

“在h2标题下方，插入一个包含div元素的新行，其中类值表与前一行的缩进级别相同。在最后一行商店小时信息下面为div元素添加一个结束标记。每行代码包含div元素中的存储小时信息，类值为“row”，然后从每行中删除开始和结束的p标签。对于每一行，在div元素中包含星期几的缩写，删除它后面的冒号（:)，将行的其余部分移动到一个新行，然后将新行的内容括在div元素中。“

我已经删除了p标签并开始插入div标签，直到我对它们应该放置的位置感到困惑。谁能告诉我每个div标签应该在哪里？这是今晚到期的，我已经知道我的老师不会在一天结束前回复，因为那是大学教授最擅长的。

/* 
   Spotted Wren Garden Center style sheet 
   Filename: styles.css

   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit H, Independent Challenge 1
 */

/* reset styles */
html {
   font-size: 18px;
}
article, body, div, figcaption, dd, dl, dt, ul, li, figure, footer, header, h1, h2, h3, img, nav, p, table, tbody, td, tfoot, th, thead, tr {
   border: 0;
   padding: 0;
   margin: 0;
   border-collapse: collapse;
   list-style-type: none;
}
img {
   max-width: 100%;
   height: auto;
   width: auto;
}

/* global styles */
p {
   margin: 0.4em 0;
   font-size: 1.1em;
}

/* body and page container */
body {
   font-family: Lato, Arial, Helvetica, sans-serif;
   background: #6ac238;
}
.container {
   max-width: 864px;
   margin: 0 auto;
   position: relative;
}

/* skip navigation link */
p.skipnavigation {
   margin: 0;
}
p.skipnavigation a {
   position: absolute;
   left: -10000px;
}
p.skipnavigation a:focus {
   color: black;
   background-color: snow;
   top: 3.5%;
   left: auto;
   right: 3%;
   z-index: 2;
}

/* header section */
header {
   background-color: white;
   text-align: center;
}
h1 {
   font-weight: 700;
   font-size: 2em;
}
h1 img {
   display: block;
}

/* site navigation */
nav.sitenavigation {
   padding-left: 10%;
   background-color: rgb(241,90,36);
}
nav.sitenavigation li {
   display: inline-block;
   margin: 0.4em 0.6em;
   font-size: 1.1em;
}
nav.sitenavigation a:link {
   color: yellow;
   text-decoration: none;
}
nav.sitenavigation a:visited {
   color: #ffffff;
}
nav.sitenavigation a:hover, nav.sitenavigation a:focus {
   color: yellow;
   text-shadow: 1px -1px 0 #000000;
}

/* main content */
article {
   padding: 1% 1% 1% 5%;
   text-align: left;
   background-color: rgb(255,255,255);
   overflow: auto;
}
h2 {
   margin: 0 0 0.4em;
   font-size: 1.8em;
   font-weight: 700;
}
h3 {
   margin: 1em 0 0.5em;
   font-size: 1.2em;
   font-weight: bold;
   color: green;
}
figure {
   width: 40%;
   float: right;
   text-align: center;
}
.scientific-name {
   font-style: italic;
}

/* main content table */
th, td {
	border: 1px solid black;
	padding: 0.5em;
}

th {
	background-color: yellow;
}
.temps {
	background-color: #87f547;
}

.frost {
	background-color: #f5a88c;
}

/* Main Content Description List */
dd {	
	margin-left: 1em;
	font-style: italic;
}

/* Main Content CSS Table */
.table {
	margin: 1em 0;
	font-size: 1.3em;
	display: table;
}
.row {
	display: table-row;
}
.row div {
	padding: 0.25em 0.5em;
	display: table-cell;
}
.day {
	font-weight: bold;
}
/* footer section */
footer {
   padding: 1% 1% 1% 5%;
   background-color: yellow;
   clear: both;
}

/* print styles */
@media print {
   .container, h1, h2, p {
      color: black;
      background: white;
   }
   nav {
      display: none;
   }
}
@page {
   margin: 1in;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Spotted Wren Garden Center - Hours</title>
      <!--
         Spotted Wren Garden Center Hours page
         Filename: hours.html
      
         Author:   Justus Self
         Date:     3/21/17
         HTML5 and CSS3 Illustrated Unit H, Independent Challenge 1
      -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="modernizr.custom.40753.js"></script>
      <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
      <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>
            <h1><a href="index.html"><img src="images/spotwren.gif" width="864" height="184" alt="Spotted Wren Garden Center"></a></h1>
         </header>
         <nav class="sitenavigation">
		 <ul>
            <li><a href="index.html">Home</a></li> 
            <li><a href="hours.html">Hours</a></li>
            <li><a href="resource.html">Resources</a></li>
            <li><a href="consult.html">Consulting</a></li>
		 </ul>
         </nav>
         <article>
            <figure id="contentstart">
               <img src="images/cone.jpg" height="301" width="200" alt="a monarch butterfly on a purple coneflower">
               <figcaption>Purple Coneflower</figcaption>
            </figure>
            <h2>Hours</h2>
			<div class="table">
            <div class="row"> <div>Mon</div> 
			<div> 8am &mdash; 8pm</div>
            <div class="row">Tue: 8am &mdash; 8pm</div>
            <div class="row">Wed: 8am &mdash; 5pm</div>
            <div class="row">Thu: 8am &mdash; 8pm</div>
            <div class="row">Fri: 8am &mdash; 8pm</div>
            <div class="row">Sat: 9am &mdash; 6pm</div>
            <div class="row">Sun: 11am &mdash; 6pm</div>
			</div>
         </article>
         <footer>
            <p>548 N. 58th St. &#8226; Omaha, NE 68132 &#8226; (402) 555-9736</p>
         </footer>
      </div>
   </body>
</html>

Answer 1

让我们从这一行开始，并按照说明一步一步地进行：

<div class="row">Tue: 8am — 8pm</div>

对于每一行，请在div元素中包含星期几的缩写[...]

<div class="row"><div>Tue</div>: 8am — 8pm</div>

[...]删除它后面的冒号（:)

<div class="row"><div>Tue</div> 8am — 8pm</div>

[...]将该行的其余部分移至新行[...]

<div class="row"><div>Tue</div> 8am — 8pm</div>

[...]然后将新行的内容包含在div元素[...]

<div class="row"><div>Tue</div> <div>8am — 8pm</div></div>

包含多个div标签？

1 个答案: