发表于: 2018-07-16 23:39:58
2 638
前两天家里有事,今天继续打卡
7.13的补充
ID和CLASS的优先级
权重计算规则
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
JS获取的DOM与JQurey获取的有什么区别
原生js获取:
id: document.getElementById('#id')
class: document.getElementsByClassName(".class")
jQuery获取:
id: $('#id')
class: $('.class')
伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。
fixed相对于body、
https://blog.csdn.net/oulihong123/article/details/53396303 通过margin属性,fixed根据父级元素定位,实现上一页,下一页小图标的自适应屏幕
今日完成
1.试着用弹性布局完成任务一,已完成
2.试着用浮动完成任务一,和我想的效果不一样(多图预警前方高能)
(1)square有右边距,right没有,浮动后right不是应该被square撑开么,感觉他们的位置不对,square没有被right包裹住
(2)中间列浮动并没有居中
(3)不知道需不需要定位
代码如下:html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格(2)</title>
<link rel="stylesheet" href="../CSS/Task1(2).css"/>
</head>
<body>
<div class="left">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="right">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="middle">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
CSS:
.square{
width:100%;
height: 30%;
background-color: orange;
border-radius:5%;
margin:4%;
}
.left,.right,.middle{
height: 100vw;
width: 30vw;
}
.left{
float: left;
}
.right{
float: right;
}
.middle{
float: left;
}
遇到问题:如上
明日计划:
1.解决今天的问题,并将代码传到github
2.完成任务一的深度思考,以及任务一其他实现方法和整理这些方法的优缺点
3.完成后可以进行下一个任务,以及将代码优化,规整
收获:
感觉还是弹性布局简单多了
评论