Ul li 竖排
<!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>CSS练习</title> <style type="text/css">
<style type="text/css">
/*--------------------------公共样式------------------*/
.com-left
{
float: left;
}
/*公用分割线 宽度自行指定*/
.com_divhr_solid
{
margin: 10px;
height: 1px;
border-top: 1px solid #D2CFCA;
margin-top: 0px;
}
/*公用分割线虚线 宽度自行指定*/
.com_div_dashedhr
{
margin: 10px;
height: 1px;
border-top: 1px dashed #D2CFCA;
margin-top: 0px;
} .align-center
{
margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
width: 1024px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
margin-top: 70px;
margin-bottom: 10px; /*text-align:center; 文字等内容居中 */
}
.nav
{
width: 180px; /* 控制导航总宽度 */
}
/* 取消列表样式，内外补间为零 */
.nav ul
{
list-style: none;
margin: 0;
padding: 0;
}
/* 竖排：控制导航高度*/
.nav li
{
height: 35px;
line-height: 35px; /* 文字垂直居中 指定行高为li高度 自动垂直居中 */
}
/* 鼠标放上效果 */ .nav a:hover
{
background-color: #007ACC;
color: #FFFFFF;
cursor: hand;
} /* 将a标签区块化就可以指定高度 */
.nav a
{
display: block;
height: 100%;
text-decoration: none; /* 取消a标签下划线 */
background-color: #fff;
color: #000;
text-align: left; /* 文字水平居中显示 */
}
.nav a span
{
text-align: left; /* 文字水平居中显示 */
margin-left: 20px;
font-size: 14px;
font-family: '微软雅黑';
}
/*-点击后选中-*/
li.current a
{
background-color: #007ACC;
color: #FFFFFF;
cursor: hand;
}
</style>
</head> <script type="text/javascript">
$(function () {
$("#ulMenu> li").click(function () {
$("#ulMenu> li.current").attr("class", "")
$(this).attr("class", "current")
/*-设置要显示的DIV链接-*/
// $("div[name='" + div.attr('id') + "']").show();
});
});
</script> <body>
<div class="align-center">
<div class="nav">
<ul id="ulMenu">
<li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航1</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航2</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航3</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航4</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航5</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航6</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航7</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航8</span></a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>导航9</span></a></li>
</ul>
</div>
<div>
</div>
</div>
</body>
</html>
相关推荐
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
