返回
基础
分类

因为普通状态下菜单隐藏了,当然有的会这样来写list-style-type

日期: 2020-03-16 15:33 浏览次数 : 174

 

先认知一下冬日列表(ul卡塔尔(قطر‎,有种类表(ol卡塔尔国和概念列表(dl卡塔尔(قطر‎:

  • ul栗子:
    <ul> <li>……</li> <li>……</li> </ul>
    表现为:

<li>……</li><li>……</li></ul>

  • ol栗子:
    <ol> <li>……</li> <li>……</li> <li>……</li> </ol>
    表现为:
    <ol><li>……</li><li>……</li><li>……</li></ol>

  • dl栗子:
    <dl class="mydl"> <dt>鱼</dt> <dd>各种鱼类,除了刺多的鲤鱼</dd> <dt>虾</dt> <dd>基围虾,龙虾之类的海虾</dd> <dt>蟹</dt> <dd>当然是阳澄湖大闸蟹好吃啦</dd> </dl>
    表现为:

<dl>
<dt>鱼</dt>
<dd>种种鱼儿,除了刺多的红鱼</dd>
<dt>虾</dt>
<dd>基围虾,明虾之类的海虾</dd>
<dt>蟹</dt>
<dd>当然是阳澄湖淡水蟹好吃啊</dd>
</dl>

简短的单级下拉菜单完成,级下拉菜单

1、在CSS中写入代码。找到相关性的CSS,在。.li和.ul下写入list-sytle:none;当然某些会这么来写list-style-type:none, 这种写法特别是在一些CMS中最遍布。

区别:

  • <ul>是项目列表,<li>必赢手机登录网址 ,做列表项,各个的标志暗许是小黑圆点;
    <ol>是数码列表,<li>做列表项,每一种的标识默认是数字;
    <li>是 list item 即列表项,但列表有很二种,所以外面得有 <ul> 或者 <ol> 用来差异严节列表(小点点)和有类别表(1,2,3...)。

  • ul与ol前的标识是能够修改的。只须求改过它们的type值。
    ul的type属性有:disc—实心圆(暗许)、circle—空心圆、square—实心方块
    ol的type属性有:1—数字(暗中同意)、a—小写字母、A—大写字母、i—小写希腊共和国字母、I—大写希腊共和国字母。
    经过CSS能够在将它们前的标识改为图片;

  • 概念列表定义一多级项目,同临时间定义项指标描述
    还好定义列表有了品种描述,所以和冬日列表差距就在那。

效率预览

那边用纯CSS实现一个大约的单级下拉菜单,鼠标划过菜单题目时显得下拉菜单。

2、在连锁的页面找到head部分写入上边包车型客车代码

<ul> <li>代码的格式化

  • 接收CSS格式化列表符:
    ul li{ list-style-type:none; }
  • 将列表符换来图像:
    ul li{ list-style-type:none; list-style-image: url(/blogicon.gif); }
  • 左对齐:
    ul{ list-style-type:none; margin:0px; }
  • 给列表加背景观:
    ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; }
  • 给列表加MOUSEOVE中华V背景变色效果:
    ul{ list-style-type: none; margin:0px; }
    ul li a{ display:block; width: 100%; background:#ccc; }
    ul li a:hover{ background:#999; }
    //display:block;这一行应当要加的,那样技能块状展现!
  • <li>中的成分水平排列,关键FLOAT:LEFT:
    ul{ list-style-type:none; width:100%; }
    ul li{ width:80px; float:left; }

基本思路

在菜单处于光标之下时体现菜单,其他时候隐瞒。那个进度首先得想到 :hover 伪类来落实,不过平昔的利用伪类还相当,因为常常来讲状态下菜单隐蔽了,无法触发 :hover ,可是下拉菜单隐敝了不是还或许有菜单题目么,菜单标题处于光标之下时展现菜单就能够展现出来了,可是鼠标移到菜单上的时候下拉菜单又会一无所获,此时想到给下拉菜单也增进 :hover 展现自己,但是万一脑洞大开,要做分体菜单如何是好,此时把它放进叁个容器呗,利用标签的嵌套关系,去给容器的 :hover 伪类的派生成分写样式就满门化解啦。

<style type="text/css">

ul ol dl分别在怎么样情状下用?

  • 逐步列表在列表项目对各种有要求的时候利用;
  • 冬天列表在列表项目对种种没必要时接收,能够是任何一密密层层项目;
  • 概念列表在对品种有描述要求时行使。

上HTML结构

 1 <ul id="dropdown-wrapper">
 2 <li>
 3     Rewrite
 4     <ul class="dropdown-sublist">
 5         <li>Kotarou</li>
 6         <li>Kotori</li>
 7         <li>Akane</li>
 8         <li>Kagari</li>
 9         <li>Lucia</li>
10         <li>Shizuru</li>
11         <li>Chihaya</li>
12     </ul>
13 </li>
14 <li>
15     Clannad
16     <ul class="dropdown-sublist">
17         <li>Tomoya</li>
18         <li>Nagisa</li>
19         <li>Ushio</li>
20         <li>Ryou</li>
21         <li>Kyou</li>
22         <li>Yukine</li>
23         <li>Fuko</li>
24         <li>Tomoyo</li>
25         <li>Kotomi</li>
26     </ul>
27 </li>
28 <li>
29     Air
30     <ul class="dropdown-sublist">
31         <li>Yukito</li>
32         <li>Misuzu</li>
33         <li>Kano</li>
34         <li>Minagi</li>
35     </ul>
36 </li>
37 </ul>

 

list-style:none;

CSS

得以达成的重大就在此些打惊讶号的不成方圆,写好展现与不出示时七个情状的下拉菜单的品质。同有时候加多了部分渐变甚至运动让菜单彰显尤其自然。

 1 body{ margin:0; padding:0;
 2 
 3     font-size:18px;
 4 
 5     background-color:#aaa;
 6 }
 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;}
 8 #dropdown-wrapper{
 9     display:block;
10 
11     margin:4em 1em 0 1em;
12 }
13 #dropdown-wrapper li{
14     /*!!!!!!!!!!!!*/
15     display:inline-table;
16     padding:0;
17     margin:0;
18 
19     position:relative;
20 
21     width:10em;
22 
23     background:#fff;
24 
25      -webkit-transition:all ease-in-out 0.3s;
26     transition:all ease-in-out 0.3s;
27 }
28 #dropdown-wrapper span{
29     display:block;
30     padding:0.4em 1em;
31     width:10em;
32     color:#333;
33 }
34 #dropdown-wrapper span:after{
35     display:inline-block;
36     float:right;
37     content:">";
38 
39     -webkit-transform:rotate(0deg);
40     transform:rotate(0deg);/*为了渐变*/
41 
42      -webkit-transition:all ease-in-out 0.3s;
43     transition:all ease-in-out 0.3s;
44 }
45 #dropdown-wrapper li:hover span:after{
46     -webkit-transform:rotate(90deg);
47     transform:rotate(90deg);/*划过的时候那个右箭头旋转90度,变成朝下的啦*/
48 }
49 #dropdown-wrapper li ul{
50     /*!!!!!!!!!!!!*/
51     display:block;
52     position:absolute;
53 
54     padding:0;
55     margin:0;
56 
57     height:0;/*平时的时候隐藏下拉列表*/
58     line-height:0;/*0行高,这个的作用是用来制造一个文字展开的效果*/
59     overflow:hidden;
60 
61     color:#555;
62 
63     opacity:0;
64 
65     -webkit-transform:translateY(-1em);
66     transform: translateY(-1em);
67 
68      -webkit-transition:all ease-in-out 0.3s;
69     transition:all ease-in-out 0.3s;
70 }
71 #dropdown-wrapper li ul>li{
72     padding:0.7em 1em;
73 
74 }
75 #dropdown-wrapper li:hover ul{
76     /*!!!!!!!!!!!!*/
77     /*这是容器处于光标下时的下拉列表的状态,
78      *这个时候就是要做的就是显示下拉菜单咯
79     */
80     opacity:1;
81     height:auto;
82     line-height:1em;
83 
84     -webkit-transform: translaY(0);
85     transform: translateY(0);
86 }
87 #dropdown-wrapper li:hover span{
88     color:rgb(0,173,238);
89 }
90 #dropdown-wrapper li:hover ul>li:hover{
91     background:rgb(0,173,238);
92     color:#eee;
93 }

</style>

支援写个大约下拉菜单代码

已由此IE6,Opera测量检验,把下边代码复制粘贴到文本文件,改后缀为.html,双击就能够看出效率,运维时要能上网,除非你把jquery-1.5.2.min.js下载到本地

<html xmlns="www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{background:#000;margin:0;padding:0;}
ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:"宋体";color:#999;text-decoration:none;text-

align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#因为普通状态下菜单隐藏了,当然有的会这样来写list-style-type。eee;width:100%;}
#nav a,#nav a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;font

-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;border-

right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}

hr{width:100%;height:0px;border:none;border-top:1px solid #fff;overflow:hidden;font-

size:1px;display:block;clear:both;
line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}

#cbox{position:absolute;top:32px;left:0;}
#cbox ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul......余下全文>>  

3、在li,ul内加入list-style。如<ul style="list-style-type:none><li><a herf="; /ul> 当然这种是很麻烦的了。

简单的说三级下拉菜单的CSS代码最佳有DIV的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级dropdown弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul ......余下全文>>  

效果预览 这里用纯CSS完结三个大致的单级下拉菜单,鼠标划过菜单题目时展现下拉菜单。 基本思路...

最简易的正是首先种了,通过CSS来决定,那一个本来会有不利的作用了。

这两种办法都以经过安装list-style:none来安装的,有的是会用list-style-type,下边大家来看一看它的属性.

none不行使项目的记

disc实心圆,默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写休斯敦数字

lower-阿尔法小写斯拉维尼亚语字母

upper-阿尔法大写西班牙语字母

这一个都得以来代替上文中的none,想要什么样的都会有二个对应的应和。

 

 A卡塔尔(قطر‎.运用CSS格式化列表符: ul li{

list-style-type:none;

}

B卡塔尔.假诺你想将列表符换到图像,则: ul li{

list-style-type:none;

list-style-image: url(images/icon.gif);

}

C卡塔尔国.为了左对齐,能够用如下代码: ul{

list-style-type:none;

margin:0px;

}

D卡塔尔.如若想给列表加背景象,能够用如下代码: ul{

list-style-type: none;

margin:0px;

}

ul li{

background:#CCC;

}

E卡塔尔(قطر‎.假如想给列表加MOUSEOVETiggo背景变色效果,能够用如下代码: ul{ list-style-type: none; margin:0px; }

ul li a{ display:block; width: 100%; background:#ccc; }

ul li a:hover{ background:#999; }表达:display:block;这一行应当要加的,那样手艺块状展现!

 

F卡塔尔.LI中的成分水平排列,关键FLOAT:LEFT: ul{

list-style-type:none;

width:100%;

}

转: