整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
7. 开始使用 Command (命令) 菜单 (如果你还没有用过的话)
有一些 Chrome 调试工具的功能被深深的隐藏在特别的面板中，菜单中等等。并且有一些甚至隐藏在这些地方之下。这也是为什么 Command 菜单 是一个在工具盒中必不可少的工具。
如果你在 WebStorm 中使用过 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜单) 也是类似的功能。可以这样让它显示出来：
你可以看到命令的输入和一系列的可供你选择的命令，按照我在下图所选择的类型被分组排列。
顺便说一句. 我个人认为上面这张图，是对于 DevTools 有多么强力的最好的象征
让我们一起来看看隐藏在这里的精华吧，一起？
18.截屏，大小通吃
如果你想对一个特别的 DOM 节点进行截图，选中那个节点，打开 Command 菜单并且寻找节点截图的命令。
更有用的是什么呢，你同样可以用这种方式全屏截图 - 使用 Capture full size screenshot。请注意，我们说的是全屏，并不是嵌入页面的一部分。我记得这可是得使用浏览器插件才能做到的！
19.快速切换面板
DevTools 的部分使用双面板布局（例如：元素或者资源面板）经常将它们以适合阅读的方式展示出来，根据屏幕可用的部分，将它们横向或者纵向的排列。有时候这个布局却并不是你喜欢的。
（你是否重置过DevTools呢？将样式面板将其从html预览的底部移动到右边或者其他的周围位置呢？是的，这就是我所说的）
打开 Commands 菜单并且输入layout,你会看到 2 到3个可供选择的项(当前你已经激活的选项不会在这里显示)：
选择你需要的
20.快速切换主题
你是否突然开始讨厌强光，并且不能忍受一直看着白光闪闪的屏幕呢？或者你一直都在黑暗的模式下工作，突然太阳出来了，照在你的 DevTools 上所以你什么都看不到？
在 Commands菜单中寻找与 theme 相关的选项，以实现在明亮&暗黑两种主题之间的切换。
好的，今天就分享这么多啦~
作者：dendoink
链接：https://juejin.im/post/5c0ee12551882545e24ef291
多学习HTML5的小伙伴在学习的过程中都遇到过这样的问题：为什么感觉能做出来的页面，然而做起来却总是诸多问题?千锋广州小编告诉你，其实这是正常现象，谁也不能几天就成为大师，你的实践还太少了!练习多了，经验多了，静态网页自然也就手到擒来。
静态的网页其实就是由两部分组成，一个是底层结构HTML，另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家，首先得把需要的家庭成员找齐了，即首先考虑要做一个什么样的网站，例如一个综合类网站包括：搜索框、导航、文章类别模块、文章标题以及一部分广告板块;一个博客主页包括：导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。
写页面的时候是有剧本的，这个剧本指网页设计图，或者某个现有网页，建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能，把整个完整的页面截取下来，QQ浏览器，360浏览器都可以做到。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。
按照设计好的剧本接着就可以找对应的成员了，例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同类型的页面，布局要复杂一些。
当看到一个网页时，需要在脑海当中对页面进行一个简单的扫描，如果把页面当成一张纸，要怎么样从大到小一点点分割。当有了初步的认识之后，就可以把这些东西转化成HTML结构，所有不同颜色的框框在写的时候用的都是DIV。
从上往下，从大到小一点点先把某个模块以不同的颜色色块利用代码堆积出来。保证大的模块布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input、文字、超链接a、列表ul li，这时候简单的页面结构就出来了。
接下来要把写好的结构进行美化，不然页面就会一团乱麻，没有美感，而网页当中润色部分是用CSS来做的。这个环节需要更加细心，例如百度首页导航红色框整体在绿色框的右边，需要给红色框添加float：right;红色框里面文字的字号大小，字体，字体颜色，水平间距，垂直间距都需要一点点写。如果在写的过程中遇见了问题，可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，CSS看右边，看看CSS属性有没有显示，有没有划掉，有没有黄色报错等等。
在做页面时，需要大量的练习，才可以熟能生巧。一个页面写完之后，总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样解决，深入思考这个模块的这个效果可不可以用其他的方法来实现，以做到举一反三。
千锋广州小编建议大家在HTML5的过程中轮与实践要相结合，配合实战项目讲解网站页面布局，一定要学好HTML、CSS，基础打好了，才能更有信心面对之后的挑战。
们学习如何应用CSS给元素添加边框。
CSS边框属性，允许我们指定一个元素边框的样式、宽度和颜色。
我们先来学习元素边框的样式。border-style 属性指定了要显示什么样的边框。允许使用以下的值：
dotted，定义一个点状的边框
dashed ，定义一个虚线边框
solid，定义一个实线边框
double，定义一个双倍的边框
none，定义无边框
hidden，定义一个隐藏的边框
我们来实验一下。
创建一个 009-css-borders 文件夹，在文件夹里创建一个 css-borders.html 文件和一个border-style.css 文件。
构建 html 基础代码，引入样式文件。
编写 p.dotted 回车，填入文本点状的边框。按照同样的方法，添加其他的几个边框结构。
<p>点状的边框</p>
<p>虚线边框</p>
<p>实线边框</p>
<p>双倍的边框</p>
<p>无边框</p>
<p>隐藏的边框</p>
<p>混合边框</p>
<p>速记边框</p>
在 css 里定义 p.dotted 选择器，声明样式 border-style: dotted。定义其他几个选择器，全部声明 border-style 属性，值分别为：dashed、solid、double、none、hidden。
在浏览器里查看结果，边框的效果都做好了。
border-style: none 和 border-style: hidden 视觉上都不显示边框，有什么区别呢？
在 html 里编写：table 大于 括号 tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）。回车，创建一个3行3列的表格。给 table 元素定义border属性，值为 1。 给第二行第一个和第二个td 定义 class属性，值分别为 lm、m。
在 css 里定义 table 选择器，声明样式 border-collapse: collapse，让表格线细一些。这个属性我们在后面会详细讲解。
定义 td.lm 选择器，声明样式 border-style: dashed。定义 td.m 选择器，声明样式 text-align: center。
看一下效果，左中和左上、中以及左下边框是相邻的，在这些单元格上定义边框样式一定会产生冲突。
给 td.m 选择器添加样式声明 border-style: none。
我们看，没有去掉任何边框。
再把 border-style 属性值改为 hidden。
我们再看，中间的 td 边框消失了，当然，左侧相邻的边框也消失了。
当表格单元格相邻边框产生冲突时，border-style: hidden 优先级最高，border-style: solid 优先级次之，border-style: none 优先级最低。
还是这个表格示例，单元格左中和中之间用点线来分隔。如何实现呢？
在 td.m 选择器里将 border-style 的值改为 dotted。
很显然，并不是我们要的效果。看来，得把单元格左中的右边线隐藏。如何控制一条边框线呢？
可以在 border-style 中间添加一个表示方位的词，就可以设置单个边框线了。
比如，给 td.lm 选择器声明 border-right-style 属性，就可以设置这个单元格右边框样式了，这里设置的值为 none。
效果实现了。
把这里的 border-right-style 的值设置为 hidden 是什么效果呢
通过这个例子发现，可以分别指定每个边框的样式。这些属性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用来设置元素的上、右、下、左边框的样式。
除了单个样式属性外，border-style 的属性值，还可以使用混合的简写方法。有四种写法：
第一种写法：四个值，分别代表上边、右边、下边、左边的边框样式。从顶部开始，按照顺时针方向来设置值。比如 border-style: dotted solid double dashed，设置上边框为虚线、右边框为实线、下边框为双线、左边框为虚线。
第二种写法：三个值，分别代表上边、左右边、下边的边框样式。第一个值表示上边框的样式、第二个值表示左边和右边框的样式，第三个值表示下边框的样式。比如 border-style: dotted solid double，设置顶部边框为虚线、左右边框为实线，底部边框是双线。
第三种写法：两个值，分别表示上下边，左右边的边框样式。第一个值表示上下边框的样式、第二个值表示左右边框的样式。比如 border-style: dotted solid，设置顶部和底部的边框是点状的、右边和左边的边框是实心的。
第四种写法：一个值，表示四个边框的样式。比如 border-style: dotted，四个边都是点状边框。
在 html 里添加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.mix 选择器，声明样式 border-style: dotted dashed solid double。
最后一个段落的混合边框实现了。
除了设置边框样式，还可以设置边框的宽度。
border-width 属性用于设置四个边框的宽度。宽度可以被设置为一个特定的尺寸，以 px、em等为单位，或者使用三个预定义的值： thin、medium、thick——薄、中、厚。
给前三个 p 元素全部声明 border-width 样式属性，值分别为 5px，0.5em，thick。
三个段落的边框线宽度就添加好了。
和边框样式 border-style 属性一样，边框宽度的值也可以使用混合的简写方法，可以给 border-width 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-width: 5px 10px; 样式。
我们看，这个边框宽度上下是 5 像素，左右是 10 像素。
再给最后一个 p 元素添加 border-width: 2px 3px 4px 5px 样式。
这样，四边不同的边框，就拥有了不同的宽度！
除了设置边框样式，还可以设置边框的颜色。
border-color 属性用于设置四个边框的颜色。可以通过颜色名称、十六进制颜色值、RGB颜色值来设置颜色，也可以通过 transparent 来设置透明。
给前三个 p 元素全部声明 border-color 样式属性，值分别为 red，#00ff00，rgb(0, 0, 255)。
三个段落的边框线颜色就添加好了。
和边框样式 border-style 属性一样，边框颜色的值也可以使用混合的简写方法，可以给 border-color 设置四个值、三个值、两个值或一个值。
给第四个 p 元素添加 border-color: purple orange 样式。
我们看，这个边框上下是紫色，左右是橙色。
再给最后一个 p 元素添加 border-color: red green blue yellow 样式。
这样，四边不同的边框，就拥有了不同的颜色！
和字体 font 属性一样，边框也可以使用速记属性。为了缩短代码，可以在一个 border 属性中指定 border-style、border-width、border-color 等单独的边框属性。比如：border: 5px solid red，表示设置元素的边框宽度为5像素，边框样式为实线，边框颜色为红色。
注意，border-style 是必须要声明的，其他两个可以省略，省略后会采用 1 像素、黑色线这两个默认值。
在 html 里添加一个 p 元素，定义 属性。填入一些文本。
在 css 里定义 p.shorthand 选择器，声明样式 border: 5px solid #ccc。
一行样式代码就实现了边框样式、宽度和颜色的设置！
这个简写的方法默认四个边，全部定义了相同的边框。能不能定义单个边呢？可以的！
很自然的猜到，通过声明 border-top，border-right，border-bottom，border-left 四个属性，值为上面简写的方式，就可以单独定义元素的某一条边了。
注释掉这行代码，再声明一个 border-bottom 属性，值同样是 5px solid #ccc。
一行代码，同样实现了一条底部的边框线
*请认真填写需求信息，我们会在24小时内与您取得联系。
