一级标题代码

一级标题居中，二级标题固定缩进

千次阅读 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>

收起

展开全文

css

如何设置二级标题：当鼠标放到一级标题上二级标题才会显示出来

千次阅读 2019-10-25 09:31:04

在制作网页并进行布局的时候导航栏是不可缺少的，那么如何设计导航栏的一级标题和二级标题呢？下面这篇文章将详细为您介绍。以成都大学教务系统的导航栏为例来实现二级菜单的制作： 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定位的属性值要理解透彻，这样才不会在制作的时候显得很吃力。

收起

展开全文

导航栏一级标题上下箭头切换

千次阅读 2018-09-02 16:09:48

左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果，后台管理系统中有时候会用到，先上效果图。未点击的效果，左侧导航标题箭头是向下的点击后，对应的二级列表显示出来，箭头变为向上二级...

左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果，后台管理系统中有时候会用到，先上效果图。

未点击的效果，左侧导航标题箭头是向下的

点击后，对应的二级列表显示出来，箭头变为向上

二级列表展示隐藏用的是bootstrap, 上下箭头图标用的是Font Awesome，箭头切换用的是jQuery,我是在vue单文件组件中使用。代码如下：

invisible样式是bootstrap自带控制不显示的样式。如果切换没起作用，可能是因为你路由切换导致的，如上把控制切换的代码放在组件activated生命周期函数中就可以了。

收起

展开全文

写了一段改标题样式的代码，一级和二级都更改成功了，三级标题却没有反映，望大神帮看看！
2017-09-06 16:38:21
上面改一级标题和二级标题的代码都成功了，三级的代码else if 没进去不知道怎么回事希望大神帮看看。一、 一级标题---成功更改（一）二级标题---成功更改 3.三级标题---没变化（4）正文
收起
怎么用python_docx提取docx的一级标题，二级标题？
2018-10-21 06:10:18
需要将一份docx文档中文字，按照正文，一级标题，二级标题，页眉，页脚这些分类，将内容提取出来，生成为python对象，这个要怎么搞啊？如果有大佬知道，麻烦可以给我讲一下么？或者点拨我一下也可以？ ...
收起
python word文档提取内容

html鼠标移到一级标题显示二级标题的例子

千次阅读 2016-02-16 16:12:22

メニュー画面 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>

收起

展开全文

1.1.8 怎样在Word的页眉中插入一级标题
千次阅读 2019-01-03 08:37:45
例如：章标题使用标题1样式，节标题使用标题2样式。操作方法：选中章（节）标题，然后点击选项卡中“样式”中的“标题1”（标题2）。 2.设置文档页眉和页脚为奇偶页不同。依次单击：“页面布局”→页面设置旁边的...
收起
我用三天时间开发了一款老少皆宜的国民级游戏，支持播放音乐，现开放完整源代码和注释（建议收藏）！...
万次阅读 多人点赞 2021-04-27 09:53:46
没错，正如标题所言，我使用了三天时间开发了一款国民级游戏，说这款游戏是国民级游戏，而且是老少皆宜的国民级游戏，一点都不为过，支持背景音乐，值得收藏
收起
程序员进阶游戏开发开源项目数据结构和算法
关于python-docx设置段落标题简化代码
千次阅读 2020-08-07 11:17:40
刚开始用python-docx模块的时候，每写一个标题一个段落都是一串代码设置字体行距大小，代码重复太多，后来发现可以直接定义一个设置标题段落的方法，然后直接调用。设置标题 #添加标题 def AddHeadText(text, size)...
收起
网站二级导航标题特效
千次阅读 2014-05-07 19:59:05
很多网站已经不满足于一级标题的展示，可能很多的时候有二级标题，三级标题等等。那么如何设置二级标题以及如何把二级标题做的好看呢。下面的代码中注意： 1.为了让二级标题有渐隐渐现的感觉，用了transition...
收起
js jquery
Word设置二级标题的编号后，第二章下的二级标题的编号仍为1.X
千次阅读 2020-03-02 20:59:08
1. 先双击选择一级标题的标号，并点击多级列表； 2. 然后选择“定义新的多级列表”； 3. 进入“定义新多级列表”窗口，如下图所示，这里便可以开始设置标题1的编号和标题2的编号，即下面的（1）、（2）两步； ...
收起
Word
淘宝店铺标题栏CSS代码
千次阅读 2014-04-25 10:11:10
淘宝想自己装修，基础的代码知识和ps知识还是得懂。首先说下标题栏。标题栏在扶植版是直接高度150px，所以只需要做相应大小的图片上传就可以了。而在专业版，就有了一个导航条。它占据了30px.所以，标题栏...
收起
NavigationController的使用及下一级页面标题的设置
千次阅读 2013-03-14 19:19:50
一个UINavigationcontroller包括 navigation bar,可选的navigation toolbar,RootViewController. 2.导航栈有四个方法 – pushViewController:animated:– popViewControllerAnimated:– popToRoo
收起
1小时学会不打代码制作一个网页精美简历（1）
万次阅读 多人点赞 2021-05-13 22:39:48
## 作者简介 ...15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。系列教程将会在流量降低时转为付费位置，流量多时将不会，各位抓紧时间学习哟~
收起
IVX
实现三级菜单联动综合代码
千次阅读 2017-09-22 09:16:21
实现点击一级菜单弹出二级菜单，选择二级菜单弹出三级菜单的功能 1、html代码您当前选择的商品类别是： 2、css代码 /*选择商品分类标题*/ .selectedSort { padding: 5px 15px; border: 1px solid ...
收起
js SQL java
为何Google、微软、华为将亿级源代码放一个仓库？从全球最大代码管理库说起...
万次阅读 多人点赞 2019-10-20 18:08:02
作者 | 夕颜编辑 | Just出品 | AI 科技大本营（ID:rgznai100）【导读】2017 年，在当时微软的一篇官方博客中，时任微软云开发服务副总裁的 Bri...
收起
历久而新，我的新书《第二行代码》已出版！
万次阅读 多人点赞 2016-11-23 09:49:08
《第二行代码》中的内容我相信很多人都会非常感兴趣，因为里面确实加入了很多很新的知识。略粗概括一下的话，新增内容就包括有Android Studio、Gradle、Material Design、运行时权限、多窗口模式、RecyclerView、...
收起
android as
word目录如何取消某级标题的页码
千次阅读 2019-08-06 10:09:52
自动生成目录后，所有级别的标题都会附加页码，如果用word简单的取消页码功能，则会取消所有页码的显示，此时可以通过修改域代码，以达到不显示某级页码的目的。鼠标光标停在目录处，按Alt+F9，则目录会显示成一行...
收起
word
如何在GitHub上搜索文件中的代码？使用GitHub高级搜索功能
万次阅读 2020-12-05 13:25:14
如果想找到一本书的完整配套代码，而你只有书中部分示例的代码，那么只搜标题肯定是很难搜到的。应该搜索文件中的代码，这样才才能匹配度更高。那么，本文讲解 github 的高级搜索功能。高级搜索入口：...
收起
23款小游戏-Python一行代码就能玩
万次阅读 多人点赞 2021-01-21 08:05:00
给IT入门加星标，提升编程技能free-python-games，一行代码就能进入使用Python开发的小游戏快乐玩耍！安装pipinstallfreegames Python包括随...
收起
jre weex nagios https
如何搭建轻量级架构-代码组织篇
千次阅读 2015-07-26 20:13:03
很多程序员看到标题，估计心里一愣：一个组织代码，有什么可讲的，无非是公司网址倒着写，外加命名规范，最多分模块管理而已！怎么这都能忽悠一篇文章来？代码组织确实是一件简单的事情，但是如果我说的...
收起
项目管理架构单元测试
[csdn markdown]使用摘记一源代码高亮及图片上传和链接
千次阅读 2015-03-12 16:44:27
图片上传上边这是标题行，只需要使用一个#就可以表示，几个表示是几级标题图片上传本地图片上传控件本地图片上传方式 csdn markdown编辑器的整体风格源代码高亮显示插入链接如果想要自动根据标题生成目录，那么...
收起
markdown
Android 自定义标题栏
千次阅读 2015-03-11 20:34:51
开发 Android APP 经常会用到自定义标题栏，而有...一、代码这里先介绍一下流程： 1. 创建一个标题栏布局文件 mytitlebar.xml 2. 在style.xml中创建 mytitlestyle 主题 3. 创建类 CustomTitleBar 4. 在需要自定
收起
android 移动开发
通过一个无人机代码例程学会ardunio
千次阅读 多人点赞 2018-07-27 20:43:36
第一部分：关于接线 1.首选在接收机的任意一个空置插口引出一个vcc和GND，直接连接arduino 5v 和GND，这时你的arduino就和飞机连成了一套系统，可以共同工作了。 2.接下来把接收机供给飞控的四根信号线从飞控上卸...
收起
《第一行代码Android（第3版）》— Android 书籍
千次阅读 2020-11-25 19:30:50
第3版基于Android 10.0对第2版进行了全面更新，不仅将所有知识点都在Android 10.0系统上进行了重新适配，同时加入Kotlin语言的全面讲解，使用Kotlin对全书代码进行重写，而且还介绍了最新系统特性以及Jetpack架构...
收起
Android phoenix Android书籍移动开发
Markdown代码片段
千次阅读 2019-06-14 23:09:41
[//]: # (注释:一级标题) # 一级标题 [//]: # (注释:二级级标题) ## 二级标题 [//]: # (注释:三级标题) ### 三级标题 [//]: # (注释:文档表格) 学号|姓名|身高 -|-|- xxx|xxx|xxx [//]: # (注释:&emsp;缩进一...
收起
一篇文章教会你使用word域代码（seq field code ）
千次阅读 2020-03-12 12:50:41
一、域代码的插入、显式、复制、更新 Ctl+F9会显式出花括号，中间可以填入域代码，一定是使用Ctl+F9显式出的花括号，不能直接自己打出花括号，如下图所示其中seq表示是序列域代码（sequence），list是自己随便...
收起
word field seq
一个一百亿的计算器的实现（java代码实现）
千次阅读 2014-04-03 20:36:33
网上一搜一大把，搜出来的结果几乎都是我很崇敬的张孝祥老师写的这道题的思路，甚至有的直接把原文copy paste过来...虽然标题是一百亿，但实现结果可用于任意大整数。直接上代码。这里只实现了大整数相加。有
收起
点击标题显示相应内容
千次阅读 2018-07-18 13:05:28
点击标题显示相应内容的功能就是将页面分成上下两部分，其中上面部分全都是标题，可能会有多个标题。...同样的节奏，先上预览图，再上代码，然后对代码进行讲解。因为后面会对内容进行讲解，所以...
收起
从前有一个程序员，成天写代码，后来。。。
万次阅读 多人点赞 2016-07-14 20:50:36
每天你都有机会和很多人擦身而过，而你或者对他们一无所知，不过也许有...从前有一个程序员，成天写代码，后来，他屎了1.一门可以靠手艺混饭的专业你好，非常荣幸能够步入改变世界的软件开发行业，接下来我们聊点正经
收起
程序员软件开发技术程序人生

一级标题居中，二级标题固定缩进

如何设置二级标题：当鼠标放到一级标题上二级标题才会显示出来

导航栏一级标题上下箭头切换

写了一段改标题样式的代码，一级和二级都更改成功了，三级标题却没有反映，望大神帮看看！

怎么用python_docx提取docx的一级标题，二级标题？

html鼠标移到一级标题显示二级标题的例子

1.1.8 怎样在Word的页眉中插入一级标题

我用三天时间开发了一款老少皆宜的国民级游戏，支持播放音乐，现开放完整源代码和注释（建议收藏）！...

关于python-docx设置段落标题简化代码

网站二级导航标题特效

Word设置二级标题的编号后，第二章下的二级标题的编号仍为1.X

淘宝店铺标题栏CSS代码

NavigationController的使用及下一级页面标题的设置

1小时学会不打代码制作一个网页精美简历（1）

实现三级菜单联动综合代码

为何Google、微软、华为将亿级源代码放一个仓库？从全球最大代码管理库说起...

历久而新，我的新书《第二行代码》已出版！

word目录如何取消某级标题的页码

如何在GitHub上搜索文件中的代码？使用GitHub高级搜索功能

23款小游戏-Python一行代码就能玩

如何搭建轻量级架构-代码组织篇

[csdn markdown]使用摘记一源代码高亮及图片上传和链接

Android 自定义标题栏

通过一个无人机代码例程学会ardunio

《第一行代码Android（第3版）》— Android 书籍

Markdown代码片段

一篇文章教会你使用word域代码（seq field code ）

一个一百亿的计算器的实现（java代码实现）

点击标题显示相应内容

从前有一个程序员，成天写代码，后来。。。

一级标题代码