Html 我的div似乎没有正确嵌套_Html_Css

Html 我的div似乎没有正确嵌套

html css

Html 我的div似乎没有正确嵌套,html,css,Html,Css,请参阅下面的代码和此提琴：我的div似乎没有正确嵌套。我试图更改“销售”部分、服务类型、问题等部分中包含的div的边距。但是，当我试图编辑边距、填充等时，此div中的div（例如，框1）不反映更改想法 <head> <title>Lavu Explore</title> <link rel="stylesheet" type="text/css" href="stylesheet1.css"> </head> <body>

请参阅下面的代码和此提琴：

我的div似乎没有正确嵌套。我试图更改“销售”部分、服务类型、问题等部分中包含的div的边距。但是，当我试图编辑边距、填充等时，此div中的div（例如，框1）不反映更改

想法

<head>
<title>Lavu Explore</title>
<link rel="stylesheet" type="text/css" href="stylesheet1.css">
</head>
<body>
<div id="header">
  <div id="sub_nav">
    <ul>
      <li>Overview</li>
      <li>Payments</li>
      <li>Hardware</li>
      <li>Testimonials</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
<div id="sell_section">
  <h2>Sell, Manage, & Market in one easy system</h2>
  <hr class="hr_1">
    <div class="box1">
      <img id ="terminal_img" src="http://i.imgur.com/D5T6lY1.png">
    </div>
    <div class="box1">
      <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.
      <ul>
        <li>CLOUD DATA ACCESS</li>
        <li>TOUCHSCREEN INTERFACE</li>
        <li>WIRELESS COMMUNICATION</li>
      </ul>
  </div>
</div>
<hr class="hr_2">
<div id="service_types_section">
  <h4>Best restaurant point of sale for any service type</h4>
  <p>Quick serve, bars, nightclubs, food trucks, coffee shops, pizzerias, and more...</p>
  <div class="container">
    <div class="box b1"><img id="table_layout" src="http://i.imgur.com/UvA8BRX.png"><p>TABLE LAYOUT</p></div>
    <div class="box b2"><img src="http://i.imgur.com/T4Ra30G.png"><p>OPEN TAB LAYOUT</p></div>
    <div class="box b3"><img src="http://i.imgur.com/kWTOzJl.png"><p>QUICK SERVE</p></div>  
  </div>
</div> 
<hr class="hr_2">
<div id="fresh_tech_section">
  <div class="box1">
    <h4>Fresh Technology</h4>
    <hr class=hr_1 style="float:left; width:70%">
      <br>
    <p>Taking advantage of Apple's reliable technologies, Lavu POS operates on iPads, iPods, and iPhones. The clean, intuitive interface is easy to learn, yet includes the specific industry features that ensure that restaurant operations run smoothly every shift</p></td>
  </div>
  <div class="box1">
    <img id="fresh_tech_img" src="http://i.imgur.com/mC7XsaX.png">
  </div>
</div>
<hr class="hr_2">
<div id="Front_of_House_solutions">
  <div class="box1">
    <img src="http://i.imgur.com/HrhfIL1.png">
  </div>
  <div class="box1" style="">
    <h4>Front of House Solutions</h4>
    <hr class="hr_1" style="float:left" >
    <br>
      <p style="margin:1%">Split checks</p>
      <p style="margin:1%">Scheduled discounts</p>
      <p style="margin:1%">Multiple payment options</p>
      <p style="margin:1%">Order transfers</p>
      <p style="margin:1%">Menu item modifiers</p>
      <p style="margin:1%">Photos & descriptors</p>
  </div>   
</div>
<hr class="hr_2">
<div id="Back_of_House_section">
  <h4>Back of House Customization</h4>
  <hr class="hr_1">
  <img src="http://i.imgur.com/UVtKujY.png">
</div>
<div id="Payments_section">
  <h4>Payments</h4>
  <p>Lavu makes accepting payments simple. With dozens of integrated processing providers we ensure your business is positioned to get the best possible rates at every stage of your business</p>
</div>

就像你的另一个问题一样——我认为你把标签弄糊涂了，因为它们不是。它们提供了这样一个水平方向：

它们不包装任何内容，因此您需要为实际包装div的类设置样式（例如，

..

在css中被称为

#service_types_section{…}

）

此外，您还可以通过增加特定性来解决不同div中的

.box1

，例如：

#service_types_section .box1 {
  ...
  some css rules
  ...
}

#fresh_tech_section .box1 {
  ...
  some other css rules
  ...
}

这是一篇好文章。

你的html格式不好

选择新销售点的段落标记没有结束标记
段落标签
```
利用
```
的末尾有一个
您的
标记都没有结束“/”
添加结束标记
和
标记

首先尝试解决这个问题，看看它是否解决了您的一些问题。

不确定您是否不知道这一点，但是

框大小调整

不是一种继承的风格，这意味着将其放在

主体上

您并没有涵盖整个站点。您可能希望执行

并包括

框大小调整

#service_types_section .box1 {
  ...
  some css rules
  ...
}

#fresh_tech_section .box1 {
  ...
  some other css rules
  ...
}