发表于： 2018-04-23 23:46:53
1 280
- 今天完成的事情：完成了任务7的页面1；初步学习了bootstrap的使用，包含container、列表、button。
- 今天的收获和问题：拿到任务七后瞅了一眼后英文单词bootstrap就被吸引到了，说项目需要使用css框架bootstrap，前几天就听说过这玩意了，然后就开始了查资料~~ 首先配置问题，有个问题是引入bootstrap之前需要引入jQuery，bootstrap的文件我是找到了网址:https://code.z01.com/v4/ ，但是jQuery的文件点击官网https://jquery.com/ 后，点击下载按钮，选择版本点击下载，尼玛转到了另一个页面，密密麻麻的代码，还以为是网络的问题没有下载文件，然后就开始各种搜索，点开中文官网的下载也是密密麻麻的下载· · 卧槽不是说工欲善必先利其器嘛，可是在第一步配置文件上就挂了，着实有点痛苦~~ 暂时没有找到解决的办法，就去看了下bootstrap和jQuery的入门视频，http://biaoyansu.com/ 无意间找到这个博主的视屏，显示加速1.5倍看完了bootstrap的视屏，后面看了下jQuery，看他讲解安装的步骤，原来是要把这些密密麻麻的代码复制到IDE中保存文件为.JS ，和下载下来的bootstrap文件一起放在放置HTML的文件夹里，就可以使用了~~搞这个就花了1上午的时间。
- 下午做的事情就是用bootstrap的框架套用在任务7的第一个界面上，首先在bootstrap的中文网上https://code.z01.com/v4/docs/把整个官网介绍浏览了一遍，脑子里对内容、布局、组件这些有了个大概的概念，但也就仅限于看的时候有点印象· 看完就又忘了~~# 。本来打算套用class写个页面1，所以在浏览官网的时候也在看哪些东西能够套用，比如说导航栏可以用组件中的导航栏样式之类的， 可是实际做的时候，咦，怎么套下来和想象的差别这么多，颜色不对，重新写个类覆盖了。点击按钮时出现蓝色线框却怎么覆盖都改不了~~#，然后查了一下资料· 发现css有个优先机制：
- 选择器的优先权
-
- 解释：
- 1. 内联样式表的权值最高 1000；
- 2. ID 选择器的权值为 100
- 3. Class 类选择器的权值为 10
- 4. HTML 标签选择器的权值为 1
- 5 继承样式的权值为0.1(某些论文提出，但毫无疑问它的权值是最低的)
- 要覆盖bootstrap的原有样式有两种方法：
- （1）利用css优先级机制进行样式覆盖：
- 重点是你写的css样式权值一定要比Booststrap定义的样式权值高，否则就无效果。
- 方法：
- 先可以自己定义一个css文件
- 1、加载顺序后面覆盖前面，引用样式文件的时候先bootstrap后加载自己定义的css文件
- 2、有上级类名的覆盖没有上级类名的，如可以.btn-group .btn-primary
- 3、!important（但是一般不推荐使用这个，虽然简单粗暴。而且也一般不会影响性能，但滥用important会引起一系列的权重问题，使CSS代码变得很难维护。
- （2）利用bootstrap自定义样式，可以自己生成css文件。（这个方法的意思应该是直接修改bootstrap的类名，但还是我试了一下没有效果· ）
- 折腾了大半天后师兄说任务七可以暂时不用套bootstrap，然后再仔细看看任务详情· 发现也并没有说哪里需要使用bootstrap~~# 果断弃坑自己用css写，然后晚上把页面一完成了。 虽然说今天用bootstrap没有实现想要的效果，但是对如何使用已经有了一个初步的概念，这玩意还是要多练才行。然后发现今天写css代码的时候也没有停顿，基本上手就来~~ 可能页面1太简单了！
- 明天的计划：尽量完成任务七剩下的两个页面，抽空把深度思考的问题看一看。
- 遇到的问题：已经在上面说过了~
返回列表
评论