front
Web page navigation nice, neat specification list and pictures of the article title list and so on. These are inseparable from HTML in a list of important ---- element, there is an unordered list in HTML, ordered lists, and definition lists three types. Among them, the most widely used unordered list, here, we know what an HTML list.
In the list of document editing is also very common, we can combine word in the list to compare learning HTML list elements. There bulleted lists, numbered lists, multilevel list in the word. In HTML also provides three types of lists are unordered lists, ordered lists, and definition lists. No unordered sequence of points, a similar list of symbols in the word, an ordered list of numbers or letters, as sequentially numbered list, similar to the word, note: definition list is different from the multi-level word in the list. Simply put, the definition of a list of items can be divided into two parts, one item listed above, the following are the details of the project.
To a map list is Gesha look like!
List of tags and style
Unordered list
Unordered list
-
Label start,
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li> ……
</ul>
Ordered list
Ordered list
-
Label start,
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li> ……
</ol>
Definition list
Defined list
-
Label start,
<dl>
<dt>项目名称</dt>
<dd>项目内容</dd> ……
</dl>
Front unordered list and list items are marked ordered list, unordered list before the project is a symbol (filled circles, circular hollow or solid square), before the project is an ordered list of numbers (can be numbers, letters or Roman digital). There are two ways to set before the list item symbol types, one is the type attribute directly in the list of HTML tags, CSS is another way to set the CSS property list-style-type. With CSS, you set the type attribute in HTML has been abandoned, it is recommended to use CSS property list-style-type to set the mark type list item.
Sample Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
p{
font-family:微软雅黑;
font-size:14pt;
color:red;
background-color:gray;
}
ol{ /*设置有序列表的编号为小写罗马数字*/
list-style-type:lower-roman;
}
</style>
</head>
<body>
<p>WEB开发教程（无序列表）</p>
<!--利用type属性设置无序列表项目符号为实心正方形-->
<ul type="square"><!--这种方式已抛弃，建议使用CSS属性list-style-type-->
<li>HTML&CSS</li>
<li>JavaScript</li>
<li>ASP.NET</li>
</ul>
<p>B/S三层结构（有序列表）</p>
<ol><!--已在CSS中用list-style-type属性设置列表项编号为小写罗马数字-->
<li>界面展示层</li>
<li>业务逻辑层</li>
<li>数据操纵层</li>
</ol>
<p>B/S与C/S（定义列表）</p>
<dl>
<dt>B/S模式</dt>
<dd>浏览器/服务器模式，只要安装一个浏览器。</dd>
<dt>C/S模式</dt>
<dd>客户端/服务器模式，需要安装客户端软件。</dd>
</dl>
</body>
</html>
Results as shown below:
Note: these three lists, unordered list of the most widely used, commonly used in navigation, the article title list, picture list, etc. The layout of the law there is a list of class content. In the CSS property list-style-type, the value may be provided none, removed before the symbol represents a list item.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
ul{
list-style-type:none; /*取消项目符号*/
}
</style>
</head>
<body>
<p>电子产品</p>
<ul>
<li>显示器</li>
<li>打印机</li>
<li>投影仪</li>
<li>扫描仪</li>
</ul>
</body>
</html>
If you are still in the programming world confused and do not know their future plans, can be added to push the front end exchange learning advanced group 685,910,553 ( front-end information-sharing ). Which we can communicate and get out confused with big God.
Novice receive a free learning materials to see how proudly forward predecessors is constantly updated with the latest tutorials and learning methods (detailed front-end project combat instructional videos) in the programming world,
There are web front end want to learn, or change jobs, or college students, as well as work want to upgrade their skills, are welcome to join the junior partner to learn