发表于: 2018-12-29 00:10:38
1 776
今天完成的事情,修改成果bug。 果冻小课堂发布youtube,看任务8框架css bootstrap。
单独的盒子,用文本居中设置,师兄说用flax很蠢。
.agree {
width: 40vw;
height: 65%;
background: #fbb435;
text-align: center;
line-height: 48px;
color: #fff;
margin-left: 29vw;
font-size: 1.5rem;
margin-top: 2%;
}
首页页面是用padding做的,我的电脑屏幕小,放大到一定宽度之后,有明显的左右间距。在body设置全局背景颜色解决问题。
body {
margin: 0;
background: #f0f0f0;
}
.large {
width: 80%;
height: 70px;
background: #fff;
margin-left: 10%;
margin-top: 20px;
text-align: center;
line-height: 70px;
color: #fbb435;
border-bottom: 1.5px solid #fbb435;
}
第一次接触关于框架
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 web 项目。粗略了看了一下关于他的知识,
框架需要我们下载和配置环境,而且他的代码与在css之前写的不一样,左浮动在css就是。float—left,但是在Bootstrap框架里面,
就是pull-left。但是框架的感觉真的很方便,之前做的模拟下拉框很费时间,框架里面有现成的,照抄就行了。只需要修改一下样式。
而且按钮的样式,在框架里面也有很多中。
之前学的很慢,很大一部分原因怕基础都不知道,但是框架完全就不需要,看到了框架才知道自己蠢。
今天收获,周会上面说了挺多自己的问题,不应该去看知乎上面的各种软文浪费时间在钻牛角尖,太过于浪费时间了。确实值得我好好反思一下,
还是尽量多问一下师兄,自己搞太浪费时间,任务也没有效率。粗略了看了一下关于Bootstrap ,就感觉发现了新世界,刷新了我的认知,感觉之前很蠢很蠢,框架里面很多东西都有,引用就行了。代码量少,而且优化的比我们写的还好。
明天计划,任务8的导航栏。
什么是css csprites?
css雪碧图,是一种网页处理的方式,它允许我们把无数张小图标拼接包含在一张大图上去,这样一来得话,
打开网页的时候,网页图片就不会缓缓的加载出来了。因为我们打开一个网页,网页会请求服务器,多张图片请求服务器的话,会降低我们加载页面时候的速度。这个时候,把零星的小图片合并为一张图片的话,就会变得流畅。
什么是浮动?有哪些清除浮动的方法?
浮动最早的时候,只是让它能够围绕着字体,达到环绕效果, 在inline-block行内块级元素的出现,大行其道,知道inline-bolick出现之后,浮动也有自己独特的使用场景。 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。
为什么要清除浮的?
如果我们不给父元素设置高度,我们知道如果它里面的元素不浮动的话, 那么这个外层的高是会自动被撑开的。
若浮动元素比它的父元素还高,那么它就会溢出父元素外面,当内层元素所有浮动后,则影响更大:(背景不能显示)
(边框不能撑开)
(高度塌陷)
解决方法有,父级div里面定义height。(我们给父级div里面定义高度,就解决里父级元素无法获取高度的问题)
使用clear属性:在相同的父元素中,浮动的子元素之后添加一个空标签,设置样式为:"clear:both;"标签可以是div,也可以是p,或者br等块元素。
left在左侧不允许浮动元素; right在右侧不允许浮动元素; both在左右两侧均不允许浮动元素
方法3:对父元素设置overflow的样式,即overflow: auto/hidden;
原理:必须定义width,在IE6中还需要触发 hasLayout ,例如 zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
rgba和opacity的透明效果有什么不同?display和visiblity有什么区别?
RGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,
RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
什么是OPACITY?
是一个css3属性,该属性用于设置元素的不透明度级别取值说明: value 不透明度,从0.0(完全透明)到1.0(完全不透明)
rgba设置透明的就像滤镜一样,能看到下面的文本内容。而opacity设置透明的话,在页面上隐藏,但是却在页面上存在,能够点击。且opacity会继承父元素的opacity属性,而rgba属性则不会继承。
什么是 visibility
visibility 属性规定元素是否可见。 给visibility:hidden属性之后,隐藏的元素会占据该元素的空间,子级并不受影响。
dispaly:none 隐藏元素,但不占据元素原来的空间,父级设置none之后,父级元素与子级元素都没有了。我们给一个父元素应用visibility:hidden,则所有子元素也都会全部不可见。
如果子孙元素应用了visibility:visible,那么这个子孙元素又会显现出来。
总结,dispaly设置隐藏就真的没有了,而visibility则不会。也不会影响父级元素。
d级元素。
评论