ul | 易学教程

一个很好的菜单源码

阅读更多关于一个很好的菜单源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body { margin: 36px 0 20px 0; background-color: #fff; text-align: center; } a img { border: none; } form { margin: 0; padding: 0; } .cleared { clear: both; line-height: 0; } .clear { clear: both; } table { border-collapse: collapse; } td { vertical-align: top; } #navBar { background-color: #303030; margin:

Bootstrap 翻页(pager)

阅读更多关于 Bootstrap 翻页(pager)

如果您想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。与分布链接一样，也是一个无序列表。默认情况下，翻页是居中显示的。下面列出了bootstrap处理翻页的类。 Class 描述示例代码 .pager 添加该 class 来获得翻页链接。 <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> .previous, .next 使用 class .previous 把链接向左对齐，使用 .next 把链接向右对齐。 <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> .disabled 添加该 class 来获得一个颜色变淡的外观。 <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> 默认的翻页 <!DOCTYPE html> <html> <head>

HTML/CSS 速写神器 Emmet语法

阅读更多关于 HTML/CSS 速写神器 Emmet语法

Emmet 是高效、快速编写 HTML 和 CSS 代码的一种插件，如果还不了解，请戳 Emmet — the essential toolkit for web-developers ,再根据你使用的编辑器（Sublime 或 vim 等）下载对应的 Emmet 插件,Visual Code直接支持Emmet语法。 1.准备工作编辑器使用Visual Code,下载地址访问 https://code.visualstudio.com/ ，新建一个HTML文件，并保存。 2.生成 HTML 文档初始结构 HTML 文档的初始结构，就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可以生成一个 HTML5 的标准文档初始结构，你没有看错，输入一个感叹号（当然是英文符号），然后按 “Tab” 键便会生成代码，就会发现生成了下面的结构： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> 这就是一个 HTML5 的标准结构，也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构，那么输入指令 html:xt,然后按 “Tab” 键,

纵向下拉及多级弹出式菜单

阅读更多关于纵向下拉及多级弹出式菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉纵向及多级弹出式菜单</title> <script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function

jQuery---下拉菜单案例

阅读更多关于 jQuery---下拉菜单案例

下拉菜单案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; margin: 100px auto 0; padding-left: 10px; background-image: url(imgs/bg.jpg); } .wrap li { background-image: url(imgs/libg.jpg); } .wrap>ul>li { float: left; margin-right: 10px; position: relative; } .wrap a { display: block; height: 30px; width: 100px; text-decoration: none; color: #000; line-height: 30px; text-align: center; } .wrap li ul { position: absolute; top: 30px; display: none; } </style

横向CSS+DIV下拉菜单

阅读更多关于横向CSS+DIV下拉菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />< title > 标准化 </ title > < style type ="text/css" > * { } { margin : 0 ; padding : 0 ; } .menu { } { font-size : 12px ; position : relative ; z-index : 100 ; } .menu ul { } { list-style : none ; } .menu li { } { float : left ; position : relative ; /**/ /* left:135px; */ } .menu ul ul { } { visibility : hidden ; position : absolute ; left : 3px ; top : 25px ; } .menu table { } {

一起学Vue之列表渲染

阅读更多关于一起学Vue之列表渲染

在Vue开发中，列表数据绑定非常简单易用，本文主要通过一些简单的小例子，讲述v-for的使用方法，仅供学习分享使用，如有不足之处，还请指正。用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。如下所示： 1 <ul> 2 <li v-for="fruit in fruits"> 3 {{ fruit.name }} 4 </li> 5 </ul> 在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。如下所示： 1 <ul> 2 <li v-for="(fruit, index) in fruits"> 3 {{ msg }} - {{ index }} - {{ fruit.name }} 4 </li> 5 </ul> 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法，如下所示： 1 <ul id="example-3"> 2 <li v-for="fruit of fruits"> 3 {{ fruit.name }} 4 </li> 5 </ul> 其中fruits是js中定义的一个数组

CSS中ul li居中的问题

阅读更多关于 CSS中ul li居中的问题

一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将其这个属性改为inline便可实现这种ul li居中的问题 <style type="text/css"> #bNav{ margin-top:10px; background:#D9EBF5; text-align:center; } #bNav ul{ padding:4px 0; margin:0; overflow:hidden; } #bNav ul li{ display:inline; padding:0; }</style> <div id="bNav" class="bNav"> <ul> <li><a href="index.aspx" title="Home">Home</a></li> <li>|</li> <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li> <li>|</li> <li><a href="info.aspx?info_id

HTML5CSS3

阅读更多关于 HTML5CSS3

HTML5 第一天一、什么是 HTML5 HTML5 的概念与定义定义： HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、 CSS3 、 javascript , 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D 、 3D 动画、过渡 CSS3 特性性能与集成 HTML5 的现状绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，总的来说： HTML5 已经是大势所趋二、 HTML5 新增标签什么是语义化新增了那些语义化标签 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签 aside — 侧边栏标签 footer — 尾部标签使用语义化标签的注意 - 语义化标签主要针对搜索引擎 - 新标签可以使用一次或者多次 - 在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素 - 语义化标签，在移动端支持比较友好， - 另外，`HTML5` 新增的了很多的语义化标签，随着课程深入，还会学习到其他的三、多媒体音频标签多媒体标签有两个，分别是音频

Emmet 快速编写html代码

阅读更多关于 Emmet 快速编写html代码

简介快速编写HTML代码语法简单，语法类似css选择器，30分钟内你就可以搞定它。开发商为sublime、atom、brackets、hbuilder、webstrom等编辑器或IDE提供对应的插件，你可以在你喜欢的编辑器中使用它。它还支持对 css快速编辑功能。 Emmet官网 Emmet官方文档 Emmet官方下载缩写缩写是emmet工具包的核心：这些特殊的表达式在运行时被解析，并转化为对应的结构化代码块（例如html)。缩写语法像css选择器，这样web开发人员可以轻易的使用它，通常情况下按下 tab 或 ctrl+e 会生成对应的代码。 #page>div.logo+ul#navigation>li*5>a{Item $} 可以转换为... div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div> 语法官网语法介绍文档： http://docs.emmet.io

订阅 ul