发表于: 2018-07-23 23:25:07

2 708


今天完成的事情:

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任务六

任务开始时间:2018.07.23
预计demo时间:2018.07.25
是否有延期风险:                     

任务代码地址:https://kewangbuji.github.io/cssTask/task5/task5.html



返回列表 返回列表
评论

    分享到