，二级菜单显示，鼠标移出一级菜单时，二级菜单隐藏 （1）元素显示使用display:block属性，隐藏使用display:none属性 2、二级菜单显示在一级菜单的右侧 （1）给一级菜单和二级菜单共同的父元素设置相对定位...，二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框，边框为点线（dotted） 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框，边框为点线（dotted） 4、二级菜单的最后一项没有下边框 效果 <!...{ width: 200px; height: 29px; list-style: none; /* 去掉无序列表的项目符号...: absolute; left: 200px; top:0px; list-style: none; /* 去掉无序列表的项目符号
Bootstrap 分页 本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。...分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页。...默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。 Class 描述 示例代码 .pager 添加该 class 来获得翻页链接。...="next">Newer → 结果如下所示： ---- 分页更多实例 类 描述 实例 .pager 一个简单的分页链接，链接居中对齐...尝试一下 .previous .pager 中上一页的按钮样式，左对齐 尝试一下 .next .pager 中下一页的按钮样式，右对齐 尝试一下 .disabled 禁用链接 尝试一下 .pagination
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。把display设置为 none，该元素及所有包含在其中的元素，都不会在页面中显示。...而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示 。...如图所示，通过给外包装设定宽度值，并将其水平外边距设定为 auto，这个单栏布局在页面上居中了。随着向里添加内容，这一栏的高度会相应增加。...hidden; } nav { width:150px; float:left; /*浮动*/ background:#dcd9c0; } nav li { /*去掉列表项目符号...总结 这篇文章我们介绍了用浮动的有宽度的元素来创建多栏布局、如何让固定布局在页面上居中以及让它们在一定范围内可以伸缩。同时也了解了如何使用内部div在浮动元素中生成间距，而又不会改变布局的总宽度。
HTML元素就是预定义好的一些标签,不同标签有不同功能作用 HTML元素属性, 对指定元素进行扩展功能配置 PS: 编写HTML代码信息时,文件中一定不能出现中文符号信息...-- This is a comment --> --- 在指定代码位置添加注释说明信息, 注释信息不会显示在页面上 元素属性:align="center" --- 设置字符信息居中显示center.../局右显示right/居左显示left 4.3 HTML格式设置方法 --- 将指定字符串信息进行加粗处理 --- 将代码编写的格式信息...,呈现在页面上(主要可以控制换行和空格信息) --- 定义一些地址描述信息,主要会以斜体方式进行显示 --... --- 生成列表信息标签-无序 type="square" --- 无序列表前的一个符号信息 --- 生成列表信息标签-有序 --- 自定义列表内容信息
可以通过left与margin-left控制元素水平居中 定位元素未设置宽高情况下，同时设置top和bottom会改变元素高，同时设置left和right会改变元素宽 绝对定位元素常见用法合集 top、...> 4、相对于body定位-右击显示桌面菜单 当鼠标在浏览器窗口右击时，会在右击的位置显示对应的桌面菜单。...border:10px solid #fff; transform: rotateY(0deg);/*元素Y轴旋转到0deg*/ z-index:2;/*改变元素层级，让元素在最上面显示...，多网站、多系统部署； 使用 使用 Git 在线项目部署； 这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。...只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
，但是lidisplay: list-item;，多个是一行一行显示的 所以我使用了浮动，来让多个li元素排在一行 但是，li使用了浮动之后，会导致一个问题，高度坍塌： li的父元素ul是常规流元素块盒...，它的height默认值为auto，此时，它的高度不会计算不考虑浮动元素；由于ul里面只有li元素，所以会导致一个悲剧，ul元素的height为0 高度坍塌解决办法： （在html中，我给ul元素一个类选择器...（line-height与height取相同的值）： height: 40px; line-height: 40px; 文字水平居中： text-align: center; ul下的5个li元素...，作为一级菜单，我将他们的宽度以百分比设置width: 20%，宽度百分比的值是相对于其包含块（其父元素ul）的width，而ul我没有设置宽度，它采用默认值width: auto，而且因为ul元素是常规流元素...一般，页面上只显示一级菜单，需要点击一级菜单，才会出现相应的二级菜单 需要用到伪类:hover 鼠标悬停在元素上时的样式 （在html中，我给一级菜单的第四个li元素设置了一个选择器.submenu
alt：图片加载失败的时候，在图片原本的位置显示的提示文本 title：鼠标悬停的时候，显示的提示文本 超链接 href：链接地址 target...若宽不指定的情况下默认与父元素宽度相等，若高不指定的情况下，则它的高度由其内容来决定。...：left； 左浮动 float：right； 右浮动 作用：通过浮动，我们可以使块元素在同一行显示 (9)列表 无序列表 ...父元素没有指定高度，那么它的高度由其子元素来决定，当子元素都给了浮动，【浮动是脱离文档流的（不再占据自己原本的位置）】， 父元素测量不到子元素的高度，高度显示为0 解决： 给父元素添加overflow：...添加注释是很好的习惯，在刚写代码的时候，添加的注释要尽可能的详细，这会为后期的维护和项目的交接提供很好的便利，不然没人看的懂你的代码。 3.变量名的选择。
/是上一级目录） 三、HTML常用标签 section ：版块 用于划分页面上的不同区域,或者划分文章里不同的节 header ：页面头部或者版块（section）头部 footer：页面底部或者（section...h1-h6 标题 ul 无序列表 ol 有序列表 li ul或者ol的列表项 dl 定义列表 dt 定义列表的项目 dd 对dt展开的描述扩展 p 段落 time 时间 em 强调一个词或者一段话...4、不支持上下的margin 5、代码换行被解析 块元素： 1、默认独占一行 2、没有宽度时，撑满一行 3、支持所有class命令 inline-block 1、块在一行显示 2、内联支持宽高 3、默认内容撑开宽高...常见块级元素有： address（地址）、blockquote（块引用）、center（居中对齐块）、dir（目录列表）、div、dl（定义列表）、fieldset - form（控制组）、form、h...标签、hr、menu、ol、p、pre（格式化文本）、table、ul 行内元素（inline element）： 行内元素只能容纳文本或其他内联元素，元素样式display : inline的都是行内元素
，并配合一些相关的例子 基本属性 display: none none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。...这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。...所以在一般情况下我们也可以不写外面的table-row元素以及table元素。...flex-wrap: 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。...justify-content: 属性定义了项目在主轴上的对齐方式。 align-items: 属性定义项目在交叉轴上如何对齐。
title内容； img标签显示一张图片，但是这时候我们没有在src属性里面书写图片路径（或者路径错误的时候），都会显示alt的内容，当鼠标移动到img标签之上的时候，会显示title内容。...块元素详解 h系列标签： 从语义性理解，它是标题标签；比如可以在模块标题、详情页中段落标题使用等，字体上逐渐变小。...p标签： p标签定义的是段落，p 元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，同时也可以在样式表中书写。主要在模块中内容、详情页中的段落等使用。...但是要具体的做个总结，仍然还不是很明白，接下来小编就给大家整理出了行、块元素的区别总结，一起来看看咯~~~ 块元素特点 1) 独占一行，在默认情况下，宽度自动填满父元素宽度； 2) 宽度和高度可以控制；...行元素特点 1) 并排显示，不能独占一行； 2) 宽高不可设置，只由内容撑开； 3) margin和padding横向设置有效，纵向设置不产生边距效果； 4) 可以通过display: block; 转换为块状元素
类选择器命名规则 不能用纯数字或者数字开头来定义类名 不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名 不建议使用汉字来定义类名 不推荐使用属性或者属性的值来定义类名 常用的命名 ?...（不推荐使用） ---- 标签分类 块元素 典型代表: div, h1-h6, p, ul, li 特点: 1.独占一行 2.可以设置宽高 3.嵌套（包含）下，子块元素宽度（没有定义情况下）...如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。...---- 浮动 文档流（标准流） 元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。...3.元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;） 定位（脱标）的盒子居中对齐 margin:0 auto; 只能让标准流的盒子居中对齐 定位的盒子居中
元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。...则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的... 标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt...列表可以分为无序列表（），有序列表（）和定义列表（）。前两种列表更常见一些，都用标签包含列表项目。 无序列表表示一系列类似的项目，它们之间没有先后顺序。... 牛奶 开啡 绿茶 有序列表中各个项目间的顺序是很重要的，浏览器通常会自动给它们产生编号。
直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。...标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 7.html5有哪些新特性、移除了那些元素？...绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除...（缺点） Node是一个相对新的开源项目，所以不太稳定，它总是一直在变， 而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。 2.你有哪些性能优化的方法？...（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示div+css布局慢。
如果需要将某个元素 在可以滚动元素（scroll）中设置为居中计算方法为： 需要的scrollleft + 普通居中时候的offsetLeft = 当前的scrollleft+当前元素的offsetLeft...= 固定的当前元素在整个滚动条中距离左边的位置 DEMO ul, li { padding: 0px; margin:...: 200px;height: 100px;border:1px solid gray; overflow-x: scroll; overflow-y: hidden;"> 测试1 测试1 测试1 请将我居中
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示....无序列表 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 标签定义。...自定义列表 自定义列表的使用场景: 自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。...在 HTML 标签中， 标签用于定义描述列表（或定义列表），该标签会与 （定义项目/名字）和 （描述每一个项目/名字）一起使用。... 元素 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 标签。
元素的显示与隐藏 在我们的网页设计中，也许会有广告的设计部分 广告旁常常存在×号来进行广告的关闭，而这部分内容在CSS中就被称为元素的显示与隐藏 本质： 让一个元素在页面中隐藏或显示出来 我们常常提供三种方法...在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。...在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。...在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。...； 弹性伸缩盒子模型显示： display： -webkit-box； 限制在一个块元素显示的文本的行数： -webkit-line-clamp: 2; 设置或检索伸缩盒对象的子元素排列方法
题外话：前两天和专业老师探讨最近的一个项目，涉及到对一个浮动的盒子局中的问题，老师的解决方法打开了我的新思路。让我有了总结一下平时的居中问题的想法。不然可能忘掉了以后又要到处寻找解决办法了。...css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。...在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性， 但注意 IE6...至于怎么获得字体的高度，就去浏览器的调试工具（Dreamweaver也可以也有这个功能，实时编辑的工具都是可以的。）中看。当不设置高度值得时候，将鼠标移到对应的标签上，自然会有宽高显示出来。...改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
再过两天就要过年了，趁过年前把这些刚刚学过的知识整理一下，然后试着做几个具体项目练练手。本文是第一篇——html。将不定期更新，把接触到的内容及时填补到本文中。... 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。... 元素描述了文档的标题 元素包含了可见的页面内容 首先是html5新增的各种元素 111 居中 文本 行内文本容器，为了突出某些文字的特殊效果，不换行。...-- 较小字体显示 --> 特殊符号： 空格 < < > > & & " " © © ® ® <!
再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素。 图片 页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。...我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。 相对路径不会出现这种情况： 1aaa/../bbb/1.jpg .....为毛有一个_ ，就是规定，没啥好解释的。 也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。...浏览器会默认的给无序列表小圆点的“先导符号” 但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。... div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
Bootstrap 提供了各种预定义的 CSS 样式、JavaScript 插件以及其他组件，可以在项目中重复使用，从而加速开发过程。... 元素：这是链接元素，用于显示网站的标志。 元素：这是按钮元素，通常用于在小屏幕上切换导航栏的可见性。.../span> 让我们逐步解释上述代码的各部分： 元素：这是 HTML 中的无序列表元素，用于包含分页条。...您可以更改分页按钮的样式、显示的页数、上一页和下一页的文字等。.../span> 在这个示例中，我们删除了 “>” 符号，将上一页和下一页的文本改为 “上一页” 和 “下一页”。
领取专属 10元无门槛券
手把手带您无忧上云
