title: part3：HTML/CSS综合
date: 2018-03-14 16:12:48
categories: 前端笔记
tags: [前端基础,CSS布局]
资源
- HTML5中最看重的理念“语义化”相比HTML有什么区别
- HTML 语义
- CSS之BFC详解
- 行内级元素垂直对齐方式
- 深入理解CSS中的层叠上下文和层叠顺序
- flex计算规则在线demo
- Flex 布局教程：语法篇
- grid网格布局
- 网页性能管理详解
- 无线性能优化：Composite
- CSS3 Transform
- 深入浅出CSS Transform
- 线性代数拾遗（三）：线性变换以及矩阵的意义
- 理解CSS3 transform中的Matrix(矩阵)
- Retina
- Sass 指导
- Sass中文文档
- Sass相关教程
书籍
《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
代码如下：
我是左浮动元素
我是右浮动元素
我不受浮动元素的影响
.fl {
float: left;
}
.fr {
float: right;
}
.cb {
clear: both;
}
2. 闭合子元素浮动通过给父元素加overflow: hidden解决
在计算页面排版的时候，如果没有设置父元素的高度，那么该父元素的高度是由他的子元素高度撑开的。但是如果子元素是设置了浮动，脱离了文档流，那么父元素计算高度的时候就会忽略该子元素，甚至当所有子元素都是浮动的时候，就会出现父元素高度为 0 的情况，这就是所谓的父元素高度坍塌问题。为了能让父元素正确包裹子元素的高度，不发生坍塌，我们需要闭合子元素的浮动。
代码如下：
.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来撑开容器
- 适应手机：
六、动画效果
- 光晕效果
- 使用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结构
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 源代码
个人简历
*{
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类的命名不够贴合语义
- 动画效果有待加强
- 复用结构还是有点混乱