,二级菜单显示,鼠标移出一级菜单时,二级菜单隐藏 (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元无门槛券
手把手带您无忧上云