发表于： 2019-03-28 21:00:22
1 989
今天完成的事情：
今天在任务12中把之前做的任务代码优化了一遍，根据Class命名规范把命名都该了，有用了sass嵌套和继承器和混合器。
明天计划的事情：明天打算把sass深入了解，掌握变量，混合器，预选择器
遇到的问题：sass混合器，虽然初步了解了。但是还是不太懂
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>sass的使用（混合和继承）</title>
<link rel="stylesheet" href="css/03style.css">
</head>
<body>
<!--sass继承@extend的使用-->
<div></div>
<div></div>
<!--sass混合@mixin的使用-->
<div></div>
</body>
</html>
scss:
@charset "utf-8";
//继承
.box{
width:100px;
height:100px;
border:3px solid #000000;
}
.bg{
@extend .box;//继承使用
background:yellow;
}
//混合声明
@mixin one($bordercolor:black,$w:100px,$h:100px){
width:$w;
height:$h;
border:3px solid $bordercolor;
}
//混合调用
.border-color{
@include one(red,200px,200px);
}
收获：了解了混合器和继承器
任务八总结
任务耗时7天
任务总结：任务八九主要让我们运用bottstrap框架写，任务八九要注意，3个页面左右一定要对其。还要理解container和container-fluid的区别，不要乱用fluid。还有就是网格布局，这个布局其实很简单，你只要提前布好局，然后按照你想的把分好就行了。轮播图和动画事件，这两个需要在网上查找。这个就要考验自己的动手查找能力了，查找能力强的可能半个小时左右就能找到并且运用出来，查找能力不行的人可能一个轮播图或者一个动画事件都要找一天。最后就是网格布局，这个布局方法，你只要了解网格布局的columns（列）和rows（行）并在网上找一些代码参考一下，基本上都能做出来。最后就是要注意超链接要放对地方
深度思考
1.如何实现轮播图？
使用CSS实现轮播图操作主要使用了伪类:checked,并将lable指向对应的input的id，来实现这个轮播的功能。
首先我们要有一个容器用来防止轮播图，这里使用的li来代替，HTML页面的代码如下：
轮播图CSS样式，这里用的ul-li，需要的话可以再写代码时用图片表示，这里仅仅是简要的表示一下：
label标签用来放置按钮，通过label来控制轮播图的切换，关于其具体的样式在实际开发中进行调整即可。
最后就是实现css轮播图的核心，主要通过使用控制控制margin值来实现轮播的而效果。
2.如何用css写一个简单的幻灯片效果页面？
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果（详情请看 http://www.w3school.com.cn/cssref/pr_transform.asp）
Animation字面的意思就是“动画” 属性：animation: name（绑定到选择器的 keyframe 名称） duration（延长的时间） timing-function（动画的速度曲线：linear（速度相同） ease（先低速后加速） ease-in （低速开始） ease-out （低速结束） ease-in-out （低速开始和结束） cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟） iteration-count （播放的次数（n（播放次数）|infinite（无限循环）））direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;
例子：animation:marginLeft 10s linear 2s infinite 100 reverse paused
keyframes（关键帧）
书写格式为：@keyframes "动画名字"｛｝
内根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！
可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束（from"就相当于"0%"而"to"相当于"100%",）
为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”）
3.主流浏览器内核有哪几种？
(1)Trident内核
(2)Gecko内核
(3)WebKit内核
(4)Blink内核
4.什么是外边距重叠？重叠的结果是什么？
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二元素的顶边界发生重叠现象
重叠的结果
5.div+css的布局较table布局有什么优点？
1，其实也是div+css布局的第一个特点，table标签被严格地定义为存放数据的一个区域，而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。
2，table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。
3，table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。
4，table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。
5、易于维护和改版。
6.bootstrap有哪些常用组件？
轮播图
下拉菜单
响应式导航栏
7.css有哪些方式可以实现垂直居中？
1.display: table-cell;
vertical-align:middle;
text-align: center; 2.display: flex;
justify-content:conter
align-items:Center;
3.浮动
4.绝对定位
8.margin负值在页面布局中有哪些应用？
二、margin为负值的常见布局应用
左右固定，中间自适应（双飞翼）
双飞翼的好处：
1.可以让主要内容出现在dom结构的前面，现将主要内容渲染
2.中间只适应，两边固定宽度的效果
<div class="main">
<div class="main-content">main content</div></div><div class="left">left</div><div class="right">right</div> *{ margin:0; padding: 0
} .main{ float: left; width: 100%;
} .main .main-content{ margin: 0 210px; background-color: rgba(33, 114, 214, 0.8); height: 500px
} .left{ width: 200px; float: left; background-color: rgba(255, 82, 0, 0.8); margin-left: -100%; height: 200px
} .right{ width: 200px; height: 200px; margin-left: -200px; float: left; background-color: rgba(90, 243, 151, 0.8);
}去除列表右边框
利用负margin增加宽度的特点，举个在实际中应用例子🌰
对于图片列表，我会常常设计成两边对齐，中间元素平均分布，类似下面的布局
想让每一排最后一个对齐父元素的右边框，一般都两种处理，第一种会在给个循环体内的最后一个添加一个float:right属性或者做特殊处理，但这样还需要后端配合，我们自己能解决的就尽量自己解决。还有就是用css3的flexbox布局能解决这个两边对齐，但是这种布局兼容性不好，你的用户用IE的话，不推荐！
so，负margin就能发挥其增加元素宽度的特点，完美的解决这个问题！
<div class="container">
<ul class="list">
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
<li>我是一个列表</li>
</ul></div>.container{ margin:0 auto; width: 500px; border: 1px #ccc solid; margin-bottom: 20px;
}.list{ overflow: hidden; margin-right: -10px;
}.list li{ width:92px; height: 92px; background-color: #ccc; margin-bottom: 20px; float: left; margin-right: 10px;
}
计算公式：
假设一横列展示的数量为x，元素见的间距为y，父距宽度z
则元素的宽度＝（z－y（x－1））/x
本例中li的宽度为（500－10（5-1））/5=92
负边距+定位：水平垂直居中
上面已经举例，用了负margin会向对应方向偏移的特点！
去除列表最后一个li元素的border-bottom
很多情况下，我们会用li标签来模拟表格，再给li标签添加下边距的时候，最后一个li标签表格会和父元素的边框靠在一起，会显得整个“table”的底部边框会比其他的边粗一些！
<style>
ul.table{ border:1px #ccc solid; margin-top:100px;
} ul.table li{ border-bottom: 1px #ccc solid; list-style: none;
} </style>
<ul class="table">
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
</ul>
没有设置margin-bottom:-1px
下面添加一个margin-bottom:-1px;的属性,就可以使其看起来更完美
<style>
ul.table{ border:1px #ccc solid; margin-top:100px;
} ul.table li{ border-bottom: 1px #ccc solid; list-style: none; margin-bottom: -1px;
} </style>
<ul class="table">
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
<li>I am li</li>
</ul>
多列等高
利用margin-bottom为负值会减少css读取元素高度的特性，加上padding-bottom和overflow:hidden,就能做一个未知高度的多列等高布局（当然也可以用table）
<style>
.container{ margin:0 auto; width: 100%; overflow: hidden;
} .left{ height: 50px; width: 33.33%; margin-bottom: -5000px; padding-bottom: 5000px; float: left; background-color: rgba(33, 114, 214, 0.8);
} .main{ height:100px; margin-bottom: -5000px; width: 33.33%; float: left; padding-bottom: 5000px; background-color: rgba(255, 82, 0, 0.8);
} .right{ width: 33.33%; float: left; margin-bottom: -5000px; padding-bottom: 5000px; background-color: rgba(90, 243, 151, 0.8)
}</style><div class="container">
<div class="left"> height:50px</div>
<div class="main">height:100px</div>
<div class="right">height:30px</div></div>
多列等高
虽然设置了5000的内边距，但是我用－5000的外边距去抵消掉，所以对于父元素来说（上文所说的css能读取的高度），他还是原来的高度（但其自身实际高度为5000p x+本来高度），然后父元素在加上overflow:hidden;以最高的高度进行裁切，所以就有了看起来“等高”的3个div。
返回列表
评论