css 如何让我的代码看起来像屏幕截图？

mbyulnm0 于 2023-05-08 发布在其他

关注(0)|答案(1)|浏览(77)

我被难住了。我需要帮助，使我的代码看起来像提供的截图。我正在使用Microsoft Visual Code。
正确的截图我需要我的代码看起来像

这就是我现在的屏幕

<!DOCTYPE html>

<html lang="zxx">
<head>
<meta charset="utf-8">
<title>College of Music</title>

<style>
        
    /* Hex Colors: #CDC2B3, #5F3E2F, #C23315, #341C12, #D8B9AB, #862E06, #F0D1C3 */
    
    * {margin: 0; padding: 0}

#wrapper {
    width: 778px;
    margin: auto;
    text-align: left;
}
#header {
    height:320px;
    background: url(images/header.jpg)no-repeat;
        
}
#header div {
    padding: 183px 213px 0px 82px;
}
#header p {
    margin: 0px;
    padding: 0px;
}

#header a {
    color:#FFFFFF;
}
body {
    background: #cdc2b3;
    text-align: center;
    margin: 0px;
    padding: 20px 0px 20px 0px;
    font: 15px "Georgia"; 
    color: #5F3E2F;
}
a {
    color: #5F3E2F;
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    color: #1D110B;
    text-decoration: underline;
}
img {
    border: 0px;
}
#header p {
    font-size:18px;
    font-style:italic;
    color:#FFFFFF;
    font-family: "Georgia";
}
#header p.more {
    padding-right: 22px;
}
#nav {
    width: 740px;
    height: 48px;
    margin: 0px 0px 0px 20px;
    background-color: #c23315;
    border-radius: 10px;
    margin-top: 0px;
    float: left;
    text-align: center;
    background-repeat:no-repeat;
    display:inline;
    float:left;

}
#nav a {
    font-size: 18px;
    font-style: italic;
    font-family: "Georgia";
    margin: 12px 0px 10px 0px;
    padding: 0px 20px 0px 20px;
    display:inline;
    float:left;
    border-right-width: 2px;
    border-right-style: inset;
    color: black;
}

f#nav a:hover {
    color:#862e06;
    text-decoration:none;
}

.lastchild {
    border-right: none 0px
}

#body {
    clear: both;
    width: 100%;
}
#body-bot {
    background: bottom url(images/foot_stretch.gif)no-repeat;
    padding-top: 20px;
    border: 10px;
    padding: 21px 25px 15px 42px;
}
#about-box {
    float: left;
    width: 315px;
}
#about-box ul {
    margin-left: 8px;
}
#express-box {
    float: right;
    width: 327px;
}
#foot {
    width: 738px;
    margin-left: 20px;
}
#foot-top {
    background:url(images/foot_top.gif)no-repeat;
}
#foot-bot {
    background:url(images/foot_bot.gif)no-repeat;
    padding: 13px 21px 12px 28px;
}
#what-box {
    float: left;
    width: 332px;
}
#what-box img.left {
    margin-left: 10px;
}
#what-box ul {
    float: left;
    margin-left: 2px;
    width: 184px;
}
#news-box {
    float: right;
    width: 316px;
}
#news-box ul {
    float: left;
    margin-left: 2px;
    width: 184px;
}
#footer {
    margin: 14px;
    text-align: center;
    font-weight: bold;
    color: black;
}
h2 {
    margin: 0px;
    padding: 0px 0px 10px 0px;
    font-family: "Georgia";
    font-size:20px;
    font-style:italic;

    color:#862e06;
}
h2 b{
    color:#341c12;
}

ul {
    margin: 0px;
    padding: 0px;
}
li {
    margin: 0px;
    padding: 0px 0px 5px 20px;
    list-style: none;
    background: 0px 3px url(images/bullet.gif) no-repeat;
}
p {
    margin-top: 0px;
    margin-bottom: 10px;
}
div.narrow-text {
    margin-right: 18px;
}
img.left {
    float: left;
    padding-right: 14px;
    padding-bottom: 16px;
}
#body p.more {
    padding-top: 6px;
}
#news-box p.more {
    padding-top: 0px;
    margin-top: 0px;
}
p.more {
    text-align: right;
}
.clear {
    clear: both;
}
td {
    text-align: right;
}

table {
  font-family: Georgia,;
  border-collapse: separate;
  width: 70%;
  
}

td, th {
  border: 1px solid #dddddd;
  text-align:
  padding: 8px;
  box-shadow: 1px 2px grey;
  margin-right:revert;
}

tr:nth-child(even) {
  background-color: #F0D1C3;
}

tr:nth-child(odd) {
    background-color: white;
}

    
    </style>
</head>


        <label>Search our Site</label>
        <input type="text" name="txt1">

<div id="wrapper">
    <div id="header">
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div id="nav"> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Services</a> <a href="#">Music</a> <a href="#">Courses</a> <a class="lastchild" href="#">Contact us</a></div>
    <div id="body">
      <div id="body-top">
        <div id="body-bot">
          <div id="about-box">
            <h2><b>About</b> our music</h2>
            <img src="images/pic_1.jpg" alt="Pic 1" class="left" width="112" height="92">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <ul>
              <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
              <li>Cras semper erat ut mi. </li>
              <li>Proin lobortis ipsum ac erat. </li>
              <li>Morbi nec enim vitae est posuere luctus.</li>
            </ul>
          </div>
          <div id="express-box">
            <h2><b>About</b> our staff</h2>
            <img src="images/pic_2.jpg" alt="Pic 2" class="left" width="112" height="92">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <div class="narrow-text">
              <p>Our staff all received special training from former American Idol judges!</p>
            
            </div>
            
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div id="foot">
      <div id="foot-top">
        <div id="foot-bot">
          <div id="what-box">
    <table>
            <td class="header" colspan="2">
                <h2><b>What</b> we offer</h2>
                <table>
  
                    <tr>
                      
                      
                    </tr>
                    <tr>
                      <td>Advanced Banjo</td>
                      <td>10,000 Bitcoins</td>
                      
                    </tr>
                    <tr>
                      <td>Beginner Washboard</td>
                      <td>6000 Bitcoins</td>
                      
                    </tr>
                    <tr>
                      <td>Whacking Paintbucktes</td>
                      <td>20,000 Bitcoins</td>
                      
                    </tr>
                    <tr>
                      <td>Humming Annoyingly</td>
                      <td>50,000 Bitcoins</td>
                      
                    </tr>
                    
                  </table>
            
          </div>
          <div id="news-box">
            <h2><b>News</b> &amp; events</h2>
            <img src="images/pic_4.jpg" alt="Pic 4" class="left" width="86" height="77">
            <ul>
              <li><a href="#">Nullam</a> scelerisque consequat libero. </li>
              <li><a href="#">Vivamus</a> mattis augue ut augue.</li>
            </ul>
            
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>© 2019 collegeofmusic.com all right reserved - Designed by Keebler Elves</p>
    </div>
  </div>
  </html>

当我将表格添加到“我们提供什么/新闻和活动”时，我的表格背景变白色了，我的页脚框也消失了。现在它们被堆叠在彼此的顶部。我的“关于我们的音乐/关于我们的员工”不会显示在我的顶部框中。我的背景颜色位于盒子的顶部。我试图让我的代码看起来像“正确的屏幕截图”。

css

来源：https://stackoverflow.com/questions/76191654/how-do-i-make-my-code-look-like-the-screenshot

1条答案

按热度按时间

ccrfmcuu1#

您的HTML无效。你可以在这里测试例如：https://validator.w3.org/nu/#textarea我在下面的代码块中用注解标记了它。

<div id="foot">
  <div id="foot-top">
    <div id="foot-bot">
      <div id="what-box">
    <table><!-- This element is not closed and the "tr" is missing -->
        <td class="header" colspan="2"><!-- This element is not closed -->
            <h2><b>What</b> we offer</h2>
            <table>

                <tr><!-- This element must contain "td" -->
                  
                  
                </tr>
                <tr>
                  <td>Advanced Banjo</td>
                  <td>10,000 Bitcoins</td>
                  
                </tr>
                <tr>
                  <td>Beginner Washboard</td>
                  <td>6000 Bitcoins</td>
                  
                </tr>
                <tr>
                  <td>Whacking Paintbucktes</td>
                  <td>20,000 Bitcoins</td>
                  
                </tr>
                <tr>
                  <td>Humming Annoyingly</td>
                  <td>50,000 Bitcoins</td>
                  
                </tr>
                
              </table>
        
      </div>

赞(0）回复(0）举报 2023-05-08

我来回答

css 如何让我的代码看起来像屏幕截图？

1条答案

相关问题

热门标签

最新问答