12-入门：CSS 布局与定位（续）

2018-04-22 本文已影响0人格林姆大师

本节需要注意的知识点

本节涉及的代码：

    <main>
        <div class="user-card">
            ......
        </div>
        <div class="download-wrapper">
            <a class="download" href="./README.md" class="button" target="_blank" download>下载 pdf 简历</a>
        </div>
        <p class="self-introduction">
            熊路， 学徒级前端工程师，现在在 饥人谷 学习前端课程。<br>
            技能：前端开发（在学ing）
        </p>
    </main>

main .download-wrapper{
    text-align: center;
}
main .download-wrapper .download{
    font-size: 14px;
    line-height: 16px;
    padding: 21px 55px;
    display: inline-block;
    border: 1px solid #cbcdcf;
    /* vertical-align: top; */
    margin-top: 35px;
    margin-bottom: 32px;
    color: #3d4451;
    background-color: #efefef;
    border-radius: 3px;
    transition: box-shadow 0.3s;
}
main .download-wrapper .download:hover{
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}
main .self-introduction{
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: KaiTi;
    font-weight: bold;
    font-size: 20px;
    line-height: 36px;
}

section.skill,
section.portfolio{
    max-width: 940px;    
    margin-left: auto;
    margin-right: auto;  
    /* text-align: center;   */
    /* padding: 40px 50px 50px; */
    
}
section.skill h2,
section.portfolio h2{
    color: #3d4451;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;  
    margin-top: 60px;
    margin-bottom: 25px;
}
section.skill ol{
    list-style: none;
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
    padding: 37px 50px 10px;
    background-color: #ffffff;
}
section.skill ol li{
    /* border: 1px solid red; */
    float: left;
    width: 50%;;
    box-sizing: border-box;
    padding-right: 16px;
}
section.skill ol li:nth-child(even){
    padding-left:16px;
    padding-right: 0;
}
section.skill ol li span{
    font-size: 14px;
    line-height: 1.1;
    /* margin-bottom: 5px; */
}
section.skill ol li .progress-bar{
    /* border: 1px solid red; */
    background-color: #fae1e1;
    height: 5px;
    margin-top: 5px;
    margin-bottom: 37px;  
    border-radius: 2px;      
}
section.skill ol li .progress-bar .progress{
    background-color: #e8676b;
    height: 100%;
    width: 50%;
    border-radius: 2px;         
}

section.portfolio{
    text-align: center;
}
section.portfolio nav{
    /* border: 1px solid red; */
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 30px;
    
}
section.portfolio nav ol{
    /* border: 1px solid green; */
    list-style: none;
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
}
section.portfolio nav ol li{
    /* border: 1px solid red; */
    float: left;
    margin-left: 50px;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    font-family: "Open Sans";
    cursor: pointer;
}
section.portfolio nav ol li:first-child{
    margin-left: 0;
}
section.portfolio nav .bar{
    /* border: 1px solid red; */
    height: 5px;
    margin-top: 16px;
    border-radius: 2px;
    background-color: #ffffff;
}
section.portfolio nav .bar .bar-inner{
    background-color: #e8676b;
    width: 35px;
    height: 100%;
    margin-left: 0px;
    border-radius: 2px;
    transition: all 0.5s;
}
section.portfolio nav .bar .bar-inner.state-1{
    width: 35px;
    margin-left: 0px;
}
section.portfolio nav .bar .bar-inner.state-2{
    width: 40px;
    margin-left: 73px;
}
section.portfolio nav .bar .bar-inner.state-3{
    width: 85px;
    margin-left: 150px;
}
section.portfolio .jobs{
    /* border: 1px solid red; */
    position: relative;
    margin-bottom: 100px;
}
section.portfolio .jobs .big,
section.portfolio .jobs .small{
    position: absolute;
}

效果图：

知识点：

元素位移设置---main区域位置的上移：
方法一：采用margin-top：-x;即负margin来实现：

<div class="user-card" style="margin-top: -323px;">
</div>

方法二：采用相对定位-relative：

<main class="position">
</main>

main.position {
    position: relative;
    top: -300px;
}

采用相对定位-relative之后发现问题：main元素按要求向上移动了300px，然而，main原先的文档流空间并没有释放出来，导致后面的文档流没有适时的跟进填充main遗留的空白空间。怎么解决？？？

box-shadow快速生成阴影方法：
google---css shadow generate，
语法：box-shadow: h-shadow y-shadow blur spread color inset;
//blur-模糊半径；spread-阴影尺寸；
box-shadow可以写多个阴影，中间用“,”隔开；
download按钮：
采用以下写法：

<a href="./README.md" class="button" target="_blank" download>下载简历</a>

文本的居中：
text-align: center;

    <section class="skill">
        <h2>技能</h2>
        <ol class="clearfix">
            <li>HTML 5 &amp; CSS 3<div class="progress-bar"><div class="progress"></div></div></li>
.......
    </section>

section.skill{
    max-width: 940px;    
    margin-left: auto;
    margin-right: auto;  
    /* text-align: center;   */
}
section.skill h2{
    text-align: center;  
}

block元素内的文本居中：在block元素加上text-align: center; 样式即可；比如上面代码中的h2；如果在section上加text-align: center; 则会导致器内部所有文本居中；

transition：
transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果(比如过渡时长)。比如在不同的伪元素之间切换，像是 :hover，:active或者通过JavaScript实现的状态变化。
如：

main .download-wrapper .download{
    transition: box-shadow 0.3s;
}
main .download-wrapper .download:hover{
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}

这样，box-shadow的过渡时间就是0.3s了。

伪类选择器
CSS伪类是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
本节中用到了伪类选择器:nth-child();
需达成一下效果：

js-12-101.png

方法1：

section.skill ol li{
    /* border: 1px solid red; */
    float: left;
    width: 50%;;
    box-sizing: border-box;
    padding-right: 16px;
}
section.skill ol li:nth-child(even){
    padding-left:16px;
    padding-right: 0;
}

方法2：

section.skill ol li{
    /* border: 1px solid red; */
    float: left;
    width: 47%;;
    box-sizing: border-box;
    /* padding-right: 16px; */
}
section.skill ol li:nth-child(even){
    float: right;
}

此处是为了对左右两边（奇偶序列）的li元素设置不同的css；因此采用此伪类刚好符合。

class与id的区别：

设置了float:left/right;后的元素怎么居中？？
答案是：不能居中。
替代思路：

只能让其父元素采用居中样式；
怎么让父元素的width自适应子元素？？？
让父元素成为display:inline-block;
将block元素变更为inline-block元素后出现了一点小bug，如下：

section.portfolio nav ol{
    border: 1px solid green;
    list-style: none;
    display: inline-block;
    /* vertical-align: top; */
}

js-12-102.png

js-12-103.png

为了消去变更为inline-block后引发的变化，需要加一句：vertical-align: top;

绝对定位absolute：

absolute通常与relative配合使用，在使用absolute后通常会在其父元素上设置relative，这样absolute的定位就会以父元素作为参照对象；
设置absolute后的元素会脱离文档流；

其他一些新接触的样式：

12-入门：CSS 布局与定位（续）

本节需要注意的知识点

猜你喜欢

热点阅读