当前位置:编程学习 > html/css >>

div模拟滚动条

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %>
 
<!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 runat="server">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        p
        {
            height: 1000px;
        }
        #mainBox
        {
            width: 250px;
            height: 500px;
            border: 1px #bbb solid;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
        }
        #content
        {
            height:1000px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .scrollDiv
        {
            width: 6px;
            position: absolute;
            top: 0;
            background: #666;
            border-radius: 10px;
        }
        /*  章节类别  */
.m-catr{padding:15px 0 10px 12px;*padding:15px 0 10px 14px;}
.m-catr .tte{float:left; line-height:35px; text-align:left;font-size:14px; font-weight:bold; color:#5b98db;}
#content dl{width:225px; float:left; margin-top:10px;}
#content dl dt, .m-catr dl dd{float:left;width:100%; line-height:25px; text-align:left; color:#444;}
#content dl dt{font-weight:bold;}
#content dl dd{margin-left:12px;}
    </style>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
    <!-- 章节类别 -->
    <div class="m-catr f-cb">
        <div class="tte">
            章节类别</div>
        <div id="mainBox">
            <div id="content">
                <dl data-type="menu">
                    <dt>第一单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第二单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第三单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
                        3、人们如何做出决策</dd>
                    <dd>
                        4、培养独立工作和独立思考的人</dd>
                </dl>
                <dl data-type="menu">
                    <dt>第四单元科学是系统化了的知识</dt>
                    <dd>
                        1、千篇一律与千变万化</dd>
                    <dd>
                        2、双语言时代</dd>
                    <dd>
           
补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,