发表于: 2018-07-23 23:25:07
2 707
今天完成的事情:
1.完成任务五了。
2.
明天计划的事情:
1.任务六做一半
2.
1.左边定宽,右边自适应,为什么用
vertical-align: middle;
这个,在任务五页面达不到效果。新开一个页面,倒是可以达到左边随着右边加宽而居中。原因是左边无法给宽度,因为给百分之百会超出,给少了,会掉到下面一行。
收获:
第一:左边定宽,右边自适应,用了很多种方法实验,一个是左边浮动,右边宽度100%;但是不行,一旦缩小页面,右边的就会掉下来。
还有一个是display:flex。右边。right{flex:1;}
最终采取的方法是,左边绝对定位,要想让字体垂直居中,加一个top。本来应该是50%。但是由于框太窄,字体本身有高度,所以变为35%。这样一点字体看着就在中间,很多字体还是在靠上的地方,最好改为50%。
昨天我把线新做了个伪类,不仅代码量多,还麻烦,今天用哪个border-bottom,solid,black,就可以了。然后后面的几条线左边有空缺,就做了个95%。marget-left:20px.
右边要自适应。就给一个display:inline-block。给好padding,margin。就可以了。说起来特别简单,但是足足卡了我一天。
网上说的一些自适应,左边定宽,估计不是不行,而是适用特定情况,不适用我这种情况。
还有绝对定位,首先找父级定位,如果父级没有定位,那么就会找body定位,也就是你这么一块,或者整个页面。这是最关键的,也需要理解的。
.six {
position: absolute; 这个不定位,左边的定位无从谈起,会跑到上面去
width: 95%; 这是宽度,因为左边留了一点空袭。
margin-left: 20px; 距左边的距离
min-height: 100px; 之所以要设置最小宽度,是因为页面上展示,最小和上面一系列一样,大不封顶。
border-bottom: 1px solid #696969; 下面的黑线,1是宽度,实线,颜色。
}
.aside {
position: absolute; 定位。绝对定位,先寻找父级。
/*display: inline-block;*/
font-size: 29px; 字体。
margin-left: 20px; 左边距离
padding-right: 35px; 内边距计算在总宽度之内
/*height: 38px;*/
top: 35%; 纵向高度,刚才解释过
border-right: solid #696969; 右边的线,好看。
color: #9C9C9C;
}
.content {
display: inline-block; 要给一个inline-block
margin-left: 220px; 这个距左边的距离,是因为左边绝对定位了,浮起来了,空间让出来了,所以要给的边框外空间把定位的宽度算出来。
margin-top: 36px;
margin-bottom: 36px;
font-size: 20px;
/*vertical-align: middle;*/ 注释掉的是泽平大佬教我的,就是用来左边垂直居中的。不过要两边都加display才成。不过用在项目上不合适,用在我的满江红上倒是很合适。
}
二。头部,你滚动滚动条,头部会盖住页面的内容,这种方式通过等级实现:
.headers {
background: #68cdd5;
width: 100%;
height: 88px;
color: white;
text-align: center;
line-height: 88px;
position: fixed;
z-index: 1;
border: solid #68cdd5;
}
来一个position:fiexd;
再来一个z-index:1;代表等级。如果是负数,代表优先级低。默认等于0.
三。卡了我一个上午的图片,为什么拉伸不怎么变形,一开始用的
.ups {
width: 100%;
height: 328px;
background-image: url("img/han.png");
background-repeat: no-repeat;
background-size: cover;
}
background-size:100% 100%;
后来换成了cover。才好了。
宽度也试过,给了像素值,就缩不动了。
那个contain,填不满空间所需要的内容。
进度:CSS任务六
任务代码地址:https://kewangbuji.github.io/cssTask/task5/task5.html
评论