发表于： 2018-05-16 23:21:00
1 670
今天完成的事情
- # 领取任务6，思考任务思路，完成header、nav、footer部分的页面制作；
- # 认识sprite图，学习制作和使用sprite图；
- # 初识Bootstrap框架，学会使用Bootstrap添加css样式及组件；
明天计划的事情
- # 继续完成任务6
遇到的问题
已解决
# 问题一：- 在引入Bootstrap样式表后，和原有的我们自己写的css样式表的关系是什么？如何引入Bootstrap样式表？会不会有冲突？
# 解决思路：
关系：Bootstrap样式表和我们自己的样式表两者的关系应该是相辅相成，互为补充的，两者密 不可分
引入：使用Bootstrap中文网维护的BootCDN免费加速服务，将引入 Bootstrap 样式的标签 <link>复制并粘贴到 <head> 中，并放在所有其他样式表之前。
初学者模板：务必用最新的设计和开发标准武装你的页面。这意味着使用 HTML5 doctype 声 明、添加一个 viewport 标签让页面正确支持响应式布局。将这些整合在一起后，你的页面应当 像下面这样：
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body>未解决
# Bootstrap组件的源码尚未理解，修改起来存在困难
收获
- about：CSS sprite
- # CSS sprite是什么?
- 也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
- CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
- # CSS sprite带来的优势?
- 1、减少加载网页图片时对服务器的请求次数；
- 2、提高页面的加载速度；
- 3、减少一些bug；
- # CSS sprite定位方法：background-position
- 定义：background-position 属性设置背景图像的起始位置。
- 方法：ackground-position有两个属性值， background-position：x | y，用法上可以对其一个属性单独使用 background-position-x 和 background-position-y。
- about：Bootstrap
- # Bootstrap是什么?
- Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。用于构建响应式、移动设备优先的网站。
- # CDN是什么?
- CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
- # Bootstrap有哪些功能?
- 1、设置CSS全局样式：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
- 2、丰富的组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
- 3、JavaSript插件：JQuery插件为Bootstrap的组件赋予了“生命”。可以简单地一次性引入所以的插件，或者逐个引入到你的页面中
返回列表
评论