这篇文章主要讲解了“CSS实现左侧导航代码分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS实现左侧导航代码分享”吧!
& lt; title>测试& lt;/title>rel=
& lt;联系“stylesheet"类型=拔谋?css"href=https://www.yisu.com/zixun/" css/xt_css.css "/>
& lt;/head>
& lt; body>
& lt; !——
小湉
网址:http://xtian。我
时间:2013 - 11
——比;
& lt; div类=皐menu"比;
& lt; dl>
& lt; dt类=皍ser"祝辞& lt; https://www.yisu.com/zixun/a href=" # ">用户管理
& lt; dd> & lt; https://www.yisu.com/zixun/a href=" http://xtian.me ">基本资料
& lt; dd> & lt; https://www.yisu.com/zixun/a href=" http://xtian.me ">邮箱管理
& lt; dd> & lt; https://www.yisu.com/zixun/a href=" http://xtian.me ">密码管理
& lt;/dl>
& lt; dl>
& lt; dt类=癳dit"祝辞& lt; a href=" # "> https://www.yisu.com/zixun/编辑管理
& lt; dd> & lt; https://www.yisu.com/zixun/a href=" http://xtian.me ">发布广告管理
& lt;/dl>
& lt;/div>
& lt;脚本类型=拔谋?javascript"src=https://www.yisu.com/zixun/" js/jquery.min.js ">
& lt;脚本类型=拔谋?javascript"比;
$ (& # 39;。wmenu dl dt # 39;) .click(函数(){
美元(这).toggleClass (& # 39; icotop& # 39;);
(美元).siblings (& # 39; dd # 39;) .toggleClass(& # 39;隐藏# 39;);
});
& lt;/script>
& lt;/body>
& lt;/html>
CSS如下:
代码如下:
/* *
小湉
网址:http://xtian。我
时间:2013 - 11 * *
/
/* *清理边距* */
身体,h2、h3, h4, h5,类推,h7,人力资源,p,引用,dl, dt, dd, ul, ol,李前,形式,自定义字段,传说,按钮,输入,文本区域,th, td{保证金:0 px;填充:0 px;}
/* *默认字体* */
身体,按钮,输入,选择、textarea{字体:12 px/1.5宋体,arial,无衬线;}
h2、h3 h4, h5,类推,h7{字体大小:100%;}
地址、引用、dfn, em, var{字体样式:正常;}
代码、kbd前桑普{字体类型:快递新、快递等宽字体;}{
小字体大小:12 px;}
ul、ol,李{list-style:没有;}
{文字修饰:没有;}
: hvoer{文字修饰:下划线;}
一口{vertical-align: text-top;}
子{vertical-align: text-bottom;}
传奇{颜色:# 000;}
控件组,img{边境:0 px;}
按钮,输入,选择、textarea{字体大小:100%;}
表{border-collapse:崩溃;border-spacing: 0;}
/* *重置* */
。看不见的{能见度:隐藏;}
。noBg{背景:没有!重要;}
。明确{显示:块;高度:0;溢出:隐藏;明确:;}
。clearfix:{后内容:& # 39;\ 20 & # 39;;显示:块;高度:0;明确:;}
。clearfix{*变焦:1;}
/* *页面样式* */
。隐藏的{显示:没有;}
。wmenu dt,。wmenu dt,。wmenu dd盘旋,。currcent{背景:url(. ./图片/w_base_z.png)不再重演;}
。wmenu{: 190像素宽度高度:500 px;;边界:1 px固体# d1d1d1;背景:# f3f3f3;}
。wmenu dl{边界底部:1 px固体# d1d1d1;}
。wmenu dt{高度:41 px;行高:41 px;边界底部:1 px固体# d1d1d1;text-align:左;背景位置:153 px -56 px;}
。wmenu dt{显示:块;padding-left: 48 px;字体大小:16 px;颜色:# 444343;}
。wmenu dt。用户{背景位置:18 px -22 px;}
。wmenu dt。编辑一个{背景位置:18 px 12 px;}
。icotop{边界:没有!重要;背景位置:153 px -90 px !重要;}
。wmenu dd{行高:37 px;}
。wmenu dd{显示:块;padding-left: 50 px;字体大小:14 px;颜色:# 362 c30;}
。wmenu dd a:悬停,a.currcent{显示:块;padding-left: 50 px;颜色:# fff !重要;平铺方式:repeat-x;背景位置:左底;}
感谢各位的阅读,以上就是“CSS实现左侧导航代码分享”的内容了,经过本文的学习后,相信大家对CSS实现左侧导航代码分享这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!
