---- 一、HTML样式 当我们在做导航栏、少量数据表格、层级列表时，使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构，为每一个元素添加a标签，即超链接。...li自带的样式，文字有下划线，这是a标签自带的样式。...接着使用text-align和padding将文字水平垂直居中。用margin调整相邻元素间的间距。...为一级菜单的元素添加position：relative；意为相对定位，在元素原有的位置基础上，根据设置的left调整元素位置，这样做不会改变页面布局，不影响其他元素的偏移。...使用选中ul和li ，为其添加鼠标移入和移出的函数，即mouseover和mouseout。接着用.children获取下拉列表中要显示的元素，也就是nav的子元素。
二.HTML文档结构 三.元素 1.按单/双标记划分 2.按块状/行内元素划分 3.块状元素和行内元素的互相转换 四.重点 1.图像链接 2.导航菜单 ①列表 ②超链接 3.表单 4.表格 ---...下面实例： ---- 2.导航菜单 ①列表 有序列表...---- 无序列表 ul li 列表默认的前缀样式是实心圆其实是disc。...ul标签中的属性是type，type属性值有disc（实心圆默认）、circle（空心圆）、square（实心正方形）、none（取消前缀）。...数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 由定义，每个表格均有若干行。 rowspan属性用于合并行，colspan属性用于合并列，在标签中添加。
大家好，又见面了，我是你们的朋友全栈君。...一、垂直导航菜单的制作 1、基本的样式清除： *{margin:0;padding:0} 2、无序列表圆点去除： ul{list-style:none} 3、下划线去除： a{text-decoration...> 二、水平导航菜单的制作 垂直菜单改为水平菜单：ul的width去掉,li进行float:left；a标签的文本缩进改为文本居中： text-align:center...> 三、其他 导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在标签上；...10px；可以使高度变大的块上移，与其他块处于一个平面 5、用JS制作水平伸缩菜单时，“this”代表当前的标签。
是不能兼容小屏幕的，所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的（纵向排列） 3、可以在一个列(div)中，指定在不同屏幕下的宽度占比 <div class="col-xs...data-toggle="dropdown" : 切换菜单的显示 和 隐藏的 2、菜单 由 或 来充当...class="dropdown-menu" 由列表作为菜单时，允许为列表项增加以下class来完成特殊效果: li.divider...3、组件 - 导航(nav) 1、所有的导航都依赖于 .nav 2、导航分类 1、标签页式导航 2、胶囊式导航 <ul class="nav
这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，就是创建横跨网页水平线的标签。...中只能嵌套，直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器，可以容纳所有元素。...标签，他就像一个容器，可以容纳所有的元素 表格结构： 在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示： ...必须位于 标签中，一般包含网页的logo和导航等头部信息。 ：用于定义表格的主体。...表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
这些水平线可以通过插入图片实现，也可以简单地通过标签来完成， ---- 就是创建横跨网页水平线的标签。其基本语法格式如下： 是单标签 在网页中显示默认样式的水平线。...---- 列表标签 ---- 无序列表 ul （重点） 无序列表的各个列表项之间没有顺序级别之分，是并列的。...中只能嵌套，直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器，可以容纳所有元素。 3....标签，他就像一个容器，可以容纳所有的元素 ---- 表格属性 ---- 表头标签 表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。...表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。
大家好，又见面了，我是你们的朋友全栈君。 1、垂直导航条的制作 一想到导航菜单就会想到用 ul li无序列表来制作。因为他的语义非常接近条目性的内容。..."#">产品展示 售后服务 联系我们 给导航条加上css...效果如图所示： 2、水平菜单的制作 垂直菜单只需要将水平菜单中设置为float:left就可。...li{ float:left;} 效果图如图所示： 3、圆角菜单的制作 通过设置背景，改变外观样式，通过a:hover,可以为菜单增加交互效果 先看一个圆角背景的贴图，图片的宽120px 高60px...将首页设置为了超链接状态 首页 标签设置了class=“on”，css样式表中.on{ }里边的设置就一直生效，所以移到其他标签上首页也不还原，想要还原要用到js 4、通过js对导航条进行伸缩变换
下面实例： --- 2.导航菜单 ①列表 有序列表... dd aa dd [在这里插入图片描述] --- 无序列表 ul li 列表默认的前缀样式是实心圆其实是...ul标签中的属性是type，type属性值有disc（实心圆默认）、circle（空心圆）、square（实心正方形）、none（取消前缀）。... 一 二 三 [在这里插入图片描述] --- 自定义列表 dl dt dd 自定义列表...数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 由定义，每个表格均有若干行。 rowspan属性用于合并行，colspan属性用于合并列，在\标签中添加。
这些水平线可以通过插入图片实现，也可以简单地通过标签来完成 就是创建横跨网页水平线的标签。其基本语法格式如下： 是单标签 在网页中显示默认样式的水平线。...列表标签 容器里面装载着文字或图表的一种形式，叫列表。 列表最大的特点就是 整齐 、整洁、 有序 无序列表 ul （重点） 无序列表的各个列表项之间没有顺序级别之分，是并列的。...中只能嵌套，直接在标签中输入其他标签或者文字的做法是不被允许的。 2. 与之间相当于一个容器，可以容纳所有元素。 3....标签，他就像一个容器，可以容纳所有的元素 表格属性 三参为0 border cellpadding cellspacing 为 0 表头标签 表头单元格一般位于表格的第一行或第一列，...表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。...没有有效利用Hx系列标签和ul、ol、dl等不同含义的列表标签、没有有效利用p、quote、pre等标签。...我上一篇博文发了以后，有位朋友评论说我没做过前台开发。因为没有class和id，就不能实现css和javascript的分离。...仍然以上面的下拉菜单列表为例。首先使用 ul a 对父级菜单的链接应用样式，然后用ul ul a就可以精确定位到次级菜单的链接，应用新的样式，对ul a的定义进行覆盖。...) 都能得到第二个子菜单的第二个菜单元素。
大家好，又见面了，我是你们的朋友全栈君。 在前面的博文中我们提到横向一级菜单，这里我们来看看导航菜单。导航菜单种类很多，但是制作原理都是大同 小异的，这里看的比二级下拉式菜单还简单。...来看一些网站上的导航菜单： 垂直导航菜单： 水平导航菜单： 一垂直菜单 制作原理：(1)用无序列表构建菜单；(2)标签的设置：ul li...定义的关键是将标签设置为 块元素。 代码： 效果展示： 初始化状态或鼠标离开的状态： 鼠标放上去的状态： 二水平菜单 制作原理...制作原理：在水平菜单的基础上我们进行CSS圆角属性的设置，但是IE6,7,8浏览器并不支持这个属性，制作一定 要考虑浏览器的兼容性，在这里我们使用圆角属性。
如果把前端比做写的一封信： html（“描述”）就是写信用的笔； css（为“描述”添加样式）就是写信用的墨水和信纸； js（为“描述”添加行为）就是这封信所具有的功能，比如“给女孩表白”的功能。...这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。...--- 12.列表 列表标签 1.在 html 页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用 2.列表分为两类：一是无序列表，一是有序列表 标签 描述 定义无序列表 ...第二项 第三项 的属性type 拥有的选项 disc 默认实心圆 circle 空心圆 square 小方块 none 不显示 ----...比如下面是一个超链接水平导航栏： <!
链接登录的颜色为红色。 主导航栏里的列表中的文字颜色为深灰色。 收藏本站要求字体加粗。 我们网页的标签非常多，在不同地方会用到不同类型的选择器，以便更好的完成我们的网页。 <!...（a特殊） 注意: 只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。...容器级可以包含任何标签 行内元素 一行可以放多个行内元素 不可以直接设置宽度高度 它本身内容的宽度 容纳文本或则其他行内元素 行内块元素 一行放多个行内块元素 可以设置宽度和高度 它本身内容的宽度...href="#">关于我们 联系我们 鼠标放在业务介绍 # list-style 属性 list-style 简写属性在一个声明中设置所有的列表属性...可以按顺序设置如下属性： list-style-type list-style-position list-style-image 例如:把图像设置为列表中的列表项目标记： ul { list-style
关于导航我们有很多设计： 单纯的三个按钮组合 2.面包屑导航 3.简易菜单 4.导航栏 其实每种实现起来 无非就是超链接。都不难。不过我们这里选择了第四种，考虑到后续我们还会加入其他子模块。...这段代码出自bootstrap的官方教程中的导航栏demo，别问为什么这么写，我只能说人家就是这么设计的，你只要在上面跟着改改就好了。...目前的4个超链接：返回项目列表/接口库/用例库/项目设置 我们要给它们的超链接补全。 注意，这里我用了很多????? ，这些问号应该是什么？...这里给大家提供3种思路： 把这段代码 nav标签，复制到其他俩个子页面中即可 把这段代码单独做成一个新页面，然后接口列表进入的是这个新页面，新页面在做3个子页面，用来单独展示 接口库/用例库/项目设置...就是这选中深色的表现不对： 比如此时我已经进入了用例库，但是导航上依然显示的是选中的接口库。 其实这点我们不用担心，就是个样式问题而已，没有影响功能。
注意事项:由于字体图标样式太多这里不一一进行显示，直接点击上面的网址生成即可； 2.导航栏 描述:一个网站基本都有一个导航栏，所以BS也为我们提供这个组件，并且还可以设置下拉菜单是可切换的，是以列表格式显示链接的上下文菜单...导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。...导航元素 描述:进行首页导航栏的菜单进行设置，导航菜单与下拉菜单使用相似的语法； 默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class的无序列表。...#表格导航或ul标签 .nav #的无序列表开始 .nav-tabs #标签式的导航菜单选项卡 .nav-pills #胶囊式的导航菜单 .nav-stacked #垂直的胶囊式导航菜单 .nav-justified...标签 (导航链接) .navbar-collapse #响应式的导航栏必须使用Bootstrap 折叠（Collapse）插件，并且折叠的内容必须包裹在其中 .nav # ul 标签 无序列表向导航栏添加链接
那接下来就让我来学习HTML，首先我们先来了解页面的整体一、HTML的基本语法规则文档的扩展名为.html或.htmHTML标签不区分大小写,推荐小写元素可嵌套，可以包括属性的额外信息标签和属性不区分大小写...： 异步下载脚本，页面完全加载后开始加载脚本常用元素内联元素(inline)特性：只占据它对应标签的边框所包含的空间只能容纳文本或其他内联元素只能通过修改水平边距...总是从新行上开始能容纳其他块元索或者内联元素可以控制宽高、行高、边距、边框等改变其尺寸常用的块级元素:、、ch1>-eh6>、、、、、展现介绍性的信息，导航，标题，logo，搜索框，作者名称等......提供导航链接，如菜单，目录，索引等，常常被包含在里面页面主体部分独立的文档，页面，应用，帖子按主题将内容隔开，内含标题<aside
使用 标签作为父盒子 , 其中容纳三个 链接 标签 , 每个链接标签中包含一个 标签 ; <!..., 因此不能使用传统的盒子模型 需要使用 CSS3 盒子模型 ; .news a { /* 设置浮动 让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的...; } ul { /* 取消 ul 列表项的内外边距 */ margin: 0; padding: 0; /* 取消列表项的样式 - 左侧的小圆点 */ list-style...width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度 该图片自动水平 / 垂直对齐 */ width: 10px; }...brand div img { /* 设置图片链接中的图片 在水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏 */ nav { /* 整个导航布局距离顶部
因为我正在做一款app，我在团队中主抓产品设计、UX/UI设计、部分前端开发，少量运营。...在工作之余，我决定把所研究的内容写成关于app之xxx的系列文章，文章选择的题材会往“小而精”这个方向努力，范围在我的工作内容中选取。...先来看看app常用的导航模式有哪些：列表式、网格式、标签导航、抽屉式导航等。...如领英的设置页面 网格式与列表式类似，但排布更紧凑，显示也更直观，可在一页容纳更多选项，常见于一级页面，电商类app一级页面用的比较多，如淘宝的首页 标签式有顶部、底部两大类，底部应用的最广泛，因为底部比较方便大拇指点击...那么，有没有一种方式应用在一级页面，可以集合这些优点： 列表式的结构清晰明了， 网格式的紧凑、直观， 标签式底部导航的便利拇指操作， 抽屉式容纳更多选项，简洁界面。
* dir - 目录列表 * div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form...* h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，...* pre - 格式化文本 * table - 表格 * ul - 非排序列表 内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素...，不能再包含块级元素，这几个特殊的标签是：h1~h6、p、dt。...所以说p里面不能嵌套div，就是我犯的错误。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
