Home>

I'm studying HTML and CSS in a book called HTML5&CSS3 Design Book, but I wrote a copy of the CSS that puts the list in the book side by side, but the change was not applied well. . I think that it is exactly the same as the description in the range that I confirmed.

Maybe the drawing method has changed. The code looks like this:

<! DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width">
<link rel = "stylesheet" href = "grid-guide.css">
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<div class = "box1">
<div>
<h1><a href = "#">TimeSwitch</a></h1>
</div>
</div>
<div class = "box2">
    <nav class = "menu">
    <ul>
    <li><a href = "#">Top<a></li>
    <li><a href = "#">General goods<a></li>
    <li><a href = "#">Gadget<a></li>
    <li><a href = "#">Food<a></li>
    <li><a href = "#">outing<a></li>
    <li><a href = "#">Contact Us<a></li>
    </ul>
    </nav>
</div>
<div class = "boxA">
<div class = "box3">
BOX3
</div>
<div class = "box4">
BOX4
</div>
</div>
<div class = "box5">
BOX5
</div>
</body>
</html>
@ charset "UTF-8";
body {font-family: 'Meirio',
        'Hiragino Kaku Gothic Pro', 'sans-serif'}
.site h1 a {color: # 000000;
                text-decoration: none;}
.site h1 {margin: 0;
                font-size: 30;
/*navigation*/    
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li a {
    display: block;
    padding: 5px;
    color: # 000000;
    font-size: 14px;
    text-decoration: none;
}
.menu ul: after {
    content: "";
    display: block;
    width: auto;
}
.menu li {
    float: left;
    width: auto;
}

@media (min-width 768px) {
.box3 {
    float: left;
    width: 70}
.box4 {
    float: left;
    width: 30;}
}
.boxA: after {
    content: "";
    display: block;
    clear: both;}
.box3 {
    float: left;
    width: 70}
.box4 {
    float: left;
    width: 30;}
  • Answer # 1

    Unify the coding style (indent width, line feed position, etc.), and use lint (function/program to find syntax errors).
    Then you can find the basic problems

    </a>is<a> }(without closing parenthesis) :(colon) is missing Useless white space

    The corrected version is as follows (the lint of https://liveweave.com/ is noisy more than necessary, so you can go through the basics except for the Binbo error)

    <! DOCTYPE html>
    <html>
      <head>
        <meta name = "viewport" content = "width = device-width">
        <link rel = "stylesheet" href = "grid-guide.css">
        <link rel = "stylesheet" href = "style.css">
      </head>
      <body>
        <div>
          <div>
            <h1><a href = "#">TimeSwitch</a></h1>
          </div>
        </div>
        <div>
            <nav>
              <ul>
                <li><a href = "#">Top</a></li>
                <li><a href = "#">General goods</a></li>
                <li><a href = "#">Gadgets</a></li>
                <li><a href = "#">Food</a></li>
                <li><a href = "#">Outing</a></li>
                <li><a href = "#">Contact Us</a></li>
              </ul>
            </nav>
        </div>
        <div>
          <div>BOX3</div>
          <div>BOX4</div>
        </div>
        <div>BOX5</div>
      </body>
    </html>
    @ charset "UTF-8";
    body {
        font-family: 'Meirio', 'Hiragino Kaku Gothic Pro', 'sans-serif'
    }
    .site h1 a {
        color: # 000000;
        text-decoration: none;
    }
    .site h1 {
        margin: 0;
        font-size: 30;
    }
      /*navigation*/
    .menu ul {
        margin: 0;padding: 0;
        list-style: none;
    }
    .menu li a {
        display: block;
        padding: 5px;
        color: # 000000;
        font-size: 14px;
        text-decoration: none;
    }
    .menu ul :: after {
        content: "";
        display: block;
        width: auto;
    }
    .menu li {
        float: left;
        width: auto;
    }
    @media (min-width: 768px) {
      .box3 {
          float: left;
          width: 70;
      }
      .box4 {
          float: left;
          width: 30;
      }
    }
    .boxA :: after {
        content: "";
        display: block;
        clear: both;
    }
    .box3 {
        float: left;
        width: 70;
    }
    .box4 {
        float: left;
        width: 30;
    }

  • Answer # 2

    I don't have a book at hand, so I can't verify that it's really written,
    As already pointed out, the syntax of html is quite messy.
    The program only works as instructed, so it doesn't absorb any minor syntax mistakes "good".
    In particular, I was able to see the whole structure and consistency only because I was able to write the same `` intent '' that I could write at the stage of copying, and I could not see the whole structure and consistency,< br /> You will not be able to escape.
    It's very unavoidable that you'll be wasting time and spending hours and days.

    Learn "syntax checking" and "debugging".
    In particular, if you deal with JavaScript and server-side languages ​​(PHP) in the future, there will often be nothing (it seems to be) executed in the first place.

    For syntax checking of html and CSS, you can use an editor with a check function that has already been answered, or
    There are many services that check the syntax on the Web. Please use it.

    5 HTML and CSS grammar check tools

    Recommended HTML grammar and CSS check tool

  • Answer # 3

    .site h1's closing parenthesis is not written.

    . site h1 {
    margin: 0;
    font-size: 30;
    }