part3:HTML/CSS综合

2018-05-16 本文已影响0人 klmhly

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;
}

四、雪碧图

雪碧图在线制作网址雪碧图
一般用伪元素before容器来放置小图标
需要设置width，height，background-size，background-image，background-position
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后面，否则会被覆盖

五、响应式布局

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

六、动画效果

光晕效果

使用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;
    }
}

进度条效果
使用两层容器，底层为固定色条，通过控制覆盖层的宽度变化产生进度条。

七、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;
}

项目：个人简历

效果图

QQ截图20180318222601.png
源代码

<!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;
    }
}

项目考察

这个项目考察了html结构设计
css动画
雪碧图
box-shadow阴影效果
a标签邮件电话的用法
伪元素before，after
弹性盒布局flex的用法
响应式布局

自己存在的问题

css类的命名不够贴合语义
动画效果有待加强
复用结构还是有点混乱