[散修弟子]CSS-8592|2020年04月26日的日报-技能树.IT修真院

发表于： 2020-04-26 00:58:30

1 1503

现阶段：任务六基本完成

在练习任务六中遇到了以下问题

1.bootstrap的引用

https://v3.bootcss.com/getting-started/ 该网站起步-基本模板中有对应参考

2. 如何让滚动条只在中间主题部分，不让滚动条出现在页眉和页脚部分

我找到的方法是：采用页眉和页脚绝对定位的方式来实现，中间主体在top和bottom上同时偏移对于页眉和页脚的高度即可

.topNav {
        height: 44px;
<--我的header没有设置高度--用topNav这个盒子撑开的，header可以不用绝对定位-->
main {
        position: absolute;
        top: 44px;
        bottom: 55px;
        overflow: auto;
        overflow-x: hidden;
        width: 100%;
    }

footer {
        height: 55px;
        position: absolute;
        bottom: 0px;
        z-index: 10;
        width: 100%;
    }

3.如何使空间不足导致文字隐藏时会出现小点

这里需要保持文本不换行,被挤压时文本隐藏用省略号代替（隐藏文本要设置宽度）

text-overflow: ellipsis;（文本溢出以省略号显示）
 white-space: nowrap;(强制文字不换行)
 overflow: hidden;(文字溢出隐藏)

开始时我使用左右浮动使用上面这个方法做不出来，然后我又使用flex布局(修改的时候清除浮动没有去掉导致卡了一段时间)

display: flex;
justify-content: space-between;
white-space: nowrap;

、

<div class="donot">2020-4-1 至 2020-4-10</div>

才能使用上面那种方法（样式放在2020-4-1 至 2020-4-10这段文字的盒子里面）

4.小的竖线如何实现从中间到两边渐变

border-image: linear-gradient(white, #E2EAEC, white) 1 2;

使用以上代码可以实现相应效果

5.下拉菜单

下拉菜单可以使用section和ul制作，我使用的是bootstrap样式库里面的下拉菜单，现阶段自己还不太会写下拉菜单。

6.按钮的样式清除

点击后会有黄色边框

 button:focus {
        outline: 0!important;
    }

我使用了以上方法消除边框

7.盒子居中

移动50%然后再以自身长度退回50%（transfrom）

最近用到最多的是flex布局。

收获

收获了以上问题的答案，学会在实践中发现并解决问题，遇到问题不要害怕hhh，其实现阶段遇到的问题都是可以解决的。

计划

明天开始了解任务7的相关内容

返回列表

【任务6】 [散修弟子]CSS-8592 | 2020年04月26日 的日报 中品

评论

分享到

【任务6】 [散修弟子]CSS-8592 | 2020年04月26日的日报中品