发表于： 2018-11-05 20:01:28
1 692
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
1.）去除inline-block间距有哪几种方法？
inline-block的间隙是因为换行或者回车导致的。只要把标签写成一行或者标签直接没有空格，就不会出现间隙。但是这种方式是不太可靠，存在太多不可控的因素导致失效，
方法一：移除标签间的空格
<span>我是一个span
</span><span>我是一个span
</span><span>我是一个span
</span><span>我是一个span</span>
方法二：使用font-size=0
在父容器上使用font-size:0;可以消除间隙，
2.）CSS中有哪些可以被继承的属性
1、字体系列属性
2、文本系列属性
3、元素可见性：visibility
4、表格布局属性
5、列表布局属性
6、生成内容属性
这是常用的几个属性，都是会继承的，继承属性有好处也有坏处。
好处是可以不用重复写属性值。
坏处是不清楚哪些会被继承导致内容格式错乱。
之前完成任务六的时候使用到了Bootstrap，这里简单的介绍一下其使用方法
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap：
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
BootStrap使用方法
1.<!DOCTYPE html>
因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上
2.导入js 导入css
接着导入js和css
Bootstrap需要JQuery才能正常工作，所以需要导入jquery.min.js
接着是 Bootstrap的css，里面定义了各种样式
最后是 Bootstrap的js，用于产生交互效果，比如关闭警告框
注：顺序不要搞错了，否则有一些效果会出不来。
Bootstrap 插件全部依赖 jQuery
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。
首先是JQuery
然后是Bootstrap css
最后是Bootstrap js。
可以下载好Bootstrap也可以在本地使用，下载Bootstrap文本，不过一般来说网上的使用CDN就足够了，对于下载到本地也行。
完成任务六时出现一个问题就是如何在屏幕过小时，表格内容大小能根据屏幕做出改变。
空间不足导致文字隐藏时会出现小点
重点就是这段代码
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;要达到的效果是：
文字超出容器宽度时，文字被隐藏的文字用省略号代替。所以该属性只能用于块状元素或行内块元素中，对行内元素是不起作用的。行内元素要显示省略号，需要先转化成块状元素或行内块元素。
一般和white-space:noworp;(强制文字不换行)，overflow:hidden;(文字溢出隐藏)，一起使用。
完成任务六的时候查看了一下如何使用伪类来实现鼠标悬停出现二级菜单栏。
用到的知识点如下：
伪类（伪类选择器）
伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。
静态伪类和动态伪类
伪类选择器分为两种。
（1）静态伪类：只能用于超链接的样式。如下：
:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。
（2）动态伪类：针对所有标签都适用的样式。如下：
:hover “悬停”：鼠标放到标签上的时候
:active“激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
PS：以上三种样式，只能用于超链接。
明天计划的事情：（一定要写非常细致的内容）
完成任务七的页面
遇到的问题：（遇到什么困难，怎么解决的）
暂无
收获：（通过今天的学习，学到了什么知识）
了解了伪类，了解了inline-blcok如何去除空隙等
返回列表
评论