整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
程序开发中，标签ul与css样式实现菜单，也是经常用到的技巧，这里给大家介绍2个实例：
如下图所示：
标签ul与css样式实现菜单特效实例1
menu1.html网页代码如下：
<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>标签ul与css样式实现菜单特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="mymenu">
<ul>
<li><a href="" title="">首页</a></li>
<li><a href="" title="">产品介绍</a></li>
<li><a href="" title="">热门推荐</a></li>
<li><a href="" title="">行业动态</a></li>
<li><a href="" title="">加盟我们</a></li>
<li><a href="" title="">联系我们</a></li>
<li><a href="#" id="rightcorner"> </a></li>
</ul>
</div>
<br style="clear: left" />
</body>
</html>
css.css代码如下：
#mymenu{
border-top: 7px solid black;
margin: 0;
padding: 0;
}
#mymenu ul{
margin: 0;
margin-left: 15px;
float: left;
padding-left: 10px;
font: 12px 宋体;
background-color: black;
}
* html #mymenu ul{
margin-bottom: 1em;
margin-left: 7px;
}
#mymenu ul li{
display: inline;
}
#mymenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
}
#mymenu ul li a:visited{
color: white;
}
#mymenu ul li a:hover, #mymenu ul li a#selected{
color: white;
background-color: darkred;
}
#mymenu ul li a#rightcorner{
padding-right: 0;
padding-left: 8px;
}
如下图所示：
标签ul与css样式实现菜单特效实例2
<!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=utf-8" />
<title>标签ul与css样式实现菜单特效</title>
<style type="text/css">
*
{
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body
{
background:#ddd;
}
#menu
{
list-style-type: none;
border:1px solid #fff;
margin:50px auto;
width:770px;
height:30px;
overflow:hidden;
background:#000 url(a.png) 0 0 repeat-x;
}
#menu li
{
border-right:1px solid #fff;
float:left;
}
#menu li a
{
display:block;
text-align:center;
color:#fff;
line-height:30px;
padding:0 10px;
}
#menu li a:hover,#menu li.current
{
background:#fff url(b.png) 0 0 repeat-x;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="" title="Index">首页</a></li>
<li><a href="" title="Produces">产品介绍</a></li>
<li><a href="" title="Hot">热门推荐</a></li>
<li><a href="" title="">行业动态</a></li>
<li><a href="" title="">加盟我们</a></li>
<li><a href="" title="">联系我们</a></li>
</ul>
</body>
</html>
看完代码实现后，大家是不是觉得比较简单呀，赶快来DIY吧。
着橙先生上一篇的常见样式属性，可以用在绝大多数的标签中，如div、sapn、p等标签中，这篇继续讲样式属性，不过是一些特殊标签的样式属性。
废话不多说，直接往下看
1、<img src="图片路径" alt="图片的描述说明文字">
Img标签也有橙先生上一篇文章中介绍的常见样式属性，另外如上所见它也有自己特殊的属性src和alt属性，img就是图片标签，那么src就是引入图片的属性，其中输入图片路径地址即可，而alt属性是对图片的描述文字，当图片不能正常显示时，将会显示alt里的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="GZ.png" alt="‘Hi橙先生’是我的公众号名称，请关注一下吧！谢谢" style="width: 400px; height: auto;">
</body>
</html>
如下图所示
图片未正常显示的效果
<ul>
<li>这是ul标签中的一个小LI</li>
</ul>
<ol>
<li>这是ol标签中的一个小li</li>
</ol>
ul和ol的固定样式效果
2、无序列表和有序列表，它们有固定的样式如下图的圆点和序号，大多数情况我们是不需要的，这时我们就可以通过list-style: none;这个样式属性取消它们的固定样式
<ul style="list-style: none;">
<li>这是ul标签中的一个小LI</li>
</ul>
<ol style="list-style: none;">
<li>这是ol标签中的一个小li</li>
</ol>
ul和ol取消固定样式的效果
3、另外在常见的标签中的文章中提到的a标签，其中href属性就是填写链接目标的地方，而target属性定义被链接的文档（即网址）在何处显示，常用的就是“_blank”代表在新窗口中打开被链接文档。默认的是“_self”代表在此窗口中打开被链接文档，其他属性值不常用，就不过多介绍了
<a href="需要跳转到的网址或是文件，如" target="_blank">这个是文字的链接</a>
4、外边距（margin）、内边距（padding）,每个标签元素都可以设定外边距和内边距，外边距可以理解为是盒子以外的部分，而内边距是盒子以内的部分直到内容的地方，看图或是实际操作会比较好理解一些
所有HTML元素可以看作盒子，它包括：边距（margin），边框(border)，填充（padding），和实际内容(content)，如下图
HTML元素可以看作盒子
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
下面的例子中设置div元素的宽度为300px，而实际宽度为450px
<div style="width: 300px;border: 25px solid orange;padding: 25px;margin: 25px;">这是一个div盒子</div>
实际宽度为450px的div
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
margin和padding（内边距和外边距）
margin或是padding只设置一个数值时代表上下左右都是这个数值，以下以margin为例的简写形式，代表的不同含义（padding也是一样的）
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
含义如下：
上外边距为25px (margin-top: 25px;)
右外边距为50px (margin-right: 50px;)
下外边距为75px(margin-bottom: 75px;)
左外边距为100px(margin-left: 100px;)
margin:25px 50px 75px;
含义如下：
上外边距为25px(margin-top: 25px;)
左和右外边距都为50px(margin-right: 50px;和margin-left: 50px)
下外边距为75px(margin-bottom: 75px;)
margin:25px 50px;
含义如下：
上和下外边距都为25px(margin-top: 25px和margin-bottom: 25px;)
左和右外边距都为50px(margin-right: 50px;和margin-left: 50px)
margin:25px;
含义如下：
上、下、左、右外边距都是25px（margin-top: 25px和margin-bottom: 25px;margin-right: 25px;margin-left: 25px）
这部分先讲到这里，后续将会不断的提到这些属性，记得要上手操作哦，动手写一下才能更好的理解！加油！争取后续出个视频，这样可以更形象的讲解。
本文中，我们将讨论无序列表，在制作现代网站和应用程序时，无序列表的发展是不可避免的。
你是否做了很多很多名单的粉丝？我也不是。但是，这里我们不是在谈论家务或购物清单。我们正在讨论制作现代网站和应用程序时不可避免的有序和无序列表。
如前所述，在HTML和CSS中创建列表时，有两种类型：有序和无序。在有序列表的情况下，存在数字。另一方面，在无序列表的情况下，不存在计数，这就是为什么这些类型的列表的通用名称是项目符号列表。
使用列表时，正确格式化文本非常重要。
本文的重点将放在无序列表上，以及子弹的类型和属性。
无序列表使用
<ul></ul>
标签。我们来看一个简单的例子。
HTML
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<ul>
该类型属性可以被用来确定哪个子弹的类型将在列表中被使用。该属性可以由三个不同的值组成：
Circle
Disc
Square
可以在<ul></ul>or <li></li>元素上设置项目符号类型，这意味着您可以在整个列表中设置样式，或者单独设置每个列表项目的样式。
需要知道的是在创建列表时使用哪种字体大小。
为了改变项目符号样式，可以使用两个属性。该列表样式类型属性或列表样式。不同的是，通过使用第二个，我们可以同时更改多个属性。但我们会在稍后讨论。
CSS
.ul { list-style-type: square; }
这里我们看到列表样式设置为square。
借助CSS的强大功能，可以使用自定义图像作为子弹。通常，它是一个简单的小图标。为此，我们使用list-style-image。
CSS
ul { list-style-image: url(‘images/sample-bullet.png’); }
我们也可以通过使用list-style-position属性来设置项目符号的位置。它可以有两个值：外部和内部。
CSS
ul { list-style-position: outside; }
CSS
ul { list-style-position: inside; }
第一张图片显示的是设置为外部的值，第二张图片的值设置为内部。
将值设置为外部时，表示子弹将位于列表项之外。并且，将值设置为内部时，子弹将位于列表项内。
不要忘记给列表一些样式。
如果这种造型不够，可以改变项目符号的颜色。
如前所述，您可以通过设置列表样式来组合多个属性。
CSS
ul { list-style: square inside url("element.gif"); }
通过这个简写，我们同时设置了列表式样式，列表式样位置和列表式样图像。
开发网站和应用程序时经常使用列表，所以您应该始终知道如何设计它们。我希望这个简短的解释能帮助你的项目。
*请认真填写需求信息，我们会在24小时内与您取得联系。
