精华内容
下载资源
问答
  • 一个简单静态网页

    2014-02-16 22:29:11
    每一个页面的效果图,实现的代码都包含在内,比较齐全
  • songsair的静态网页代码及资源,只有一个目录,很简单的一个。
  • 静态网页源码+设计稿

    2017-06-26 02:15:21
    初学前端时写的静态网页。HTML、CSS。内含网页的设计稿,源码。没有涉及到JS的哦~~设计稿是psd格式,可以顺便学一下切图哒~~(∩_∩)
  • 简单静态网页

    2011-12-26 14:35:04
    没什么 就是没什么 简单网页 大家都懂的
  • 一个很简单简单静态网页(附源代码)HTML+CSS

    千次阅读 多人点赞 2021-02-14 11:03:47
    首先声明:代码中使用的爱心特效和转动的音符这个两个效果是笔者从网上找到的…具体在哪里找的我也忘了… 其他部分是自己写的

    【完整资源包下载】包含图片、音效等
    如果想白嫖可以私信或者发邮件fzx2003zhixue@163.com

    首先声明:代码中使用的爱心特效和转动的音符这个两个效果是我从网上找到的…具体在哪里找的我也忘了…
    其他部分是自己写的

    最后的效果如下
    在这里插入图片描述
    在这里插入图片描述

    index.html
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>沙雕小星星</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="btn">
            <p>&nbsp;👇WATCH MY CV👇</p>
        </div>
        <div class="top">
            <a href="https://blog.csdn.net/weixin_51263734" target="_blank">我的兴趣</a>
            <a href="https://blog.csdn.net/weixin_51263734" target="_blank">我的过去</a>
            <a href="https://blog.csdn.net/weixin_51263734" target="_blank">我的梦想</a>
            <a href="https://blog.csdn.net/weixin_51263734" target="_blank" style="float:right">小风的博客</a>
        </div>
        <div class="content">
        
            <h1 class="avr">Give AR/VR Eyes and Brain</h1>
        </div>
    
    
        <div class="yinyue">
            <img class="music" src="./33.png" alt="">
            <audio autoplay="autoplay" id="audio" loop="loop">
                <source src="./music1.mp3" type="audio/MP3">
    
            </audio>
    
        </div>
        <div class="row">
            <div class="centercolumn">
                <div class="card">
    
                    <h2 id="biaoti">浮生六记卷一</h2><br />
                    <hr />
                    <h4 id="qita">2021 年 1 月 29日</h4>
    
                    <p style="text-indent:2em">我生于乾降二十八年(1763年)的冬天ー月十ニ日。那时天下承平,国家安泰。我生于读书人家家在苏州城沧浪亭畔,上天待我何等厚爱。</p>
                    <p style="text-indent:2em">回想这一生,真如东坡先生所说“事如春梦了无痕”,如果不将之记下来,未免辜负了天赋幸运。</p>
                    <p style="text-indent:2em">
                        而我总觉得,《诗三百》以《关》为开篇,这是将世间夫妇之爱放在卷首。那么我何妨也将之放在最开始,
                        余下的再慢慢道来。只是惭愧自己年少失学,文字粗浅,所写所记,皆是真情实事而已。如果一定要挑剔其中的文法错漏,那就是对着待磨的铜镜,却希冀它明察秋毫。
                    </p>
                    <p style="text-indent:2em">
                        小时候我与金沙于家的女儿有过婚约。那女孩子八岁夭折。后来娶妻陈氏,名芸,字淑珍,她的父亲陈心馀是我舅舅,舅母金氏,还有一个表弟名为克昌。
                        芸天性聪慧,牙牙学语时,其父教她《琵琶行》,一学能便能背诵。她四岁时父亲去世,弱母幼弟,家徒四壁。所幸芸女红针
                        线十分出色,到她年纪稍长,一家三口的生计便着落在她针指间的辛劳,不仅家人衣食周全,还能供克昌读书。
                    </p>
                    <p style="text-indent:2em">
                        有一天,她在克昌的书箱里翻到《琵琶行》,回想儿时背诵的内容,逐字辨识,学会了识字。刺绣的闲暇她自学不辍,渐渐通晓诗词,曾写过“秋侵人影瘦,霜染菊花肥”
                        这样清丽的诗句。十三岁时,母亲带我回娘家小住。芸比我大十个月,我一直把她叫作“淑姐姐”。我们两小无猜,她悄悄给我看自己的诗句
                        我感叹她才思清雅灵秀,却也暗暗担心,如此的聪慧敏感,恐怕不是福泽深厚之相。
                    </p>
                    <p style="text-indent:2em">
                        尽管如此,我已倾心于芸,不能释怀。私下对母亲说:“我若娶妻,一定要娶淑姐姐。”母亲也喜欢她的温柔和顺,便摘下金指环相赠,作为信物与陈家订下婚约。
                    </p>
                </div>
                <br /><br />
                <div class="card">
                    <h2 id="biaoti">闺房之乐</h2><br />
                    <hr />
                    <h4 id="qita">2020 年 1 月 30日</h4>
                    <p style="text-indent:2em">
                        那一天是乾隆四十年(1775年)七月十六日,我与芸订婚。
    
                    </p>
                    <p style="text-indent:2em">
                        这一年冬天,芸的堂姐出嫁,我又跟着母亲前去观礼。族中
                        组妹都来送嫁,满室新裁衣裳的鲜亮颜色,唯有芸衣着淡雅,只
                        双鞋是新的。我偷看她的新鞋,刺绣精巧美丽,悄悄问她,她
                        说是自己做的,这才知道芸的聪慧敏捷,不止在诗词一道
                        这时的芸清秀瘦弱,窄窄的肩,脖颈修长,弯弯的眉毛,眼
                        睛灵秀俏丽,顾盼间神韵动人。唯是上唇略短,微露出两颗牙
                        齿,虽然这似乎不是有福之相,但别有一种妩媚娇柔之感,让人怦然心动。
                    </p>
                    <p style="text-indent:2em">
                        央她再给我看她的诗稿,发现多是未能成篇的残句,或是一
                        联,或是三四行。问她为何,她笑着说:“自己随手写的,也没人
                        指点,留待懂诗的知己教我,一起推敲完成。”
                        我开玩笑地把她的诗稿题作“锦囊佳句”,却不知这一个玩
                        笑,已经预示了芸日后的命运。
                    </p>
                    <p style="text-indent:2em">
                        “锦囊佳句”
                    </p>
                    <p style="text-indent:2em">
                        (此处用唐代诗人李贺故事。李贺少年时出游,常有一仆僮背
                        着锦囊跟随。每有诗兴,他就把所得诗句记下来,投入锦囊中
                        称为“锦囊佳句”。据说其祖母见到这锦囊,感叹道:“这孩子写
                        诗是要把心呕出来啊。”而李贺果然早夭。所以沈复题“锦囊佳
                        句”,虽然贴切,却非佳兆。)
                    </p>
                    <p style="text-indent:2em">
                        这一夜,和兄弟们到城外送亲,回来时已过半夜,我觉得
                        饿了,仆妇呈上蜜枣,正嫌太甜,芸出来,悄悄拽我的袖子。我心领神会,跟她回房,
                        原来她在房中藏着粥和几样小菜,还是热的。
                    </p>
                </div>
    
            </div>
    
    
        </div>
       
        
        <br /><br />
        <button class="bt" onclick="window.open('https://blog.csdn.net/weixin_51263734')">MY CSDN BLOG</button>
    
        <script>
        let mucics = document.getElementById('audio')
        document.body.addEventListener('mousemove', function() {
            setTimeout(() => {
                mucics.play();
            }, 2000);
        }, false);
        </script>
        
        <div class="footer">
            <br />
            <p>希望能成为有梦想 有温度的教技人</p><br />
            <p>你好 我是风小风</p><br />
            <a href="https://blog.csdn.net/weixin_51263734" target="_blank"><img class="someimg" src="./hou.png" alt="" width="30"></a>
            <abbr title="QQ账号:2633386281"><img class="someimg" src="./qq.png" alt="" width="30"></abbr>
            <abbr title="邮箱:fzx2003zhixue@163.com"><img class="someimg" src="./mail.png" alt="" width="30"></abbr>
        </div>
        <script>
            //鼠标点击出现爱心特效  这部分特效是从一个网页搬过来的  觉得挺好看的
            (function (window, document, undefined) {
                var hearts = [];
                window.requestAnimationFrame = (function () {
                    return window.requestAnimationFrame ||
    				window.webkitRequestAnimationFrame ||
    				window.mozRequestAnimationFrame ||
    				window.oRequestAnimationFrame ||
    				window.msRequestAnimationFrame ||
    				function (callback) {
    				    setTimeout(callback, 1000 / 60);
    				}
                })();
                init();
                function init() {
                    css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                    attachEvent();
                    gameloop();
                }
                function gameloop() {
                    for (var i = 0; i < hearts.length; i++) {
                        if (hearts[i].alpha <= 0) {
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i, 1);
                            continue;
                        }
                        hearts[i].y--;
                        hearts[i].scale += 0.004;
                        hearts[i].alpha -= 0.013;
                        hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
                    }
                    requestAnimationFrame(gameloop);
                }
                function attachEvent() {
                    var old = typeof window.onclick === "function" && window.onclick;
                    window.onclick = function (event) {
                        old && old();
                        createHeart(event);
                    }
                }
                function createHeart(event) {
                    var d = document.createElement("div");
                    d.className = "heart";
                    hearts.push({
                        el: d,
                        x: event.clientX - 5,
                        y: event.clientY - 5,
                        scale: 1,
                        alpha: 1,
                        color: randomColor()
                    });
                    document.body.appendChild(d);
                }
                function css(css) {
                    var style = document.createElement("style");
                    style.type = "text/css";
                    try {
                        style.appendChild(document.createTextNode(css));
                    } catch (ex) {
                        style.styleSheet.cssText = css;
                    }
                    document.getElementsByTagName('head')[0].appendChild(style);
                }
                function randomColor() {
                    return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
                }
            })(window, document);
        </script>
    </body>
    </html>
    
    style.css
    * {
        margin: 0px;/*设置四周边距都为0*/
        box-sizing: border-box;/*宽高的设置值包括border等*/
    }
    
    body {
        background: url("44.jpg");/*设置背景图片*/
        background-repeat: no-repeat;
        background-attachment: fixed;/*设置背景图不随网页滑动而改变*/
        background-size: cover;
    }
    .content {
        perspective: 400px;
        width: 100%;
        height: 620px;
        position: relative;
    }
    /* 顶部导航条 */
    .top {
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0);
    }
    .top a {
      float: left;
      display: block;/*将链接变为块元素*/
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;/*去掉链接的下划线*/
     }
     
    /* 链接颜色修改 */
    .top a:hover {
      background-color: #ddd;
      color: black;
    }
    
    /*正中间的字*/
    .avr{
        position: absolute;
        display: flex;
        justify-content: center;
        left: 0;
        right: 0;
        top: 300px;
        margin: auto;
        bottom: 0;
        color: #fff;
        font-size: 70px;
        font-weight: 500;
    }
    
    audio {
        position: fixed;
        bottom: 50px;
        right: 0;
    }
    /* 创建三列 本来是想做三列的,后来没做也懒得改了 */
    /* center column */
    .leftcolumn {
        float: left;
        width: 10%;
    }
    
    .centercolumn {
        margin: auto;
        width: 80%;
        height:1000px;
        padding: 10px;
        
    }
    .rightcolumn {
        float: left;
        width: 10%;
    }
    
    /* 文章卡片 */
    .card {
        background-color:rgba(255,255,255,0.5);
        padding: 20px;
        margin-top: 20px;
        border-radius: 50px;
        
    }
    #biaoti {
        text-align: center;
    }
    #qita {
        text-align: right;
    }
    /* 列后面清除浮动 */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    /*旋转的音符效果*/
    .music {
        position: fixed;
        bottom: 50px;
        right: 50px;
        width: 40px;
        height: 30px;
        animation: muscis 5s linear infinite;
    }
    @keyframes muscis {
        from {
            transform: rotate (0deg);
            opacity: .6;
        }
    
        to {
            transform: rotate(360deg);
            opacity: .8;
        }
    }
    
    .yinyue {
        display: flex;
        justify-content: space-between;
        padding: 0 400px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    
    
    /* 底部 */
    .footer {
        background-image: linear-gradient(rgba(211, 104, 29, 0.80),rgba(5,72,99,0.80));
       
        text-align: center;
        margin-top: 50px;
    }
    
    /*中间的字效果*/
    .btn {
        width: 18%;
        height: 60px;
        position: absolute;
        top: 65%;
        left: 41%;
        background-image: linear-gradient(rgba(211, 104, 29, 0.95),rgba(5,72,99,0.95));
        border-radius: 40px;
        border-color: dodgerblue;
    }
    
    .btn p{
            line-height: 60px;
            font-size: 22px;
            color: black;
        }
    .bt {
        cursor: pointer; /*使鼠标放上边显示手指形状*/
        width: 25%; /*设置宽*/
        height: 50px; /*设置高*/
        display: block; /*行内元素设置宽高不生效,使用display:block;可以将行内元素设置为块集元素 */
        text-align: center; /*文字在容器中横向居中*/
        line-height: 40px; /*当数值与height一样的时候文字垂直居中*/
        text-decoration: none; /*将文字下划线去除*/
        background-image: linear-gradient(rgba(211, 104, 29, 0.95),rgba(5,72,99,0.95)); /*设置元素背景颜色:渐变*/
        color: rgba(0, 0, 0, 0.60); /*设置文字颜色*/
        border: none;  /*去除边框*/
        margin-bottom: 10px; /*下部外边框距离10像素*/
        margin: auto;  /*使按钮居中*/
        font-size: 20px; /*设置字体大小*/
    }
    
    展开全文
  • 简单静态网页的设计

    万次阅读 多人点赞 2018-06-02 20:34:19
    总体思路:先构思好一个图书馆的框架以这个框架为主体,进行拓展,丰富其他内容:只是简单地做了四个页面,“我的图书馆”页面可以采用同样的方式编写出来。主体的编程:&lt;!doctype html&gt;&lt;...

    总体思路:先构思好一个图书馆的框架


    以这个框架为主体,进行拓展,丰富其他内容:




    只是简单地做了四个页面,“我的图书馆”页面可以采用同样的方式编写出来。

    主体的编程:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>上海图书馆</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{background-color:#CCC;}
    .clear{clear:both;}

    #container{
    background-color:#F0BBBC;
    height:510px;
    width:1500px;
    margin:auto;}

    #picture{height:470px; margin:0px;}

    #label{background-color:#CEDDEC; height:30px;}

    </style>
    </head>

    <body>
    <div id="container">

    <div id="picture"><img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/></div>
      <div id="label">
      <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="50" height="30" align="center"><a href="#"><font color="blue">首页</a></td>
          <td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
          <td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
          <td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
          <td width="50" align="center"><a href="#">我的图书馆</a></td>
        </tr>
      </tbody>
    </table>
      </div>

    </div>
    </body>

    </html>

    拓展内容:

    (1)页面“首页”程序代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>上海图书馆</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{background-color:#CCC;}
    .clear{clear:both;}

    #container{
    background-color:#F0BBBC;
    height:510px;
    width:1500px;
    margin:auto;}

    #picture{height:470px; margin:0px;}

    #label{background-color:#CEDDEC; height:30px;}

    #container2{
    background-color:#E6ECCC;
    width:800px;
    height:340px;
    margin:20px auto;
    }

    #content{
    background-color:#E1C7F3;
    width:1000px;
    height:100px;
    margin:20px auto;
    }

    a {
    color: #F3ADAE;
    }
    a:link {
    color: #0B0B0B;
    text-decoration: none;
    }
    a:visited {
    color: #0B0B0B;
    text-decoration: none;
    }
    a:hover {
    color: #17E515;
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    </head>


    <body>
    <div id="container">
    <div id="picture"><img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/></div>
      <div id="label">
      <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="50" height="30" align="center"><a href="#"><font color="blue">首页</a></td>
          <td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
          <td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
          <td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
          <td width="50" align="center"><a href="#">我的图书馆</a></td>
        </tr>
      </tbody>
    </table>


      </div>
    </div>
    <div id="container2"><img src="imagines/veer-100281520.jpg" width="799" height="339" alt=""/></div>
    <div id="content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海图书馆由上海图书馆与上海科学技术情报研究所合并组成,是一个研究型公共图书馆,建于1952年7月,原址位于南京西路325号,后搬迁至淮海中路1555号。1996年12月20日,上海图书馆新馆正式对外开放,成为一个大型综合性研究型公共图书馆,跻身于中国十大图书馆之列。上海图书馆藏中外文献5400余万册(件),其中古籍善本、碑帖尺牍、名人手稿、家谱方志、西文珍本、唱片乐谱、近代报刊及专利标准尤具特色。建筑面积总计12.7万平方米,拥有各类阅览室、学术活动室、报告厅、展览厅等空间。
    </div>
    </body>

    </html>

    (2)页面“资源”程序代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>上海图书馆</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    body{background-color:#CCC;}
    .clear{clear:both;}

    #container{
    background-color:#F0BBBC;
    height:510px;
    width:1500px;
    margin:auto;}

    #picture{height:470px; margin:0px;}

    #label{background-color:#CEDDEC; height:30px;}

    #container2{
    background-color:#E6ECCC;
    width:1500px;
    height:800px;
    margin:20px auto;
    }

    #head1{
    background-color:blue;
    width:238px;
    height:30px;}
    #head2{background-color:#FBB9B9; width:238px; height:270px;}
    #head5{
    background-color:#F1C93C;
    width:238px;
    height:30px;
    }
    #head3{background-color:#FBB9B9; width:238px; height:180px;}
    #head4{background-color:#FBB9B9; width:238px; height:180px;}
    #head6{height:140px;}

    #enter{height:60px;}

    #contest{
    background-color: #F7EFEF;
    height: 750px;
    font-size: 18px;
    }
    a:link {
    color: #0B0B0B;
    text-decoration: none;
    }
    a:visited {
    color: #0B0B0B;
    text-decoration: none;
    }
    a:hover {
    color: #44DD17;
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    </head>


    <body>
    <div id="container">
    <div id="picture"><img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/></div>
      <div id="label">
    <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="50" height="30" align="center"><a href="Untitled-1.html">首页</a></td>
          <td width="50" align="center"><a href="#"><font color="blue">资源</font></a></td>
          <td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
          <td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
          <td width="50" align="center"><a href="#">我的图书馆</a></td>
        </tr>
      </tbody>
    </table>
    </div>
    <div id="container2">
    <table width="1455" height="463" border="1">
      <tbody>
        <tr>
          <td width="238" height="428">
          <div id="head1"><p align="center">资&nbsp;&nbsp;&nbsp;&nbsp;源</p></div>
          <div id="head2">
          <div id="head5"><p align="left">电子资源</p></div>
          <p><a href="#">&gt;&gt;数据库导航</a></p>
          <p><a href="#">&gt;&gt;免费资源</a></p>
          <p><a href="#">&gt;&gt;试用数据库</a></p>
          <p><a href="#">&gt;&gt;电子期刊导航</a></p>
          <p><a href="#">&gt;&gt;电子图书</a></p>
          <p><a href="#">&gt;&gt;多媒体资源</a></p>
          <p><a href="#">&gt;&gt;校外访问</a></p>
          <p><a href="#">&gt;&gt;版权公告</a></p>
          </div>
          <div id="head3">
          <div id="head5"><p align="left">纸本资源</p></div>
          <p><a href="#">&gt;&gt;新书通告</a></p>
          <p><a href="#">&gt;&gt;特色文献</a></p>
          <p><a href="#">&gt;&gt;书刊捐赠</a></p>
          <p><a href="#">&gt;&gt;书刊荐购</a></p>
          <p><a href="#">&gt;&gt;馆藏报刊录目</a></p>
          </div>
          <div id="head4">
          <div id="head5"><p align="left">国内外图书馆</p></div>
          <p><a href="#">&gt;&gt;985高校馆</a></p>
          <p><a href="#">&gt;&gt;211高校馆</a></p>
          <p><a href="#">&gt;&gt;港澳台高校馆</a></p>
          <p><a href="#">&gt;&gt;国外高校馆</a></p>
          <p><a href="#">&gt;&gt;国内外公共馆</a></p>
          </div>
          <div id="head6"></div>
          </td>
          <td width="1201">
          <div id="enter">
          <p>首页&nbsp;&nbsp;<span style="font-size: 14px; color: #F01215;">>>电子资源</span></p>
          <p>&nbsp;</p>
          <p style="font-size: 24px">电子资源 </p>
          </div>
          <div id="contest">
           <table width="1207" height="605" border="0">
             <tbody>
               <tr>
                 <td style="text-align: center; font-size: 36px;"><a href="#">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;数据路导航</a></td>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&gt;&gt;&nbsp;&nbsp;免费资源</a></td>
               </tr>
               <tr>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;试用数据库</a></td>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;电子期刊导航</a></td>
               </tr>
               <tr>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&gt;&gt;&nbsp;&nbsp;电子图书</a></td>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;多媒体资源</a></td>
               </tr>
               <tr>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&gt;&gt;&nbsp;&nbsp;校外访问</a></td>
                 <td style="font-size: 36px; text-align: center;"><a href="#">&gt;&gt;&nbsp;&nbsp;版权公告</a></td>
               </tr>
             </tbody>
           </table>
          </div>
          </td>
        </tr>
      </tbody>
    </table>


    </div>
    </body>

    </html>

    (3)页面“服务”程序代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>上海图书馆</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    body{background-color:#CCC;}
    .clear{clear:both;}

    #container{
    background-color:#F0BBBC;
    height:510px;
    width:1500px;
    margin:auto;}
    #container2{
    background-color:#E6ECCC;
    width:1500px;
    height:820px;
    margin:20px auto;
    }

    #picture{height:470px; margin:0px;}

    #label{background-color:#CEDDEC; height:30px;}

    #head1{
    background-color:blue;
    height:30px;
    margin:0px 0px 10px 0px;
    }
    #head2{
    background-color:#FBB9B9;
    height:270px;
    }
    #head3{height:20px;}
    #head4{
    background-color:#B9EBF3;
    height:405px;
    }
    #head5{height:45px;}
    #head6{
    background-color:#F1C93C;
    height:30px;
    }
    #head7{height:60px;}

    #table{
    background-color:#A4F4DC;
    height:760px;
    }
    a:link {
    color: #070707;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #070707;
    }
    a:hover {
    text-decoration: none;
    color: #94CB79;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    </head>


    <body>
    <div id="container">
    <div id="picture">
        <img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/> </div>
        <div id="label">
        <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="50" height="30" align="center"><a href="Untitled-1.html">首页</a></td>
          <td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
          <td width="50" align="center"><a href="#"><font color="blue">服务</font></a></td>
          <td width="50" align="center"><a href="Untitled-4.html">关于本馆</a></td>
          <td width="50" align="center"><a href="#">我的图书馆</a></td>
        </tr>
      </tbody>
    </table>
        </div>
    </div>
    <div id="container2">
     <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="238" height="815">
          <div id="head1"><p align="center">服&nbsp;&nbsp;&nbsp;&nbsp;务</p></div>
          <div id="head2">
          <div id="head6">总服务台</div>
          <p>&nbsp;&nbsp;<a href="#">借阅服务</a></p>
          <p>&nbsp;&nbsp;<a href="#">馆际互借</a></p>
          <p>&nbsp;&nbsp;<a href="#">文献传递</a></p>
          <p>&nbsp;&nbsp;<a href="#">情报服务</a></p>
          <p>&nbsp;&nbsp;<a href="#">读者培训</a></p>
          <p>&nbsp;&nbsp;<a href="#">参观接待</a></p>
          <p>&nbsp;&nbsp;<a href="#">空间服务</a></p>
          <p>&nbsp;&nbsp;<a href="#">自助服务</a></p>
          </div>
          <div id="head5"></div>
          <div id="head3">
           <p align="right"><font color="blue">>>>>>>>></font></p>
          </div>
          <div id="head4">
          <table width="238" border="0">
      <tbody>
        <tr>
          <td width="238" height="135"><img src="imagines/timg1.jpg" width="238" height="135" alt=""/></td>
        </tr>
        <tr>
          <td height="135"><img src="imagines/timg.jpg" width="238" height="135" alt=""/></td>
        </tr>
        <tr>
          <td height="135"><img src="imagines/timg2.jpg" width="238" height="135" alt=""/></td>
        </tr>
      </tbody>
    </table>


          </div>
          </td>
          <td width="1347">
          <div id="head7">
           <p>首页<span style="font-size: 14px; color: #F01215;">>>服务>>总服务台</span></p>
           <p>&nbsp;</p>
           <p style="font-size: 24px">总服务台</p>
          </div>
          <div id="table">
          <div id="head7">
    <p style="text-align: center; font-size: 24px;"><strong>总服务台服务一览表</strong></p>
          <p>&nbsp;</p>
          <p><strong>总服务台:</strong>处理读者服务的各项事务。</p>
          </div>
          <table width="1248" border="1">
      <tbody>
        <tr>
          <td width="90" height="30" style="text-align: center">类别</td>
          <td width="1142" style="text-align: center">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容</td>
        </tr>
        <tr>
          <td height="90" style="text-align: center">电话</td>
          <td>
          <p>宝山校区校本部馆:66134667</p>
          <p>延长校区文荟馆:56331286</p>
          <p>嘉定校区联合馆:69982759</p>
          </td>
        </tr>
        <tr>
          <td height="30" style="text-align: center">开放时间</td>
          <td>
          <p>周一~周日   8:00----22:00(国定假、寒暑假除外)</p>
          </td>
        </tr>
        <tr>
          <td height="" style="text-align: center">咨询与服务</td>
          <td height="480">
           <p>使用图书馆的过程中,遇到的一般性问题,比如图书馆的馆藏、 文献布局、服务方式、借阅规则等;</p>
           <p>&nbsp;</p>
           <p>检索文献过程中遇到的问题,比如检索到某一本图书后怎样找到等;</p>
     <p>&nbsp;</p>
                  <p>图书馆其它资源利用方面的咨询;</p>
               <p>&nbsp;</p>
             <p>借阅图书中遇到的问题,比如借书、还书、预约、续借方法等;</p>
               <p>&nbsp;</p>
               <p>借阅图书中遇到的问题,比如借书、还书、预约、续借方法等;</p>
               <p>&nbsp;</p>
               <p>硕博士读者离校,论文提交方法及获得论文提交回执单地点的指引;</p>
               <p>&nbsp;</p>
               <p>一卡通解挂方法与地点说明;</p>
               <p>&nbsp;</p>
               <p>校友进馆校友卡登记送交开通;</p>
               <p>&nbsp;</p>
               <p>自助复印打印机器的使用指导;</p>
               <p>&nbsp;</p>
               <p>自助还款机的使用指导;</p>
               <p>&nbsp;</p>
               <p>使用图书馆过程中的各种问题咨询,</p>
               <p>&nbsp;</p>
                  <p>遗失物品的保管及领取登记。</p>
          </td>
        </tr>
        <tr>
          <td height="30" style="text-align: center">机器维护与保修</td>
          <td>工作用电脑、打印机、自助借还机、自助复印打印机的维护与报修。</td>
        </tr>
      </tbody>
    </table>


          </div>
          </td>
        </tr>
      </tbody>
    </table>


    </div>
    </body>
    </html>

    (4)页面“关于本馆”程序代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>上海图书馆</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    body{background-color:#CCC;}
    .clear{clear:both;}

    #container{
    background-color:#F0BBBC;
    height:510px;
    width:1500px;
    margin:auto;}
    #container2{
    background-color:#E6ECCC;
    width:1500px;
    height:820px;
    margin:20px auto;
    }

    #picture{height:470px; margin:0px;}

    #label{background-color:#CEDDEC; height:30px;}

    #head1{
    background-color:blue;
    height:30px;
    margin:0px 0px 10px 0px;
    }
    #head2{
    background-color:#FBB9B9;
    height:270px;
    }
    #head3{height:20px;}
    #head4{
    background-color:#B9EBF3;
    height:405px;
    }
    #head5{height:45px;}
    #head6{
    background-color:#F1C93C;
    height:30px;
    }
    #head7{height:60px;}

    #table{
    background-color:#A4F4DC;
    height:760px;
    }
    a:link {
    color: #070707;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    color: #070707;
    }
    a:hover {
    text-decoration: none;
    color: #94CB79;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    </head>


    <body>
    <div id="container">
    <div id="picture">
        <img src="imagines/432x324c.jpg" width="1500" height="471" alt=""/> </div>
        <div id="label">
        <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="50" height="30" align="center"><a href="Untitled-1.html">首页</a></td>
          <td width="50" align="center"><a href="Untitled-2.html">资源</a></td>
          <td width="50" align="center"><a href="Untitled-3.html">服务</a></td>
          <td width="50" align="center"><a href="#"><font color="blue">关于本馆</font></font></a></td>
          <td width="50" align="center"><a href="#">我的图书馆</a></td>
        </tr>
      </tbody>
    </table>
        </div>
    </div>
    <div id="container2">
     <table width="1500" border="1">
      <tbody>
        <tr>
          <td width="238" height="815">
          <div id="head1">
           <p align="center">关&nbsp;&nbsp;于&nbsp;&nbsp;本&nbsp;&nbsp;馆</p></div>
          <div id="head2">
          <div id="head6">本馆概况</div>
          <p>&nbsp;&nbsp;<a href="#">开放时间</a></p>
          <p>&nbsp;&nbsp;<a href="#">功能布局</a></p>
          <p>&nbsp;&nbsp;<a href="#">组织机构</a></p>
          <p>&nbsp;&nbsp;<a href="#">规章制度</a></p>
          <p>&nbsp;&nbsp;<a href="#">研究与交流</a></p>
          <p>&nbsp;&nbsp;<a href="#">图书馆研究生</a></p>
          <p>&nbsp;&nbsp;<a href="#">品牌服务</a></p>
          <p>&nbsp;&nbsp;<a href="#">馆员天地</a></p>
          <p>&nbsp;&nbsp;<a href="#">网站地图</a></p>
          <p>&nbsp;&nbsp;<a href="#">关于我们</a></p>
          </div>
          <div id="head5"></div>
          <div id="head3">
           <p align="right"><font color="blue">>>>>>>>></font></p>
          </div>
          <div id="head4">
          <table width="238" border="0">
      <tbody>
        <tr>
          <td width="238" height="135"><img src="imagines/timg1.jpg" width="238" height="135" alt=""/></td>
        </tr>
        <tr>
          <td height="135"><img src="imagines/timg.jpg" width="238" height="135" alt=""/></td>
        </tr>
        <tr>
          <td height="135"><img src="imagines/timg2.jpg" width="238" height="135" alt=""/></td>
        </tr>
      </tbody>
    </table>


          </div>
          </td>
          <td width="1347">
          <div id="head7">
           <p>首页<span style="font-size: 14px; color: #F01215;">>>关于本馆>>本馆概况</span></p>
           <p>&nbsp;</p>
           <p style="font-size: 24px">本馆概况</p>
          </div>
          <div id="table">
          <div id="head7">
    <p style="text-align: center; font-size: 24px;"><strong>本馆概况</strong></p>
          </div>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;上海大学图书馆由宝山校区的校本部馆、延长校区的文荟馆和嘉定校区的联合馆三个分馆组成。馆舍总面积5.39万平方米,拥有18个阅览室,可提供阅览座位4,044 个;拥有可供师生讨论交流的研究空间,目前有6个研究空间可供预约使用;除国定节假日外,每天开放14小时,每周开放98小时,全馆实行开放式借阅一体化服务,并通过三个校区分馆的馆藏通借通还淡化了校区的界限,为师生提供了良好的阅读和学习环境。</p>
          <p>&nbsp;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;上海大学图书馆拥有丰富的馆藏资源。自1994年四校合并后,紧密配合学校学科发展的步伐,加强了学校新建学科(人文社科类等)的馆藏资源建设,使我馆的馆藏资源涵盖了学校的所有学科,为我校的教学与科研提供了强有力的文献信息保障。20多年来,图书馆在继续增加纸本馆藏的同时,大力发展数字资源,引入大量的国内外电子资源,提供中国知网(CNKI)、万方数据知识服务平台、维普中文科技期刊数据库、超星电子书、新东方多媒体学习平台、Web of Science、Wiley Online Library、Science Direct, Elsevier(SD)、Springer Link等数据库,已形成了由纸本图书、纸本报刊(包括合订本)、电子图书、电子报刊全文数据库、多媒体数据库及二次文献检索平台等所组成的多类型、多载体的综合性馆藏体系。师生还可以通过馆际互借与文献传递服务从国内外图书馆获得本馆没有的文献资源。截止2016年底,图书馆拥有纸本文献401.9万册,当年订购纸质中文报刊1,533种,外文报刊300种;订购数据库75种,电子期刊7.0万种,电子书190万种。图书馆提供歌德电子书借阅机和龙源期刊云借阅机,为读者提供电子图书期刊下载服务。</p>
          <p>&nbsp;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;上海大学图书馆本着服务第一,读者至上的理念,在加强馆藏建设的同时,扩展与深化学科服务,加强与院系的联系,针对教学科研的需求主动开展服务,开设多种信息素养课程与培训,承办课题查新、论文咨询、代检代查等服务,并进行专题性学科服务。</p>
          <p>&nbsp;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;上海大学图书馆采用Aleph信息集成管理系统,配置了总存储容量为180TB的网络存储设备。馆内配备了大量的网络端口和计算机终端,读者可在校园网的任意客户端访问本馆数字资源,进行馆藏的查询、预约和续借等,无线网覆盖全馆,具有良好的网络应用环境;全馆提供自助复印扫描打印服务,校本部馆还提供RFID自助借还书机,读者可进行图书的自助借还。</p>
          <p>&nbsp;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;紧密配合上海大学建设世界一流、特色鲜明的综合性研究型大学的发展战略,上海大学图书馆向着建设具有国际化视野、学科化服务、数字化资源的现代化图书馆的目标不断前进。</p>
          <P>&nbsp;</P>
          <p>&nbsp;</p>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
          <P>&nbsp;</P>
    <P>&nbsp;</P>
          <p align="right">相关链接:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
          <p align="right"><font color="red"><a href="#">校本部馆概况&nbsp;&nbsp;</a></font></p>
          <p align="right"><font color="red"><a href="#">文荟馆概况</a>&nbsp;&nbsp;&nbsp;</font></p>
          <p align="right"><font color="red"><a href="#">联合馆概况</a>&nbsp;&nbsp;&nbsp;</font></p>




          </div>
          </td>
        </tr>
      </tbody>
    </table>


    </div>
    </body>

    </html>


    ps:编程里的图片是图不对题,采用的是其他图书馆图片。吐舌头

    展开全文
  • 静态网页作品-精美个人主页源代码

    千次下载 热门讨论 2011-09-25 20:56:40
    针对很多人为了交作业在网上找静态网页作业,帮一个学生做的个人网页,经过美化修改,第一次发出来供初学者学习参考。 包含6个独立页面,分别为首页index.html、about.html、flash.html、message.html、photo.html、...
  • 静态网页模板html+css

    2017-12-05 19:28:03
    里面包含129套案例集合,html静态网页模板合集,html+css模板,可以选择自己喜欢的样式模板
  • 简单静态网页设计

    2018-06-21 18:19:14
    一个简单网页制作,很适合用来提交老师布置的HTML作业
  • jsp简单静态网页

    2019-08-12 01:54:17
    NULL 博文链接:https://1074457664.iteye.com/blog/2286112
  • python简单实现从静态网页爬取数据 静态网页爬取数据 所谓静态网站就是从网页源代码里面找到所需要内容,那么我们怎么从这样网页中抓取需要的数据呢 步骤思路: 获取网页源代码,html 从html解析出所需要的数据 存储...
  • 源码介绍: 完全免费使用。... 纯静态HTML,绿色源码,无需数据库,试用于各种主机空间。 网页内容可直接使用记事本、写字板或网页编辑器,直接打开就可以修改。 纯净代码,无多余文件、无插件、无恶意广
  • 元素面板 切换至源代码面板Sources单击左侧tipdm文件夹中的index.html文件将在中间显示其包含的完整代码如图所示 使用chrome开发者工具查看网页 2. 源代码面板 切换至网络面板Network需先重新加载页面之后单击index...
  • 设计一个简单静态音乐网站。下载时请注意,此资源只有前端的静态样式,包括首页,歌手详情,音乐论坛,注册等界面设计。并没有数据后端交互。下载后直接打开【index.html】进入首页即可。
  • 一个简单的网页制作作业,学生个人html静态网页制作成品代码下载 一个简单的网页制作作业,学计算机的应该都会遇到要交这样的一个作业,本人做的是球员雷·阿伦的个人主页,分别介绍了基本资料、技术特点、精彩时刻...
  • 使用html、css、div、float、ul写的一个简单静态页面
  • 一号店静态网页代码

    2017-09-07 17:28:24
    大家一起学习······························································································...
  • 简单静态网页爬取

    2021-05-03 15:30:58
    2.简单静态网页爬取 二、使用urllib3实现HTTP请求 1.使用urllib3库实现 每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL 使用浏览器为火狐和chrome浏览器,操作系统为“Windows NT 6.1; Win64; x64” ...

    一、静态网页爬取概述
    1,静态网页介绍在这里插入图片描述
    2.简单静态网页爬取在这里插入图片描述
    二、使用urllib3实现HTTP请求
    1.使用urllib3库实现
    每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述使用浏览器为火狐和chrome浏览器,操作系统为“Windows NT 6.1; Win64; x64”
    在这里插入图片描述

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述请求重试设置在这里插入图片描述在这里插入图片描述
    生成完整HTTP请求

    网页 User-Agent 的获取
    1.网页内右击鼠标点检查
    在这里插入图片描述
    2.点Network
    在这里插入图片描述

    3.按 ctrl+R 刷新
    4.点第一行,查看Headers,找到 User-Agent
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    三.使用requests库实现HTTP请求在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    四、谷歌开发者工具介绍

    使用chrome开发者工具查看网页
    在这里插入图片描述
    也可以单击chrome浏览器右上角快捷菜单,如图所示,单击“更多工具”选项中的“开发者工具”选项,或使用快捷键组合Ctrl+Shift+I。在这里插入图片描述
    chrome开发者工具目前包括了9个面板,界面如图所示。在这里插入图片描述
    chrome开发者工具各面板功能如下。在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述网页源代码属于半结构化数据
    它属于文本,文本是非结构化数据
    但它可以通过对树状结构的索引找到对应元素所在的位置
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    五、使用正则表达式解析网页
    在这里插入图片描述
    例子
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    1.正则表达式的广义化
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    2.使用正则表达式获取网页标题信息在这里插入图片描述
    在这里插入图片描述
    六、用Xpath解析网页
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    七、用 Beautiful Soup解析网页在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 美食网(静态网页

    2016-05-14 12:21:59
    学ASP.NET做的一个课程设计,简单静态网站。 源码直接用Visual Studio运行就行了
  • html静态页面源代码

    热门讨论 2011-12-09 12:53:26
    这里面有四个源代码,大家可以看看!静态网站模板用div+css做的简单静态网站 这个是最近新的
  • NULL 博文链接:https://xiaomy.iteye.com/blog/798156
  • 设计一个简单静态音乐网站。下载时请注意,此资源只有前端的静态样式,包括首页,歌手详情,音乐论坛,注册等界面设计。并没有数据后端交互。下载后直接打开index.html 进入首页即可。
  • 静态HTML家居装修网页设计成品共5个页面,使用JS制作了图片滚动,使用dreamweaver采用DIV CSS布局制作。
  • 主要技术div、css、jquery技术,适合再次开发,网站有各个板块的内容,比如,服饰、车类,男士用品、数码产品、女性化妆品等各类网站。功能:登录、注册、订单、商品列表、购物车等...源码下载地址:请点击》》》 ...

    主要技术div、css、jquery技术,适合再次开发,网站有各个板块的内容,比如,服饰、车类,男士用品、数码产品、女性化妆品等各类网站。功能:登录、注册、订单、商品列表、购物车等相关功能,共计15个网页模板html
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    源码下载地址:请点击》》》

    展开全文
  • 简单的H5网页制作

    2019-01-08 08:56:19
    制作的一个很简单的关于民谣的H5网页,里面有一些简单的hover动画和JQL动画,拿来应付大学作业够了
  • html语言的注释方法 <!--注释内容--> HTML文档基础结构 <!--html语言中的注释--> <!doctype html><!--html文档的文档类型声明:这是一个html的文档,版本是5-->...meta cha...
  • html5 简单实例源代码

    2017-04-27 09:17:27
    html5 简单实例源代码
  • 体育精神 私人教练的简单静态网络
  • 介绍https://blog.csdn.net/weixin_51263734/article/details/113806502
  • 一个简单的html代码,可以用txt或者DW打开,就是很基础的一些含表格,主题可替换

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,557
精华内容 27,422
关键字:

简单静态网页源代码