美文网首页
part3:HTML/CSS综合

part3:HTML/CSS综合

作者: klmhly | 来源:发表于2018-05-16 16:28 被阅读0次

    title: part3：HTML/CSS综合
    date: 2018-03-14 16:12:48
    categories: 前端笔记
    tags: [前端基础,CSS布局]

    资源

    书籍

    《CSS揭秘》
    《响应式Web设计：HTML5和CSS3实战（第2版）》
    《SVG 精髓》

    一、position定位

    1. 属性值

    • static：静态
    • relative：相对
    • absolute：绝对
    • fixed： 固定

    2. 参考点
    relative 相对自己的初始位置偏移
    absolute 相对非static最近的已定位祖先元素
    fixed 一般来说相对于视窗位置

    二、图片在父容器水平垂直居中

    首先设置relative相对或者absabsolute绝对定位，设置left，right各50%，方向参考自身位置，这个50%取的是父级大小的一半，图片会从当前位置移到父容器的中点作为起始位置。
    然后通过translate设置负值50%，这个50%取的是图片自己大小的50%。x轴正向是右，y轴正向是下。所以负值是向左边和上边移动自己图像的一半。可达到整体居中效果。

    position: relative;
left: 50%;
top:50%
transform: translate(-50%,-50%);

    三、清除float浮动影响

    1. 清除前面兄弟元素浮动，只需要在不想受到浮动元素影响的元素上使用 clear:both
    代码如下：

    <div class="fl">我是左浮动元素</div>
<div class="fr">我是右浮动元素</div>
<div class="cb">我不受浮动元素的影响</div>

    .fl {
    float: left;
}
.fr {
    float: right;
}
.cb {
    clear: both;
}

    2. 闭合子元素浮动通过给父元素加overflow: hidden解决
    在计算页面排版的时候，如果没有设置父元素的高度，那么该父元素的高度是由他的子元素高度撑开的。但是如果子元素是设置了浮动，脱离了文档流，那么父元素计算高度的时候就会忽略该子元素，甚至当所有子元素都是浮动的时候，就会出现父元素高度为 0 的情况，这就是所谓的父元素高度坍塌问题。为了能让父元素正确包裹子元素的高度，不发生坍塌，我们需要闭合子元素的浮动。

    代码如下：

    <div class="container">
    <div class="box"></div>
</div

    .container {
    overflow: hidden;
}
.box {
    float: left;
}

    四、雪碧图

    1. 雪碧图在线制作网址雪碧图
    2. 一般用伪元素before容器来放置小图标
    3. 需要设置width，height，background-size，background-image，background-position
    4. width,height[取值为自己想让小图标显示的大小，比如28px]；
      background-size[取值为width的n倍，看一行放了几个小图标]
      background-image[雪碧图的url位置]
      background-position[生成雪碧图的同时有代码，实际就是相对位移，也是width的n倍，一般为负值]
      例如：
    width: 25px;
height: 25px;
background: url("../img/css_sprites.png") -25px 0 ;
background-size: 50px;

    注意：background-size要放在 background后面，否则会被覆盖

    五、响应式布局

    1. 响应式布局不能指定最外层包裹容器的 width 和 height。
    2. 若需要留空白，可设置内容div的margin来撑开容器
    3. 适应手机：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    六、动画效果

    1. 光晕效果
    • 使用box-shadow
    @-webkit-keyframes myimg {
    from{
        box-shadow: 0 0 0 7px rgba(0,0,0,0);
    }
    to{
        box-shadow: 0 0 15px 10px #58aef5;
    }
}
    1. 进度条效果
      使用两层容器，底层为固定色条，通过控制覆盖层的宽度变化产生进度条。

    七、inline-block水平间隙问题

    将display设置为inline-block时，元素会同时具备行内（几个块会排在一行）和块级（可以设置宽高等快属性）的特点。
    但是几个块排在一行，每个块之间会产生一个小空隙。

    原因：这是因为我们编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，且对于多个连续的空白符浏览器会自动将其合并成一个，故产生了所谓的间隙。

    解决方法：设置 font-size
    1.将父级的 font-size设置为0
    2.将自己的 font-size设置为正常大小

    1假设这是HTML结构

    <div class="nav">
  <div class="nav-item">导航</div>
  <div class="nav-item">导航</div>
  <div class="nav-item">导航</div>
</div>

    2这是css

    .nav {
  background: #999;
  font-size: 0; /* 空白字符大小为0 */
}
.nav-item{
  display:inline-block;
  width: 100px;
  font-size: 16px; /* 重置 font-size 为16px*/
  background: #ddd;
}

    项目：个人简历

    1. 效果图


      QQ截图20180318222601.png

    2. 源代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>个人简历</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <aside class="left">
            <div class="user-info">
                <img class="img-touch" src="http://coding.imweb.io/img/project/resume/avatar.png" alt="">
                <span>Murphy</span>
                <span>念经(coding)、参禅(thinking)、化缘(searching)</span>
            </div>
            <div class="user-contact">
                <ul>
                    <li class="email"><a href="matio:2743163143@qq.com">2743163143@qq.com</a></li>
                    <li class="phone"><a href="tel:17688853404">17688853404</a></li>
                    <li class="blog"><a href="https://klmhly.github.com" target="_blank">https://klmhly.github.com</a></li>
                </ul>
            </div>
            <div class="user-edu">
                <ul>
                    <li class="edu">学历：硕士</li>
                    <li class="edu">专业：软件工程</li>
                    <li class="edu">学校：中山大学</li>
                    <li class="edu">出生年月：1994年8月</li>
                </ul>
            </div>
        </aside>
        <aside class="right">
            <div class="worker-wrap">
                <h2>工作经历</h2>
                <ul class="worker-ul">
                    <li class="worker">
                        <h3>2014.08 - 至今</h3>
                        <h3>腾讯科技深圳有限公司 / 产品策划</h3>
                        <p>负责腾讯课堂教研功能的策划；能熟练对接用户及运营侧，规划版本，推进需求落地，并根据数据及用户反馈优化功能；所负责功能涵盖PC客户端、PCWeb、APP、H5。</p>
                    </li>
                    <li class="worker">
                        <h3>2013.07 - 2013.10</h3>
                        <h3>腾讯科技深圳有限公司 / 产品实习生</h3>
                        <p>QQ群商业化探索（在线教育方向）负责QQ群商业化探索，调研用户使用QQ群进行在线教育的情况，由于实习期间表现良好得以留言。调研结果帮助项目组决策，加大投入在线教育的资源，并在之后成立了腾讯课堂项目。</p>
                    </li>
                </ul>
            </div>
            <div class="skill-wrap">
                <h2>技能特长</h2>
                <ul class="skill-ul">
                    <li class="w1">
                        <h3>PS<span class="degree">了解</span></h3>
                        <p class="p2 change1">基本切图</p>
                        <div class="bar1"></div>
                    </li>
                    <li class="w2">
                        <h3>HTML & CSS<span class="degree">精通</span></h3>
                        <p class="p2 change2">语义化、CSS3、动画、响应式、移动端、预处理器...</p>
                        <div class="bar2"></div>
                    </li>
                    <li class="w3">
                        <h3>Javascript<span class="degree">熟悉</span></h3>
                        <p class="p2 change3">jquery、node、react、vue、webpack...</p>
                        <div class="bar3"></div>
                    </li>
                </ul>
            </div>
        </aside>
    </div>
</body>
</html>

    *{
    padding: 0;
    margin: 0;
}



body{
    font-family: 微软雅黑;
    /*width:90%;*/
    /*padding-top: 50px;*/
    /*margin: 0 auto;*/
}

ul,li{ padding:0;margin:0;list-style:none}
a{
    text-decoration: none;
    color: white;
}

@-webkit-keyframes image {
    from {border: 5px solid rgba(89, 174, 245, 0.5);}
    to {border: 5px solid #59AEF5;}
}



.container{
    display: flex;
    justify-content: center;
    /*height:950px;*/
    /*margin: 0 auto;*/
}
.left{
    display: flex;
    flex-grow: 1;
    justify-content: center;
    /*在交叉轴的对齐方式*/
    align-items: center;
    background-color: #018bf0;
    background-image: url("http://coding.imweb.io/img/project/resume/bg.png");
    flex-direction: column;
    /*width: 50%;*/
    /*height: 900px;*/
    /*min-width: 400px;*/
}
.right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    /*width: 50%;*/
    /*height: 900px;*/
    /*min-width: 400px;*/
}

.left .user-info{
    margin: 50px 0;
    margin-top: 60px;
    height: 250px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
}


img{
    /*让图片居中的一种方式*/
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #58aef5;
}

@-webkit-keyframes myimg {
    from{
        box-shadow: 0 0 0 7px rgba(0,0,0,0);
    }
    to{
        box-shadow: 0 0 15px 10px #58aef5;
    }
}

img:hover{
    cursor: pointer;
    animation-name: myimg;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: linear;
}


span{
    text-align: center;
    color: white;
    font-size: 18px;
}

.left .user-contact{
    margin: 0 auto;
    margin-bottom: 40px;
}

.email::before,.phone::before,.blog::before{
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    border: 2px solid white;
    border-radius: 50%;
    margin-bottom: -10px;
}
.user-contact ul{
    width: 250px;
    display: inline-block;
}
.user-contact li{
    display: inline-block;
    width: 290px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: white;
}
.email::before{
    background: url("../img/css_sprites.png") 0 0 ;
    background-size: 50px;
}
.phone::before{
    background: url("../img/css_sprites.png") 0 -25px  ;
    background-size: 50px;
}
.blog::before{
    background: url("../img/css_sprites.png") -25px 0 ;
    background-size: 50px;
}

.left .user-edu{
    /*display: flex;*/
    /*justify-content: flex-start;*/
    border:1px solid #999999;
    border-radius: 2px;
    width: 330px;
    margin-bottom: 60px;
}

.user-edu ul li{
    padding-top: 0;
    display: inline-block;
    float: left;
    width: 150px;
    margin-left: 10px;
    height:40px;
    line-height: 40px;
    color: white;
    font-size: 15px;
}

.worker-wrap{
    margin-bottom: 70px;
}
.worker-wrap,.skill-wrap{
    margin: 20px;
}

.worker-ul{
    padding-left: 20px;
    margin-left: 20px;
    border-left: 1px solid #999999;
}
.skill-ul{
    padding-left: 20px;
    margin-bottom: 50px;
}

h2{
    text-align: center;
    position: relative;
    color:#188eee;
    margin-top: 50px;
    margin-bottom: 30px;
    margin-left: 20px;
}

h2::before,h2::after{
    content:"";
    display: inline-block;
    position: absolute;
    top: 50%;
    background-color: #999999;
    height: 1px;
    width: calc(45% - 30px)
}
h2::before{
    left: 0;
}
h2::after{
    right: 0;
}
.worker-wrap .worker-ul .worker {
    display: inline-block;
    width: 100%;
    margin-top: -30px;
}
.worker:not(:last-child){
    margin-bottom: 40px;
}

.worker::before{
    content: "";
    display:inline-block;
    width: 15px;
    height: 15px;
    /*border: 2px solid #cccccc;*/
    border-radius: 50%;
    /*border: 3px solid rgba(234,254,234,0.8);*/
    background-color: #188eee;
    box-shadow: 0 0 0 3px #dbdbdb;
    margin-left: -30px;
    margin-bottom: -26px;
}
@keyframes mycircle {
    from{
        box-shadow: 0 0 0 4px rgba(0,0,0,0);
    }
    to{
        box-shadow: 0 0 15px 4px #9c9a99;
    }
}
.worker:hover .worker::before{
    cursor: pointer;
    animation-name: mycircle ;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

h3{
    font-size: 18px;
}
p{
    margin-top: 20px;
    color: #9c9a99;
    font-size: 16px;
}

.degree{
    display: inline-block;
    float: right;
    border-radius: 20px;
    border: 1px solid #999999;
    width: 40px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    color: #999999;
}
.p2{
    margin-top: 10px;
}

.skill-ul li{
    margin-bottom: 20px;
}

.bar1{
    width: 100%;
    height: 7px;
    margin-top: 10px;
    background: linear-gradient(to right, #117AD0, #13ABF1 25%, #13ABF1 25%) no-repeat;
    background-size: 25% 7px;
    background-color: #999999;
    border-radius: 2px;
}

.bar2{
    width: 100%;
    height: 7px;
    margin-top: 10px;
    background: linear-gradient(to right, #117AD0, #13ABF1 90%, #13ABF1 90%) no-repeat;
    background-size: 90% 7px;
    background-color: #999999;
    border-radius: 2px;
}
.bar3{
    width: 100%;
    height: 7px;
    margin-top: 10px;
    background: linear-gradient(to right, #117AD0, #13ABF1 50%, #13ABF1 50%) no-repeat;
    background-size: 50% 7px;
    background-color: #999999;
    border-radius: 2px;
}

/**/
@-webkit-keyframes myps {
    0%{background-size: 25% 7px;}
    50%{background-size: 0 7px;}
    100%{background-size: 25% 7px;}
}

@-webkit-keyframes myhtml {
    0%{background-size: 90% 7px;}
    50%{background-size: 0 7px;}
    100%{background-size: 90% 7px;}
}

@-webkit-keyframes myjs {
    0%{background-size: 50% 7px;}
    50%{background-size: 0 7px;}
    100%{background-size: 50% 7px;}
}
.w1:hover .bar1{
    animation-name: myps;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.w2:hover .bar2{
    animation-name: myhtml;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.w3:hover .bar3{
    animation-name: myjs;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@media only screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .left, .right{
        width: 100%;
        /*height:900px;*/
        flex-grow: 1;
    }
}


@media only screen and (min-width: 769px) {
    .container {
        flex-direction: row;
    }
    .left, .right {
        width: 50%;
        flex-grow: 1;
    }
}
    1. 项目考察
    • 这个项目考察了html结构设计
    • css动画
    • 雪碧图
    • box-shadow阴影效果
    • a标签邮件电话的用法
    • 伪元素before，after
    • 弹性盒布局flex的用法
    • 响应式布局
    1. 自己存在的问题
    • css类的命名不够贴合语义
    • 动画效果有待加强
    • 复用结构还是有点混乱

    相关文章

      网友评论

          本文标题：part3:HTML/CSS综合

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

          延伸阅读

          深度阅读

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

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|part3:HTML/CSS综合|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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