[外门弟子]JS-8|2019年03月16日的日报-技能树.IT修真院

发表于： 2019-03-16 22:27:24

1 746

Day 38 task8-6

今天完成的事情

1.完成task8-2

2.完成task8-3 做完一半

遇到的问题

没有值得记录的问题

收获

1.Bootstrap中的data-target和data-toggle

BS的轮播图就用到了这个属性

data-toggle是一个很关键的属性，然后href（data-target ）来指定打开的modal的id

添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

启用标签页：

<li>

菜鸟教程

</a>

</li>

<li>

ios

</a>

</li>

<ul>

<p>菜鸟教程-content </p>

</div>

<p>菜鸟教程-content </p>

</div>

<div>

data-toggle="tab"：使a标签会失去默认行为,点击a标签的时候不会跳转

href="#home" 点击<a>跳转到id=”home”

注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性:

更改标签页样式

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{
    border: none;
    color: #ff640c;
}

2.图片大小自适应

将图片放置在自适应的div中，再将img绝对定位，top bottom left right 都设为0，即图片将随着div 自适应

3.table标签

table标签主要用来在网页上构建表格，因为它不好控制。布局多使用div

table布局有两个属性可以合并，colspan rowspan

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.

<table>标示一个表格,<tr>标示这个表格中间的一个行

<td>标示行中的一个列,需要嵌套在<tr></tr>中间

具体格式是:(两行两列)

<table>

<tr>

</tr>

<tr>

</tr>

</teble>

<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中

<table>...</table> 用于定义一个表格开始和结束

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内

4.div+css布局较table布局有什么优势？（转）

div+css布局：

优点

1、符合W3C标准的，W3C标准提出网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2、布局更加灵活多样，能够通过样式选择来实现界面设计方面的更多要求。

3、布局改版方便，不需要过多地变动页面内容，通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

4、布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取，内容更便于搜索。

5、增加网页打开速度，增强用户体验

缺点

1、开发技术高，要考虑兼容版本浏览器。目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。

2、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，

有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

table布局

优点

1、对于新手而言，容易上手，尤其对于一些布局中规中矩的网页，更让人首先想到excel，进而通过使用table去实现它。

2、表现上更加“严谨”，在不同浏览器中都能得到很好的兼容

3、通过复杂的表格套表格的形式，也可以实现比较复杂的布局需求。布置好表格，然后将内容放进去就可以了。

4、它可以不用顾及垂直居中的问题。

5、数据化的存放更合理。

缺点

1、标签结构多，复杂，在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度更高！

2、表格布局，不利于搜索引擎抓取信息，直接影响到网站的排名

两者对比

1，其实也是div+css布局的第一个特点，table标签被严格地定义为存放数据的一个区域，而不是布局工具，它的布局形式不符合W3C标准，没有实现结构和表现的分离，它既有css的表现功能，也有html的结构功能。

2，table布局加载网页时，必须整体加载完，降低了网页的呈现速度，而div+css布局是边加载边显示的。

3，table布局在网页代码编写时，有时需要嵌套多重表格才能实现，但使用div+css布局，相对而言会减少许多嵌套时的代码，更容易检查和维护。

4，table布局不方便表现的更换，使用div+css布局，大多只要更改css样式表就能变化表现形式。

5、易于维护和改版。

如何在div+css布局中依然使用table布局中的一些功能？

第一种，就是在div+css的布局中局部使用table布局（主要是纯表格数据的实现）。

第二种，是使用相关的默认样式表。如下代码对应表所示：

table { display: table }

tr { display: table-row }

thead { display: table-header-group }

tbody { display: table-row-group }

tfoot { display: table-footer-group }

col { display: table-column }

colgroup { display: table-column-group }

td, th { display: table-cell }

caption { display: table-caption }

5.样式优先级规则：

1.根据权重值排序，用权重值第一的样式

2.如果权重值相同，则应用最后定义的样式（应避免这种情况，如果出现问题，溯源的时候比较麻烦）

权重分为4个等级：

一、内联样式表的权值为 1000

二、ID 选择器的权值为 100

三、Class 类选择器、伪类选择器，属性选择器的权值为 10

四、HTML 标签选择器、伪元素选择器的权值为 1

还有一个！important优先级是最高的，不在四个等级内，

通配选择器(*)，子选择器(>)，相邻同胞选择器(+)的权重为0

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

6.text-indent属性

text-indent 属性规定文本块中首行文本的缩进。

可以是负值。如果值是负数，将第一行左缩进。

text-indent属性值

length 定义固定的缩进。默认值：0。

% 定义基于父元素宽度的百分比的缩进。

inherit 规定应该从父元素继承 text-indent 属性的值

用的使用一般是text-indent:2em。这样能够保证2个字符的首行缩进

7. 不定宽布局

单列布局

水平居中

水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式

使用inline-block 和 text-align实现
使用margin:0 auto来实现
使用table实现
使用绝对定位实现
垂直居中
使用vertical-align
实用绝对定位
实用flex实现
水平垂直全部居中
利用vertical-align,text-align,inline-block实现
利用绝对定位实现
利用flex实现

多列布局

圣杯布局：可以左侧浮动，右侧触发bfc(一般是overflow：hidden或者浮动)；也可以使用flex布局

左列定宽，右列自适应
利用float+margin实现
利用float+margin(fix)实现
使用float+overflow实现
使用table实现
实用flex实现
右列定宽，左列自适应
实用float+margin实现
使用table实现
实用flex实现
两列定宽，一列自适应
利用float+margin实现
利用float+overflow实现
利用table实现
利用flex实现
两侧定宽，中栏自适应
利用float+margin实现
利用table实现
利用flex实现
一列不定宽，一列自适应
利用float+overflow实现
利用table实现
利用flex实现
多列等分布局
实用float实现
利用table实现
利用flex实现