Html+css实现拖拽导航条

2019-09-10 郑州网站建设  

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>div横向拖拽排序</title>

    <script src=http://www.divcss5.com/html/"http:/libs.百度.com/jquery/1.9.0/jquery.js"></script> 

    <style type="text/css">

        body, div {

            padding: 0px;

            margin: 0px;

        }

 

        .box {

            position: relative;

            margin-left: 15px;

            padding: 10px;

            padding-right: 0px;

            width: 810px;

            border: blue solid 1px;

        }

        .box ul{

            list-style: none;

            overflow: hidden;

            padding: 0;

            margin:0;

        }

        .drag {

            float: left;

            border: #000 solid 1px;

            text-align: center;

        }

        .box ul li a{

            display: block;

            padding: 10px 25px;

        }

        .drag-dash {

            position: absolute;

            border: #000 solid 1px;

            background: #ececec;

        }

 

        .dash {

            float: left;

            border: 1px solid transparent;

        }

    </style>

</head>

<body>

<h1>div横向拖拽排序</h1>

<div class="box">

    <ul>

        <li class="drag"><a href="#">导航一</a></li>

        <li class="drag"><a href="#">导航二导航</a></li>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1895.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • css
  • Doctype
  • !
  • +