发表于: 2018-10-16 23:54:43

2 761


今天完成的事情:白天有事出去了 今天把任务三的背景色从引入图片改成了色号,省了不少麻烦,色号使用PS颜色吸管获得的。

然后学习了包含块的具体属性,用到才知道很重要,跟我今天任务有关的:首先是绝对定位absolute(根据已定位的祖先元素定位,没有就是最初的包含块,body),该定位的元素是脱离文档流的,如果是块级元素,就会失去其独占一行的属性,而且如果包含块里只有这一个元素,那这个块高度就会撑不起来,因为这个元素脱离了这个包含块。

然后relative是相对位置(相对于它本该出想的地方),它不会脱离文档流,但是被定位的块级元素会独占一行。

任务要求header紧贴边界上沿,用绝对定位做出一个包含块,然后里面要左中右三个块,我先是要用三个p绝对定位分三段,发现显示不了,我以为是元素的问题,换了div也同样不行,然后用div左右两块分别向两边浮动,中间用相对定位发现可以显示,然后我才发现是因为绝对定位撑不起来header,然后我把header换成相对定位然后又不显示,还没弄懂。代码如下

  <style type="text/css">
body,div,p{
margin: 0px;
}
body{
width: 100%;
color: white;
position: absolute;
top: 0px;
}
header{
width: 100%;
background-color: rgb(95,192,205);
position: absolute;
top: 0px;
text-align: center;
}
div{
font-weight: bold;
font-size: 15px;
}
.header-left{
float: left;
margin: 15px;
}
.header-middle{
position: absolute;
top: 13px;
left: 0PX;
right: 0PX;
font-size: 18px;
}
.header-right{
margin: 15px;
float: right;
}
</style>
</head>
<body>
<header>
<div class="header-left">注册</div>
<div class="header-middle">登录</div>
<div class="header-right">关闭</div>
</header>
</body>
</html>


明天计划的事情:明天继续配置header,然后调配表单。
遇到的问题:包含块里的元素各种不显示,经过各种实验勉强实现 
收获:学习了包含块的运用


返回列表 返回列表
评论

    分享到