我现在正在学习CSS.我正在做一项任务,我必须遵循一套指令并添加css规则,因为我要使页面看起来像某种方式,并让我理解不同的规则.我完全按照说明操作,但是我的页面与分配中的页面看起来有很多不同.说明如下.
>在html文档头部的样式标记之间包含以下两个CSS规则
身体 {
font-family：Calibri,sans-serif;
background-color：#CAFEB8;
}
标头{
边框：1px纯黑色;
保证金：1％;
填充：0 10px;
background-color：#89FC63;
}
>为成分部分编写CSS规则
一个.创建一个1px宽的纯黑色边框
湾在所有四个边(顶部,右侧,底部,左侧)创建1％的边距
C.在四个边上创建一个10px的填充
d.将该部分的背景颜色设置为淡蓝色(十六进制代码#B4D1B6)
即将截面的宽度设置为45％
F.将该部分的高度设置为60％
G.漂浮在左边的部分
>为方法部分编写CSS规则
一个.创建一个1px宽的纯黑色边框
湾在所有四个边(顶部,右侧,底部,左侧)创建1％的边距
C.在四个边上创建一个10px的填充
d.将该部分的背景颜色设置为淡橙色(十六进制代码#FFFF99)
即将该部分的高度设置为60％
F.将该部分向右漂浮
>为页脚部分编写CSS规则
一个.创建一个1px宽的纯黑色边框
湾在所有四个边(顶部,右侧,底部,左侧)创建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？
最佳答案 解决你的问题
>为什么页脚不粘在底部？
>为什么我不能分割两个div？
样品
见this sample based on your code.
关于问题1页脚
这取决于你坚持底部的意思.因为你改变方法和成分this floating rules applies for footer的浮动
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist.
要将页脚放置在浮动框下方,请使用清除control flow next to floats：两者：
Requires that the top border edge of the box be below the bottom outer
edge of any right-floating and left-floating boxes that resulted from
elements earlier in the source document.
添加明确：两者;照顾浮动：
footer{
background-color:#AAFD8E; /* a ; was missing */
padding: 0px 10px 0px 10px;
clear: both; /* i added clear:both */
}
将页脚设置为底部
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
关于问题2划分两个div
If there is not enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.
在您编写宽度的成分的样式规则中：40但必须是width:<length>和< length>是< number>紧接着是一个单位标识符.
#ingredients {
float:left;
width: 40ex; /* unit ex added */
}
#method {
margin: 0 0 0 50ex; /* margin left 50ex added */
}
对于浮动div,你可能会对find two-divs-side-by-side-fluid-display有所帮助. CSS 2.2 on float的案文可能有助于理解规则.
附加信息
为了提高可维护性,我将创建一个涵盖多个样式规则的类.base.由于页脚的规则类似,我将添加另一个规则：
.base { border:1px solid black; margin: 1%; padding: 10px;}
.basefooter { border:1px solid black; margin: 1%; padding: 0 10px}
