html导航右侧弹出层,CSS导航栏及弹窗⽰例代码最近整理了CSS导航栏及弹窗，具体如下：
CSS导航
先来看下效果：
Insert your title
body{
font-size:12px;
}
#discuss{
width:990px;
margin:0 auto;
}
#mt{
/*⾼度：30px，边框，上边框，背景颜⾊*/
height:30px;
border:1px solid #ddd;
border-top:2px solid #9d9d9d;
html导航源码background:#F7F7F7;
}
#discuss-content{
border-bottom:1px solid #ddd;
padding-bottom:2px;
}
#discuss-datas{
width:990px;
}
#discuss-datas thead td{
/*加粗，上下内边距，下边框，⽂本居中对齐*/
font-weight:bold;
padding:5px 0;
border-bottom:1px solid #ddd;
text-align:center;
color:#666;
}
/*处理 .col1 的样式 (每⾏第⼀列的效果)*/
#l1{
width:620px;
text-align:left;
}
/*内容⾏中所有的列*/
#discuss-datas tbody td{
/*虚线下边框，上下内边距，⽂本⽔平居中对齐，⽂本颜⾊*/ border-bottom:1px dotted #ddd;
padding:5px 0;
text-align:center;
color:#9c9a9c;
}
/*处理所有超链接*/
#discuss a{
color:#005aa0;
text-decoration:none;
}
#discuss a:hover{
text-decoration:underline;
}
/*晒，论 两幅图*/
#discuss-datas b{
/*宽度，⾼度，背景属性*/
padding-left:21px;
padding-bottom:2px;
padding-top:3px;
background-image:url(../Images/iconlist_1.png); background-repeat:no-repeat;
margin-right:5px;
}
b.shai{
background-position:-110px -220px;
}
b.lun{
background-position:-152px -220px;
}
/*2017-01-09 浮动练习*/
#mt a{
float:left;
width:100px;
height:30px;
text-align:center;
line-height:30px;
}
#mt a.current{
/*左右上边框，背景颜⾊，⽂本颜⾊*/
border:1px solid #ddd;
border-bottom:none;
border-top:2px solid #E4393C;
background-color:#fff;
color:#E4393C;
/
*位置上调:margin-top 给负值*/
margin-top:-6px;
height:35px;
line-height:35px;
}
#extra p{margin:0;}
/*⽅案1*/
/*#w{
float:left;
}
#al{
float:right;
}
#extra{
overflow:hidden;
}*/
/*⽅案2*/
#al{
float:right;
}
主题回复/浏览作者时间好⼤⼀瓶，不错
0/0
2011-11-11 11:11:11好⼤⼀瓶，不错
0/0
2011-11-11 11:11:11好⼤⼀瓶，不错
0/0
2011-11-11 11:11:11好⼤⼀瓶，不错
0/0
2011-11-11 11:11:11共900个话题
有问题与其他⽤户讨论
最后效果图：
商城导航：
Insert your title
#nav{
/*宽度，⾼度，背景颜⾊，⽔平居中对齐*/
width:990px;
height:40px;
background-color:#E64346;
margin:0 auto;
}
#nav p{
/*取消默认margin，宽度，⾼度，背景颜⾊*/
margin:0;
width:210px;
height:40px;
background-color:#CD2A2C;
}
#nav>p>a{
/*左浮动，⾼度，⾏⾼，⽂字：加粗，⼤⼩，颜⾊，取消下划线*/ float:left;
height:40px;
line-height:40px;
font-weight:bold;
font-size:14px;
color:#fff;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。