Html/CSS 示例演练图书馆后台界面-CSDN博客

示例演练（html css javascript）

--制作图书馆后台界面

1.　成品图

2. 　代码关键点解析

　　· 书写规范十分重要在制作前先思考如何分大板块（此处为 header context foot）

　　 · position后的参数再次强调（具体看上章）：

　　　　　　fixed：按照边框给定位置，并定死

　　　　　　relative(置于外部标签)+absolute(置于内部标签)==》直接在父标签中定位

　　　　　　两种方法皆可将需要固定的标签订于窗体

　　 · 多出部分利用overflow:auto增加滚动条(具体可看上章)

　　 · hover增加鼠标掠过部分 hover .<style>即可对此style进行选中时修改

　　 · border-radius:50%;在图片中将其变为圆形

　　 · 对于文字分别设置大小、斜体、粗细程度：

　　　　　　font-size: 31px;
　　　　　　font-style: italic;
　　　　　　font-weight: 600;

　　 · 时间间隔器函数：

　　　　　　实际将取到文字拆分在拼接最终按照间隔反复调用实现滚动横幅

    <script>
        function func(){
            var tag=document.getElementById('i2');
            var content=tag.innerText;
            var i=content.charAt(0);
            var f=content.substring(1,content.length);
            tag.innerText=f+i;
        }
        setInterval('func()',500);
    </script>

补充：

右上角新增提示图标：

　　1. http://fontawesome.dashgame.com/　　下载fontawesome（用作css图标字体、框架）

　　2. 将解压后所有文件放入网页文件根目录下

　　3. 在head标签中增加<link>标签　　随后即可调用fontawesome中所有图标　　

    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

　　4.样式选择看上方网站并按下方步骤即可简单得到图标

========================================================================================================

全部代码（下方为了实现滚动条多打div 模拟超出大小的数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台</title>
    <style>
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-header{
            height:48px;
            background-color:blue;
            color:white;
            line-height:48px;
        }
        .pg-header .logo{
            width:200px;
            background-color:green;
        }
        .pg-header .user{
            color: black;
            height: 48px;
            margin-right: 50px;
            padding: 0 24px;
        }
        .pg-header .user:hover{
            background-color:#04049e;
        }
        .pg-header .user:hover .tab{
            display:block;
        }
        .pg-header .user img{
            height:40px;
            width:40px;
            margin-top: 4px;
            margin-left: 2px;
            border-radius:50%;

        }

        .pg-header .user .tab{
           position: absolute;
           top: 48px;
           right:0;
           z-index: 10;
           background-color:#04049e;
           width:90px;
           display:none;
        }
        .pg-header .text1{
            font-size: 31px;
            font-style: italic;
            font-weight: 600;
            color:red;
            margin-left: 400px;
            func();
        }
        .pg-content .menu{
            position:absolute;
            top:48px;
            left:0;
            bottom:0;
            width:20%;
            min-width:200px;
            background-color:grey
        }
        .pg-content .content{
            position:absolute;
            top:48px;
            left:205px;
            bottom:0;
            right:0;
            overflow:auto;
            min-width:200px;
        }
    </style>
    <script>
        function func(){
            var tag=document.getElementById('i2');
            var content=tag.innerText;
            var i=content.charAt(0);
            var f=content.substring(1,content.length);
            tag.innerText=f+i;
        }
        setInterval('func()',500);
    </script>
</head>

<body style="margin:0;">
    <div class="pg-header">
        <div class="logo left">图书馆预约</div>
        <div id="i2" class="text1 left">欢迎各位同学使用</div>
        <div class="user right" style="position:relative">
            <a  href="">
                <img src="1.jpg">
            </a>
            <div id="i1" class="tab">
                <a style="display:block;color:white;" href="">我的资料</a>
                <a style="display:block;color:white;" href="">注销</a>
            </div>
        </div>
    </div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <div style="background-color:red;">
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
                <div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div><div>此处省略一行。。。</div>
            </div>
        </div>
    </div>
    <div class="pg-foot"></div>

</body>
</html>