我正在学习CSS。我正在做一项作业，我必须遵循一组说明并添加 css 规则，以使页面看起来以某种方式显示并让我理解不同的规则。我完全按照说明进行操作，但是我的页面看起来与作业中的页面有很大不同。下面列出了说明。
在您的 html 文档头部的样式标签之间包含以下两个 CSS 规则 body { 字体系列:Calibri，无衬线体； 背景色:#CAFEB8； } 标题{ 边框:1px 纯黑色； margin :1%； 填充:0 10px； 背景色:#89FC63；
为配料部分写一个 CSS 规则 A。创建一个 1px 宽度的实心黑色边框 b.在所有四个边(上、右、下、左)创建 1% 的边距 C。在所有四个边上创建 10px 的填充 d.将部分的背景颜色设置为淡蓝色(十六进制代码 #B4D1B6) e.将部分的宽度设置为 45% F。将部分的高度设置为 60% G。将部分向左浮动
为方法部分写一个 CSS 规则 A。创建一个 1px 宽度的实心黑色边框 b.在所有四个边(上、右、下、左)创建 1% 的边距 C。在所有四个边上创建 10px 的填充 d.将部分的背景颜色设置为浅橙色(十六进制代码#FFFF99) e.将部分的高度设置为 60% F。向右浮动该部分
为页 footer 分编写 CSS 规则 A。创建一个 1px 宽度的实心黑色边框 b.在所有四个边(上、右、下、左)创建 1% 的边距 C。在左侧和右侧创建 10px 的填充，在顶部和底部创建 0 的填充 d.将部分的背景颜色设置为淡绿色(十六进制代码 #AAFD8E)
body {
font-family: Calibri, sans-serif;
background-color: #CAFEB8;
}
header {
border: 1px solid black;
background-color: #89FC63;
margin: 1%;
padding: 0 10px
}
#ingredients {
border: 1px solid black;
background-color: #B4D1B6;
float:left;
height: 60%;
width: 40;
float:left;
margin:1%;
padding:10px;
}
#method {
border: 1px solid black;
background-color: #FFFF99;
height: 60%;
padding: 10px;
float: right;
margin: 1%;
}
footer
{
border: 1px solid black;
margin: 1%;
background-color:#AAFD8E
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
}<body>
<header>
<h1>Curried Chicken in Coconut Milk</h1>
<p> Thai curries are quick & easy to prepare, especially now that most supermarkets
sell authentic ready-made curry pastes flavoured with chilli, ginger, garlic, lemon grass & spices.</p>
<p> Serves 4-6 </p>
</header>
<div id = "ingredients">
<h2> Ingredients: </h2>
<ul>
<li> 1 tablespoon sunflower oil </li>
<li> 4 skinless chicken breast fillets, sliced </li>
<li> 1 large onion, finely chopped </li>
<li> 2 garlic cloves, finely chopped </li>
<li> 1 tablespoon freshly grated root ginger </li>
<li> 1 large red pepper, deseeded and chopped roughly </li>
<li> 3 carrots, peeled and chopped roughly </li>
<li> 2 tablespoons Thai red curry paste </li>
<li> 1/2 pint <!-- insert span here --> (300 ml) chicken stock </li>
<li> 14 oz (400g) can coconut milk </li>
<li> 2 tablespoons caster sugar </li>
<li> good pinch salt </li>
<li> juice of 1 lime </li>
<li> chopped fresh coriander leaves, to garnish </li>
<li> Thai fragrant or basmati rice, to serve </li>
</ul>
</div>
<div id = "method">
<h2> Method: </h2>
<ol>
<li> Heat a wok until very hot. Add the oil and heat until it is almost smoking, swirling around the sides.
Tip in the chicken breast and cook for a few minutes, until lightly browned.</li>
<li> Add the onion, garlic and ginger to the wok and cook for another 3-4 minutes, until softened. Add the red pepper and carrot.
Stir in the curry paste and cook for 2 minutes, stirring continuously. Pour in the chicken stock and coconut milk and bring to
a gentle simmer. Stir in the sugar and salt.</li>
<li> Add enough lime juice to taste and simmer gently for 10-15 minutes, until the sauce has slightly reduced and the chicken
is completely tender.</li>
<li> To serve, divide among warmed wide-rimmed bowls & sprinkle over the coriander, then serve with the Thai fragrant or basmati rice
</li>
</ol>
</div>
<footer>
<p> <strong> The Wrens Kitchen </strong> </p>
</footer>
</body> 
为什么页脚没有粘在底部？为什么我不能将两个 div 分开？
最佳答案
Write a CSS rule for the ingredients section that a. creates a solid black border 1px width b. creates a margin of 1% on all four sides (top, righ...
我假设它们是作为部分制作的？
<header>
<h1>Curried Chicken in Coconut Milk</h1>
<p> Thai curries are quick & easy to prepare, especially now that most supermarkets sell authentic ready-made curry pastes flavoured with chilli, ginger, garlic, lemon grass & spices.</p>
<p> Serves 4-6 </p>
</header>
<section id="ingredients">
<h2> Ingredients: </h2>
<ul>
<li> 1 tablespoon sunflower oil </li>
<li> 4 skinless chicken breast fillets, sliced </li>
<li> 1 large onion, finely chopped </li>
<li> 2 garlic cloves, finely chopped </li>
<li> 1 tablespoon freshly grated root ginger </li>
<li> 1 large red pepper, deseeded and chopped roughly </li>
<li> 3 carrots, peeled and chopped roughly </li>
<li> 2 tablespoons Thai red curry paste </li>
<li> 1/2 pint
<!-- insert span here -->(300 ml) chicken stock </li>
<li> 14 oz (400g) can coconut milk </li>
<li> 2 tablespoons caster sugar </li>
<li> good pinch salt </li>
<li> juice of 1 lime </li>
<li> chopped fresh coriander leaves, to garnish </li>
<li> Thai fragrant or basmati rice, to serve </li>
</ul>
</section>
<section id="method">
<h2> Method: </h2>
<ol>
<li> Heat a wok until very hot. Add the oil and heat until it is almost smoking, swirling around the sides. Tip in the chicken breast and cook for a few minutes, until lightly browned.</li>
<li> Add the onion, garlic and ginger to the wok and cook for another 3-4 minutes, until softened. Add the red pepper and carrot. Stir in the curry paste and cook for 2 minutes, stirring continuously. Pour in the chicken stock and coconut milk and bring
to a gentle simmer. Stir in the sugar and salt.</li>
<li> Add enough lime juice to taste and simmer gently for 10-15 minutes, until the sauce has slightly reduced and the chicken is completely tender.</li>
<li> To serve, divide among warmed wide-rimmed bowls & sprinkle over the coriander, then serve with the Thai fragrant or basmati rice
</li>
</ol>
</section>
<section id="footer">
<p> <strong> The Wrens Kitchen </strong> </p>
</section>
body {
font-family: Calibri, sans-serif;
background-color: #CAFEB8;
}
header {
border: 1px solid black;
background-color: #89FC63;
margin: 1%;
padding: 0 10px;
}
#ingredients {
border: 1px solid black;
background-color: #B4D1B6;
height: 60%;
width: 45%;
float: left;
margin: 1%;
padding: 10px;
}
#method {
border: 1px solid black;
background-color: #FFFF99;
height: 70%;
padding: 10px;
margin: 1%;
width: 45%;
float: right;
}
#footer {
border: 1px solid black;
margin: 1%;
background-color: #AAFD8E padding-left: 10px;
padding: 0 10px 0 0;
clear: left;
}
关于html - 我无法在两个 div 中间创建一个分区，我的页脚也没有粘在底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40824357/