原码笔记

原码笔记

CSS导航栏及弹窗示例代码

小诸哥 0

最近整理了CSS导航栏及弹窗，具体如下：

CSS导航

先来看下效果：

  1. <!doctype html>
  2. <html>
  3.      <head>
  4.          <title>Insert your title</title>
  5.          <meta charset="utf-8">
  6.          <style>
  7.              body{
  8.                  font-size:12px;
  9.              }
  10.                 
  11.              #discuss{
  12.                  width:990px;
  13.                  margin:0 auto;
  14.              }
  15.              #mt{
  16.                  /*高度：30px，边框，上边框，背景颜色*/
  17.                  height:30px;
  18.                  border:1px solid #ddd;
  19.                  border-top:2px solid #9d9d9d;
  20.                  background:#F7F7F7;
  21.              }
  22.              #discuss-content{
  23.                  border-bottom:1px solid #ddd;
  24.                  padding-bottom:2px;
  25.              }
  26.     
  27.              #discuss-datas{
  28.                  width:990px;
  29.              }
  30.     
  31.              #discuss-datas thead td{
  32.                  /*加粗，上下内边距，下边框，文本居中对齐*/
  33.                  font-weight:bold;
  34.                  padding:5px 0;
  35.                  border-bottom:1px solid #ddd;
  36.                  text-align:center;
  37.                  color:#666;
  38.              }
  39.     
  40.              /*处理 .col1 的样式 (每行第一列的效果)*/
  41.              #discuss-datas td.col1{
  42.                  width:620px;
  43.                  text-align:left;
  44.              }
  45.                 
  46.              /*内容行中所有的列*/
  47.              #discuss-datas tbody td{
  48.                  /*虚线下边框，上下内边距，文本水平居中对齐，文本颜色*/
  49.                  border-bottom:1px dotted #ddd;
  50.                  padding:5px 0;
  51.                  text-align:center;
  52.                  color:#9c9a9c;
  53.              }
  54.     
  55.              /*处理所有超链接*/
  56.              #discuss a{
  57.                  color:#005aa0;
  58.                  text-decoration:none;
  59.              }
  60.              #discuss a:hover{
  61.                  text-decoration:underline;
  62.              }
  63.     
  64.              /*晒，论 两幅图*/
  65.              #discuss-datas b{
  66.                  /*宽度，高度，背景属性*/
  67.                  padding-left:21px;
  68.                  padding-bottom:2px;
  69.                  padding-top:3px;
  70.                  background-image:url(../Images/iconlist_1.png);
  71.                  background-repeat:no-repeat;
  72.                  margin-right:5px;
  73.              }
  74.              b.shai{
  75.                  background-position:-110px -220px;
  76.              }
  77.              b.lun{
  78.                  background-position:-152px -220px;
  79.              }
  80.     
  81.              /*2017-01-09 浮动练习*/
  82.              #mt a{
  83.                  float:left;
  84.                  width:100px;
  85.                  height:30px;
  86.                  text-align:center;
  87.                  line-height:30px;
  88.              }
  89.              #mt a.current{
  90.                  /*左右上边框，背景颜色，文本颜色*/
  91.                  border:1px solid #ddd;
  92.                  border-bottom:none;
  93.                  border-top:2px solid #E4393C;
  94.                  background-color:#fff;
  95.                  color:#E4393C;
  96.                  /*位置上调:margin-top 给负值*/
  97.                  margin-top:-6px;
  98.                  height:35px;
  99.                  line-height:35px;
  100.              }
  101.              #extra p{margin:0;}
  102.              /*方案1*/
  103.              /*#extra p.new{
  104.                  float:left;
  105.              }
  106.              #extra p.total{
  107.                  float:right;
  108.              }
  109.              #extra{
  110.                  overflow:hidden;
  111.              }*/
  112.     
  113.              /*方案2*/
  114.              #extra p.total{
  115.                  float:right;
  116.              }
  117.          </style>
  118.      </head>
  119.      <body>
  120.          <!-- 练习 -->
  121.          <!-- #discuss : width:990px -->
  122.          <div id="discuss">
  123.              <!-- 页签 #mt : height:30px; ,边框，背景 -->
  124.              <div id="mt">
  125.                  <a href="#">网友讨论圈</a>
  126.                  <a href="#" class="current">晒单帖</a>
  127.                  <a href="#">讨论帖</a>
  128.                  <a href="#">圈子帖</a>
  129.                  <a href="#">问答帖</a>
  130.              </div>
  131.              <!-- 内容 #discuss-content : 下边框 -->
  132.              <div id="discuss-content">
  133.                  <!-- 表格 -->
  134.                  <table id="discuss-datas">
  135.                      <thead>
  136.                      <tr>
  137.                      <td class="col1">主题</td>
  138.                      <td>回复/浏览</td>
  139.                      <td>作者</td>
  140.                      <td>时间</td>
  141.                      </tr>
  142.                      </thead>
  143.                      <tbody>
  144.                      <tr>
  145.                      <td class="col1">
  146.                      <b class="shai">
  147.                      <a href="#">
  148.                      好大一瓶，不错
  149.                      </a>
  150.                      </td>
  151.                      <td>0/0</td>
  152.                      <td>
  153.                      <a href="#">2001年冬天</a>
  154.                      </td>
  155.                      <td>
  156.                      2011-11-11 11:11:11
  157.                      </td>
  158.                      </tr>
  159.                      <tr>
  160.                      <td class="col1">
  161.                      <b class="lun">
  162.                      <a href="#">
  163.                      好大一瓶，不错
  164.                      </a>
  165.                      </td>
  166.                      <td>0/0</td>
  167.                      <td>
  168.                      <a href="#">2001年冬天</a>
  169.                      </td>
  170.                      <td>
  171.                      2011-11-11 11:11:11
  172.                      </td>
  173.                      </tr>
  174.                      <tr>
  175.                      <td class="col1">
  176.                      <b class="shai">
  177.                      <a href="#">
  178.                      好大一瓶，不错
  179.                      </a>
  180.                      </td>
  181.                      <td>0/0</td>
  182.                      <td>
  183.                      <a href="#">2001年冬天</a>
  184.                      </td>
  185.                      <td>
  186.                      2011-11-11 11:11:11
  187.                      </td>
  188.                      </tr>
  189.                      <tr>
  190.                      <td class="col1">
  191.                      <b class="lun">
  192.                      <a href="#">
  193.                      好大一瓶，不错
  194.                      </a>
  195.                      </td>
  196.                      <td>0/0</td>
  197.                      <td>
  198.                      <a href="#">2001年冬天</a>
  199.                      </td>
  200.                      <td>
  201.                      2011-11-11 11:11:11
  202.                      </td>
  203.                      </tr>
  204.                      </tbody>
  205.                  </table>
  206.                  <!-- 其他内容(略) -->
  207.                  <div id="extra">
  208.                      <p class="total">
  209.                      共900个话题
  210.                      <a href="#">浏览全部话题</a>
  211.                      </p>
  212.                      <p class="new">
  213.                      有问题与其他用户讨论
  214.                      <a href="#">[发表帖子]</a>
  215.                      </p>
  216.                  </div>
  217.              </div>
  218.          </div>
  219.      </body>
  220. </html>

最后效果图：

商城导航：

  1. <!doctype html>
  2. <html>
  3.      <head>
  4.          <title>Insert your title</title>
  5.          <meta charset="utf-8">
  6.          <style>
  7.              #nav{
  8.                  /*宽度，高度，背景颜色，水平居中对齐*/
  9.                  width:990px;
  10.                  height:40px;
  11.                  background-color:#E64346;
  12.                  margin:0 auto;
  13.              }
  14.              #nav p{
  15.                  /*取消默认margin，宽度，高度，背景颜色*/
  16.                  margin:0;
  17.                  width:210px;
  18.                  height:40px;
  19.                  background-color:#CD2A2C;
  20.              }
  21.              #nav>p>a{
  22.                  /*左浮动，高度，行高，文字：加粗，大小，颜色，取消下划线*/
  23.                  float:left;
  24.                  height:40px;
  25.                  line-height:40px;
  26.                  font-weight:bold;
  27.                  font-size:14px;
  28.                  color:#fff;
  29.                  text-decoration:none;
  30.                  padding-left:15px;
  31.              }
  32.              #nav>p>b{
  33.                  /*右浮动，宽度，高度，背景，位置*/
  34.                  float:right;
  35.                  width:20px;
  36.                  height:20px;
  37.                  background:url(../Images/iconlist_2.png) no-repeat -65px 0;
  38.                  margin:10px 10px 0 0;
  39.              }
  40.     
  41.              #nav>p{
  42.                  float:left;
  43.              }
  44.              #nav>ul{
  45.                  float:left;
  46.                  margin:0;
  47.                  padding:0;
  48.                  list-style:none;
  49.              }
  50.              #nav>ul li{
  51.                  float:left;
  52.              }
  53.              #nav>ul li a{
  54.                  /*宽度，高度，行高，文本：水平居中，大小，颜色，下划线，加粗*/
  55.                  float:left;
  56.                  width:100px;
  57.                  height:40px;
  58.                  line-height:40px;
  59.                  text-align:center;
  60.                  font-size:14px;
  61.                  color:#fff;
  62.                  text-decoration:none;
  63.                  font-weight:bold;
  64.              }
  65.              #nav>ul li a:hover{
  66.                  background-color:#BD2A2C;
  67.              }
  68.     
  69.              #container{
  70.                  width:990px;
  71.                  min-height:200px;
  72.                  margin:0 auto;
  73.              }
  74.     
  75.              #cate_box{
  76.                  margin:0;
  77.                  padding:0;
  78.                  list-style:none;
  79.     
  80.                  /*宽度，高度，背景颜色，左右下边框*/
  81.                  width:210px;
  82.                  min-height:400px;
  83.                  background-color:#FAFAFA;
  84.                  border:2px solid #CD2A2C;
  85.                  border-top:none;
  86.                  box-sizing:border-box;
  87.                  /*上内边距*/
  88.                  padding-top:5px;
  89.              }
  90.              #cate_box>li{
  91.                  /*左内边距，上下内边距，宽度，下边框(白色)*/
  92.                  padding:5px 0 5px 10px;
  93.                  width:196px;
  94.                  box-sizing:border-box;
  95.                  border-bottom:1px solid #fff;
  96.                  border-top:1px solid transparent;
  97.              }
  98.              #cate_box li:hover{
  99.                  border-top-color:#ddd;
  100.                  border-bottom-color:#ddd;
  101.                  background-color:#fff;
  102.              }
  103.              #cate_box li>a{
  104.                  color:#333;
  105.                  text-decoration:none;
  106.                  font-size:14px;
  107.              }
  108.          </style>
  109.      </head>
  110.      <body>
  111.          <nav id="nav">
  112.              <p>
  113.                  <a href="#">全部商品分类</a>
  114.                     
  115.              </p>
  116.              <ul>
  117.                  <li>
  118.                      <a href="#">首页</a>
  119.                  </li>
  120.                  <li>
  121.                      <a href="#">服装城</a>
  122.                  </li>
  123.                  <li>
  124.                      <a href="#">食品</a>
  125.                  </li>
  126.                  <li>
  127.                      <a href="#">团购</a>
  128.                  </li>
  129.                  <li>
  130.                      <a href="#">夺宝岛</a>
  131.                  </li>
  132.                  <li>
  133.                      <a href="#">闪购</a>
  134.                  </li>
  135.                  <li>
  136.                      <a href="#">金融</a>
  137.                  </li>
  138.              </ul>
  139.          </nav>
  140.          <div id="container">
  141.              <ul id="cate_box">
  142.                  <li>
  143.                      <a href="#">图书、音像、数字商品</a>
  144.                  </li>
  145.                  <li>
  146.                      <a href="#">家用电器</a>
  147.                  </li>
  148.              </ul>
  149.          </div>
  150.      </body>
  151. </html>
  152.  

导航列表弹框效果：

初始状态：

鼠标悬停时：

  1. <!doctype html>
  2. <html>
  3.      <head>
  4.          <title>Insert your title</title>
  5.          <meta charset="utf-8">
  6.          <style>
  7.              #my_jd{
  8.                  width:100px;
  9.                  height:30px;
  10.                  text-align:center;
  11.                  line-height:30px;
  12.                  border:1px solid #000;
  13.                  background-color:#fff;
  14.                  /*相对定位：配合 #menu 的绝对定位*/
  15.                  position:relative;
  16.                  cursor:pointer;
  17.              }
  18.              #menu{
  19.                  width:400px;
  20.                  height:100px;
  21.                  background-color:#fff;
  22.                  border:1px solid #000;
  23.                  /*绝对定位*/
  24.                  position:absolute;
  25.                  top:30px;
  26.                  left:-1px;
  27.                  /*隐藏*/
  28.                  display:none;
  29.                     
  30.              }
  31.              #my_jd:hover #menu{
  32.                  display:block;
  33.              }
  34.              #my_jd:hover #line{
  35.                  width:100px;
  36.                  position:absolute;
  37.                  border-top:1px solid #fff;
  38.              }
  39.          </style>
  40.      </head>
  41.      <body>
  42.          <div id="my_jd">
  43.              我的京东
  44.              <!-- 弹出菜单 -->
  45.              <div id="menu">
  46.                  模拟我的京东弹出菜单
  47.              </div>
  48.              <div id="line"></div>
  49.          </div>
  50.      </body>
  51. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

标签： CSS 导航 弹窗 代码

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇常用的清除浮动的方法

下一篇利用CSS3实现动态的二级三级菜单效果实例源码

相关文章