1. <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%
  3.     String path = request.getContextPath();
  4.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  11. <title>Insert title here</title>
  12. <script src="js/common/jquery-1.9.1.min.js" type="text/javascript"></script>
  13. <style type="text/css">
  14.     body{
  15.         margin: 0px;
  16.         padding: 0px;
  17.         background:url(../img/leftbj.gif) repeat-y;
  18.     }
  19.     ul li{
  20.         list-style: none;
  21.     }
  22.     #leftDiv{
  23.         width: 100%;
  24.         overflow:hidden;
  25.         display: block;
  26.         height: 100%;
  27.         margin-top: 32px;
  28.     }
  29.     #leftDiv ul li span{
  30.         font-size: 14px;
  31.         background: url(../img/navbj01.jpg) no-repeat;
  32.         height: 28px;
  33.         display: inline-block;
  34.         line-height: 28px;
  35.         width: 100%;
  36.         padding-left: 25px;
  37.         color:white;
  38.     }
  39.     #leftDiv ul li{
  40.         margin-left: -40px;
  41.         width: 207px;
  42.     }
  43.     #leftDiv ul li ul li{
  44.         line-height: 28px;
  45.         height: 28px;
  46.         width: 207px;
  47.         background-color: #336f9c;
  48.         border-bottom: 1px solid #4183b4;
  49.     }
  50.     #leftDiv ul li ul li a{
  51.         text-decoration:none;
  52.         cursor:pointer;
  53.         color: white;
  54.         font-size: 13px;
  55.         padding-left: 50px;
  56.     }
  57.     #leftDiv ul li ul li a:hover{
  58.         text-decoration:underline;
  59.     }
  60. </style>
  61. <script type="text/javascript">
  62.     $(function(){
  63.         $("#leftDiv>ul>li>span").click(function(){
  64.             $(this).siblings("ul").toggle();
  65.         });
  66.     });
  67. </script>
  68. </head>
  69. <body>
  70.     <div id="leftDiv">
  71.         <ul>
  72.             <li>
  73.                 <span>统计</span>
  74.                 <ul>
  75.                     <li><a href="customer/sum.do" target="mainFrame">统计</a></li>
  76.                 </ul>
  77.             </li>
  78.             <li>
  79.                 <span>数据维护</span>
  80.                 <ul>
  81.                     <li><a href="admin/list.do" target="mainFrame">管理†</a></li>
  82.                 </ul>
  83.             </li>
  84.         </ul>
  85.     </div>
  86. </body>
  87. </html>

上述通过设置span元素的行高、高度、宽度和 display 的inline-block可以让其填充整个span区间，这对于布局中的对齐（水平或垂直）很有作用，不用依赖table布局。

css块元素的 display 属性 inline-block 的应用的更多相关文章

  1. 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

    块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...

  2. 块级元素、行内元素、display属性

    块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...

  3. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  4. CSS块元素与内联元素（转）

    为什么<a><span>这种标签定义width,height等CSS属性时会发现完全不生效? 因为它们不是容器,它们是内联元素,不是块元素 CSS 块元素与内联元素 关键字: ...

  5. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  6. 实现span设置宽度（行内元素本来不支持调宽度高度这些样式）（变成行内块元素：display:inline-block;）

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  7. CSS学习笔记：display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  8. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  9. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

随机推荐

  1. VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/8191036.html 这里不知道会不会有人是真的新手 新新手 不知道怎么 如何建立一个MFC ...

  2. AutoMagic自动化测试平台简介

    PS:给想做自动化平台同学一点思路. AutoMagic 是一个基于WebUI的自动化管理平台.为什么叫AutoMagic呢?因为自动化(Automation)在执行起来的时候是一个很神奇的事情,它可 ...

  3. Ubuntu系统修改Python软链接

    1.查看使用的版本 python --version 2.查看当前所使用版本的位置 which python 3.如果第二步结果是 /usr/bin/python 则直接删除即可 sudo rm /u ...

  4. 安装 VS 2015 Update 2 + Windows SDK Tools 1.3.1 + Windows SDK 10586.212 后提示找不到 10586.0 SDK 问题的解决方法

    将 Visual Studio 2015 升级到 Update 2,并安装 Windows SDK Tools 1.3.1 和 Windows SDK 10586.212 后,有可能造成原本已安装的 ...

  5. linq之Capacity（转载）

    出处:博客园 作者:mumuliang 连接:http://www.cnblogs.com/mumuliang/p/3914425.html Capacity 在.NET中List的容量应该只是受到硬 ...

  6. HTML表格相关元素

    <table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义 ...

  7. 【代码笔记】XML深入学习：DTD约束与DTD语法(1)

    2015-12-27 文件名    student.xml <?xml version="1.0" encoding="GB2312" standalon ...

  8. html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解？

    今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在 ...

  9. arcgis server 10.1 发布动态图层展示海量及频繁更新的数据步骤

    Arcgis server  发布动态图层及调用动态图层 做这个动态图层功能的原由是 有一个30万的数据需要通过arcgis GP工具转成shp然后渲染加载进地图,原来的做法是遍历生成shp面要素,读 ...

  10. 树莓派3(Raspberry pi 3)刷OpenWrt

    原文在 https://my.oschina.net/wangandi/blog/687389 1.下载镜像,这个lede好像是openwrt的一个分支,openwrt本身还没有支持pi3,https ...