美文网首页
12-入门：CSS 布局与定位（续）

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

作者: 格林姆大师 | 来源:发表于2018-04-22 00:50 被阅读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;
}

    效果图：

    知识点：

    1. 元素位移设置---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遗留的空白空间。怎么解决？？？

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

    2. download按钮：
      采用以下写法：

    <a href="./README.md" class="button" target="_blank" download>下载简历</a>
    1. 文本的居中：
      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; 则会导致器内部所有文本居中；

    1. 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了。

    1. 伪类选择器
      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；因此采用此伪类刚好符合。

    1. class与id的区别：
    1. 设置了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;

    1. 绝对定位absolute：
    • absolute通常与relative配合使用，在使用absolute后通常会在其父元素上设置relative，这样absolute的定位就会以父元素作为参照对象；
    • 设置absolute后的元素会脱离文档流；
    1. 其他一些新接触的样式：

    相关文章

      网友评论

          本文标题：12-入门：CSS 布局与定位（续）

          本文链接：https://www.haomeiwen.com/subject/ppnxlftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|12-入门：CSS 布局与定位（续）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！