精华内容
下载资源
问答
  • 如何设置导航栏中的二级标题 在制作网页并进行布局的时候导航栏是不可缺少的,那么如何设计导航栏的一级标题和二级标题呢?下面这篇文章将详细为您介绍。 以成都大学教务系统的导航栏为例来实现二级菜单的制作: 1....

    如何设置导航栏中的二级标题
    在制作网页并进行布局的时候导航栏是不可缺少的,那么如何设计导航栏的一级标题和二级标题呢?下面这篇文章将详细为您介绍。

    以成都大学教务系统的导航栏为例来实现二级菜单的制作:
    1.这是我们要制作的一级导航栏:
    这
    2.这是我们要制作的二级导航栏:在这里插入图片描述
    下面是一级菜单和二级菜单的准备代码:

     <ul id="menu">
                   <li>
                       <a href="css和div布局.html">本站首页</a>
                    </li>
                   <li>
                       <a href="http://jw.cdu.edu.cn/others/organs.aspx">机构设置</a>
                    </li>
                   <li>
                       <a href=""> 管理文件</a>
                       <ul>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=40">教学建设</a></li>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=19">综合管理</a></li>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=37">质量评估</a></li>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=35">实践教学</a></li>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=36">招生考试</a></li>
                           <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=31">教学运行</a></li>
                       </ul>
                    </li>
                    <li>
                       <a href=""> 办事流程</a>
                      <ul>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=11">教学建设</a></li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=43"> 综合管理</a></li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=42">质量评估</a></li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=20">实践教学</a></li>
                        <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=17">招生考试</a></li>
                      </ul>
                    </li>
                    <li>
                        <a href="">资料下载</a>
                        <ul>
                            <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=1">常用表格</a></li>
                            <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=2">常用工具</a></li>
                            <li><a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=45">教学大纲</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="http://zhaosheng.cdu.edu.cn/">招生咨询</a>
                    </li>
                    <li>
                        <a href="http://kcxt.cdu.edu.cn/eol/homepage/common/index_jpk.jsp">本科教学</a>
                    </li>
                    <li>
                        <a href="http://jw.cdu.edu.cn/Infors/Business.aspx?classID=27">学科竞赛</a>
                    </li>
               </ul>
    

    然后我们来设置相应的CSS样式:

                 a{/*将所有超链接的下划线去掉*/
                    text-decoration: none;
                }
                a:link{/*统一设置所有超链接未被点击是的颜色*/
                    color:#050000;
                }
                #menu{  /*设置菜单栏相同的属性*/
                    height:32px;
                    font-family: Arial, Helvetica, sans-serif;
                    margin:0px;
                    padding:0px;
                }
                #menu>li{/*设置一级菜单浮动,让所有一级菜单显示在一行上 */
                    float:left;
                    width: 150px;
                }
                #menu li,#menu ul{/* 去掉一级菜单和二级菜单的项目符号:即消除maring 和padding */
                    margin:0px;
                    padding:0px;
                    list-style-type: none;
                }
                  #menu>li>a{/* 设置一级菜单项 */
                    display: block;
                    font-size:20px;
                    background-color:hsl(9, 83%, 31%);
                    color:azure;
                    padding:8px 20px;
                    text-align: center;
                    margin:1px;
                }
                #menu>li>a:hover{/* 一级菜单鼠标放上去的变化 */
                    background-color: tomato;
                    color:white;
                }
                 #menu li ul li a{ /* 二级菜单 */
                    font-size:16px;/*通常二级菜单字体要比一级菜单小一些*/
                    background-color: rgb(148, 3, 11);
                    color:aliceblue;
                    margin-right: 1px;
                    padding:5px;
                    display:block;
                }
                #menu ul{/* 隐藏二级菜单!!!很核心的一步操作 */
                    display: none;/*将二级菜单的disp属性设置为none,使二级菜单隐藏起来,很重要的一步操作!!!*/
                    width: 149px;
                    position:absolute;  /*脱离标准流,后面的盒子当它不存在,不会将下面的内容挤开*/
                }
                #menu>li:hover ul{/*显示二级子菜单  */
                     display: block;
                }
                /* 鼠标放到二级菜单上的变化效果 */
                #menu li ul a:hover{
                    background-color: #c90707;
                }
    

    按照上面来设计就可得到隐藏二级菜单和鼠标放上去才显示二级菜单的效果。在这里特别要提醒二级菜单的隐藏和显示操作的属性设置一定要理解是怎么实现的。

    最后来总结一下:1.重点归纳:制作二级菜单的核心主要是要将二级菜单进行隐藏和显示,隐藏时要用到display属性,并将其值设置为none,另外一个重点便是使用position属性,将其属性值设置为absolute,让其脱离标准流,这样才不会在显示二级菜单时导致其他盒子被挤到下方去;显示操作需注意是,不是在#menu>li:hover{}下显示,这样是不会显示二级菜单的,还要在后面加上二级菜单 ul 也就是说鼠标放上去控制的是二级菜单的显示即 #menu>li:hover ul{}。2.学习心得:刚开始学习制作二级菜单的时候在显示二级菜单的时候没想到要控制二级菜单显示的操作,这应该是刚开始学习制作菜单栏的一个通病,希望这次在CSDN总结发出来可以帮组到其他刚开始的人理解,同时想要学好菜单栏的制作对display的几个属性值和position定位的属性值要理解透彻,这样才不会在制作的时候显得很吃力。

    展开全文
  • メニュー画面 div.menu-tree:hover div.top-menu { } div.sub-menu { display: none; } div.menu-tree:hover div.sub-menu { height: 24px; display:block; } div.sub-menu:hover {
    <!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>メニュー画面</title>
            <style type="text/css">
                div.menu-tree:hover div.top-menu {
                }
    
    div.sub-menu {
    	display: none;
    }
    div.menu-tree:hover div.sub-menu {
    	height: 24px;
    	display:block;
    }
    div.sub-menu:hover {
    	background: #ffc77a;
    }
            </style>
    		
        </head>
        <body>
            <div class="menu-tree">
    								<div class="top-menu">品目新規登録</div>
    								<div class="sub-menu">
    									<span class="button-link" 
    										  οnclick="location.href='layout-step-1.html'">
    										品目新規登録(単品)
    										<i class="fa fa-chevron-right"></i>
    									</span>
    								</div>
    								<div class="sub-menu">
    									<span class="button-link" 
    										  οnclick="location.href='layout-main-withstep-1.html'">
    										品目新規登録(Excel登録)
    										<i class="fa fa-chevron-right"></i>
    									</span>
    								</div>
    							</div>
    
        </body>
    </html>

    展开全文
  • word文档中形成目录后 word页面上都有显示,但如图所示左边的导航上没有显示目录的二级级标题,怎么解决?![图片](https://img-ask.csdn.net/upload/201605/26/1464224236_955413.png)
  • 一级标题居中,二级标题固定缩进

    千次阅读 2017-07-27 11:25:02
    一级、二级标题为自定义长度,且一级标题居中,二级标题在一级标题的基础上缩进3个汉字的距离。

    技术群里别人问到的,正好空闲实现了一下效果,并记下笔记。

    效果:一级、二级标题为自定义长度,且一级标题居中,二级标题在一级标题的基础上缩进3个汉字的距离。

    如图:


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			body,html{
    				width: 100%;
    				height:100%;
    			}
    			.oDiv{
    				/*父元素div宽度不能写成固定宽*/
    				margin:0 auto;
    			}
    			.h1{
    				font-size:16px;
    			}
    			.h2{
    				font-size:14px;
    				white-space: nowrap;/*强制文本不换行*/
    				margin-left:48px;/*缩进3个汉字,一级标题字号font-size*3;text-indent不生效所以用margin-left */
    			}
    		</style>
    		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(document).ready(function(){
    				var h1 = $('.h1').width();//获取一级标题的宽度
    				$('.oDiv').css("width",h1);//div有了宽度之后才能用margin:0 auto;
    			})
    		</script>
    	</head>
    	<body>
    		<div class="oDiv">
    			<span class="h1">有朋自远方来,不亦乐乎</span>
    			<span class="h2">--我要上王者我要上王者我要上王者我要上王者我要上王者我要上王者</span>
    		</div>
    	</body>
    </html>


    展开全文
  • Word二级标题自动编号,本来应该是2.1,可是却变成1.3,怎么办?就如下图所示。 1. 先双击选择一级标题的标号,并点击多级列表; 2. 然后选择“定义新的多级列表”; 3. 进入“定义新多级列表”窗口,如下图...

    Word二级标题自动编号,本来应该是2.1,可是却变成1.3,怎么办?就如下图所示。

    1.  先双击选择一级标题的标号,并点击多级列表

    2.  然后选择“定义新的多级列表”;

    3.  进入“定义新多级列表”窗口,如下图所示,这里便可以开始设置标题1的编号和标题2的编号,即下面的(1)、(2)两步;

    注意:

    这里(1)、(2)两步必须在同一次的“定义新多级列表窗口”中完成,这是关键!!!

    如果第一次打开一个“定义新多级列表窗口”设置标题1(一级标题)的编号后关闭窗口,然后再次打开一个新的“定义新多级列表窗口”设置标题2(二级标题)的编号,就会出现上面的情况:第二章 后面的二级标题的编号为1.3  1.4,而不是 2.1   2.2的情况!!!

    (1)设置标题1的编号

    (2)设置标题2的编号

     

    经过上面的操作之后,二级标题编号开头的第一个数字是当前一级标题的编号了,即第1章   1.1   1.2  ,而第2章   2.1   2.2,如下图所示

    展开全文
  • 网站二级导航标题特效

    千次阅读 2014-05-07 19:59:05
    很多网站已经不满足于一级标题的展示,可能很多的时候有二级标题,三级标题等等。 那么如何设置二级标题以及如何把二级标题做的好看呢。 下面的代码中注意: 1.为了让二级标题有渐隐渐现的感觉,用了transition...
  • jqgrid设置二级表头后,表头和下面出现错位,表头每个单元格要比下面少1px。表格列越多差的越多,但是在谷歌浏览器出现这种bug,火狐和IE没有问题。 ![图片说明]...
  • dede - 一级二级列表标题和内容显示

    千次阅读 2016-09-05 17:43:50
    先循环一级列表,后循环二级列表: {dede:channelartlist typeid='50,55,31' row='4' currentstyle='selected' } {dede:field name='typename'/} ...
  • 二级标题上点击“定义新的多级列表”: 包含的级别编号来自选择级别1,此时输入的编号格式会显示“四”,再勾选右侧“正规形式编号”,“四”变为“4”。 转载于:...
  • 如何设置Word2003的一级与二级标题 1.选中文章中的所有一级标题; 2.在“格式”工具栏的左端,“样式”列表中单击“标题1”。 仿照步骤1、2设置二、三级标题格式为标题2、标题3。 word2003设置了大纲级别后自动...
  • 修改之前图: ![图片说明](https://img-ask.csdn.net/upload/201810/09/1539048078_872020.png) 修改之后的效果图: ![图片说明](https://img-ask.csdn.net/upload/201810/09/1539048105_951455.png)
  • word2013中多级编号变成黑块 ... 按下ctrl+shift+s,弹出页面,选择重新应用。 这个时候可以看到我们的标题已经显示出来了,等等,还没完… ...点击下方“确定”选项,可以明显的看到二级标题的变化。到此完成。 ...
  •  可是在Datagrid中显示二级对象时,死活也显示不了,然后找度娘发现,Easyui根本就不支持点连接的属性,目前的解决方法是使用formatter 如: JSON数据源:[{id:1, title:'标题一', manager:{id:1,
  • 1、操作示例——鼠标悬停显示二级菜单,再点击二级菜单或下拉列表 # encoding=utf-8 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains browser = webdriver...
  • 这个式样与“正规形式编号”有关,直接操作,即可调整效果
  • 织梦DedeCMS v5.7 如何实现导航条悬停显示二级栏目下拉菜单 首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <!-- //二级子栏目下拉菜单 ,可随意放置于页面底部 --...
  • http://jingyan.baidu.com/article/e9fb46e15d01517520f76673.html 转载于:https://blog.51cto.com/adcit/1965561
  • ``` 这个里面是一级分类 型号</p><ul class="ul2">这个里面放的是二级的分类 ``` 想问的就是如何能够控制二级分类的显示问题,
  • !...点击我的收藏,二级菜单可以显示,... 2,点击二级菜单的li,也可以实现显示和隐藏。 正常情况应该是只有点击“我的收藏”,才会实现显示和隐藏。 求大神解答。。应该怎么写啊。。如果有现成的代码更好了,,感激不尽
  • 解决办法: 1、将光标移至黑块的右侧,之后按键盘左方向键,此时黑块变为灰色,即为“选中”状态。...完成以上操作之后,你会发现你的三级标题成功出现了! 转载于:https://www.cnblogs.com/AC-Milan201...
  • import javax.swing.*; import java.awt.*; public class Java_3{  static final int WIDTH=300;  static final int HEIGHT=200;  public static void main(String[] args){  //*********Found**********...
  • 鼠标滑过,二级菜单显示

    千次阅读 2019-04-02 13:30:45
    鼠标移动显示二级菜单,鼠标移出隐藏二级菜单。 $(function(){ // 页面加载完成 $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this)....
  • 菜单(三)二级菜单和标题栏菜单

    千次阅读 2015-02-22 17:21:52
    import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu;...这个工程在模拟器上调试正常,在真机上调试二级菜单打不开,不知道是不是手机问题
  • 导航栏一级标题上下箭头切换

    千次阅读 2018-09-02 16:09:48
    左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果,后台管理系统中有时候会用到,先上效果图。 未点击的效果,左侧导航标题箭头是向下的 点击后,对应的二级列表显示出来,箭头变为向上 二级...
  • 点击标题显示相应内容

    千次阅读 2018-07-18 13:05:28
    点击标题显示相应内容的功能就是将页面分成上下两部分,其中上面部分全都是标题,可能会有多个标题。下面部分就是标题的内容部分,根据标题部分的选中情况展示对应标题的内容。因为本功能是静态页面,所以实现原理...
  • 出于SEO等的考虑,我们有时需要改动dedecms栏目页的title。...lt;title&gt;{dede:field.title/}-{dede:global.cfg_webname/}&...其中{dede:field.title/}在栏目页将显示为栏目名称;而{dede:global n...
  • 重点是逻辑,理解了就好了。先直接上html5代码:<!doctype html> 鼠标划过一级菜单,有二级菜单的就显示 <script src="../js/jquery-2.2.3.js"></script> $(function() { $("li:h
  • LaTeX 中使用三级标题

    千次阅读 2017-09-17 19:54:00
    需要在导言区加入命令:\setcounter{secnumdepth}{4} 而后: \section{一级标题} ...\subsection{二级标题} \subsubsection{三级标题} 转载于:https://www.cnblogs.com/shenxiaolin/p/7536838.html...
  • TP5.1 layui 分类二级列表(同页显示)

    千次阅读 2018-06-29 14:40:10
    //2 $res2 = Db::name('product_category')->where("pid=".$v['id'])->select(); $data2=""; foreach($res2 as $k2 => $v2){ $data2[$k2]['id']=$v2['id']; $data2[$k2]['title']=$...
  • 用inoic写单页面应用,有一个默认的返回按钮,可是点击到二级界面返回按钮却不出现,或者出现之后点击back按钮没有反应,不返回到上一级页面,是因为在index.html 中定义按钮,二级页面和一级页面不是同一个中,不能...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,505
精华内容 51,402
关键字:

如何只显示二级标题