kill370354.github.io
/
touch.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="王振"/>
    <meta name="generator" content="Adobe DreamWeaver CC 2017,Hbuilder"/>
    <meta name="keywords" content="HTML, CSS, 个人网页,学生,初级"/>
    <meta name="description" content="这是一所普通高等学校计算机科学与技术专业一年级学生的个人网页，欢迎访问！限于作者水平，可能不能够实现养眼效果，敬请见谅！"/>
    <title>联系方式</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <style>
        .big {
            /*第一个大框*/
            margin: 0 auto;
            /*使div居中*/
            text-align: left;
            /*设置对齐方式*/
            font-family: 楷体;
            /*设置字体*/
            font-size: 24px;
            /*设置字号*/
            border: 1px blue solid;
            /*设置边线*/
            margin-bottom: 10px;
            /*设置底部外边距*/
            padding: 20px 20px;
            /*设置内边距*/
            -webkit-border-radius: 100px;
            /*设置框线的圆角，并使多种浏览器均能解析*/
            -moz-border-radius: 100px;
            border-radius: 100px;
            visibility: hidden;
        }

        .middle {
            /*第二个框*/
            padding: 20px 20px;
            /*设置内边距*/
            border: 1px blue solid;
            /*设置边线*/
            -webkit-border-radius: 100px;
            /*设置框线的圆角，并使多种浏览器均能解析*/
            -moz-border-radius: 100px;
            border-radius: 100px;
        }

        .small {
            /*第三个框*/
            padding: 50px 100px;
            /*设置内边距*/
            border: 1px blue solid;
            /*设置边线*/
            -webkit-border-radius: 100px;
            /*设置框线的圆角，并使多种浏览器均能解析*/
            -ms-border-radius: 100px;
            -o-border-radius: 100px;
            -moz-border-radius: 100px;
            border-radius: 100px;
        }

        p {
            text-indent: 6em;
            /*设置段首自动缩进*/
            font-size: 24px;
            /*设置字号*/
            visibility: hidden;
        }
    </style>
    <script language="javascript" type="text/javascript" src="js/jquery-min.js"></script>
    <!--引用JQ代码，以防js代码无效-->
</head>
<body>
<!--导航项 开始-->
<div class="top">
    <div class="nav" id="nav">
        <ul class="navigation">
            <li>
                <a href="index2.html" target="_blank">基本信息</a>
            </li>
            <li>
                <a href="wuxia.html" target="_blank">兴趣武侠</a>
            </li>
            <li>
                <a href="">联系方式</a>
            </li>
        </ul>
    </div>
    <!--导航项可以拖动位置-->
</div>
<!--导航部分结束-->
<div class="container">
    <!--制作主体部分-->
    <div class="banner">
        <div class="htmlname">联系方式</div>
        <!--制作banner部分，说明本页面是联系方式页面-->
    </div>
    <p>如果您有什么意见或者建议，欢迎和我联系！联系方式如下：</p>
    <!--欢迎提交意见或建议-->
    <div class="big">
        <!--联系方式 开始-->
        <div class="middle">
            <div class="small">
                <address>
                    <!--地址标记-->
                    手机：188 7522 0381
                    <!--手机号--><br/>
                    <br/>
                    <a href="tencent://message/?uin=750515918&Site=&Menu=yes">点击这里和我进行QQ聊天</a>
                    <!--这是在网上找的效果-->
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=750515918&site=qq&menu=yes"><img border="0"
                                                                                                              src="images/button_111.gif"
                                                                                                              alt="点击这里给我发消息"
                                                                                                              title="点击这里给我发消息"/></a>
                    <!--这是QQ官方给的链接--><br/>
                    <br/>
                    邮箱： <a href="mailto:kill370354@qq.com">kill370354@qq.com</a>
                    <!--说明链接效果-->
                    <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=kill370354@qq.com"
                       style="text-decoration:none;"><img src="images/ico_mailme_02.png" lt="点击这里给我发邮件"
                                                          title="点击这里给我发邮件"/></a>
                    <!--这是QQ邮箱-->
                    <br/>
                    <br/>
                    <br/>
                    地址： 重庆市 沙坪坝区 虎溪镇 重庆师范大学（大学城校区）
                    <!--实际地址-->
                    <br/>
                    <br/>
                    邮编：400000
                    <!--邮编-->
                </address>
            </div>
            <!--联系方式 结束-->
        </div>
    </div>
    <p>相信您的帮助一定会让我做得更好！谢谢！</p>
    <!--表达由衷的感激之情-->
    <div class="foot" style="font-weight:normal;    font-family:宋体;">重庆师范大学计算机与信息科学学院16计科王振制作，版权所有。</div>
    <!--制作脚注部分，为防止字体显示不正常，特设行内样式-->
    <div class="decoration"><img src="images/hnbc.png" width="133" height="600"></div>
    <!--装饰图片-->
    <div class="up">
        <img src="images/top.png" width="50" height="50"></div>
    <!--向上箭头-->
    <div id="code1" class="code"><img src="images/code.png" title="扫一扫，用手机看" alt="扫一扫，用手机看" width="50" height="50">
    </div>
    <!--小二维码-->
    <div id="code2"><img src="images/code.png" title="扫一扫，用手机看" alt="扫一扫，用手机看" width="280" height="280"></div>
    <!--大二维码-->
</div>
<script type="text/javascript" src="js/base.js">
</script>
<!--引用外部js代码，也就是箭头和二维码部分-->
<script>
    (function ($) {
        $(document).ready(function () {
            setTimeout(function () {
                $("p").css("visibility", "visible"); //给文字加CSS3动画
                $("p").addClass("upIn").show();
            }, 3300);
            setTimeout(function () {
                $(".big").css("visibility", "visible"); //给联系方式加CSS3动画
                $(".big").addClass("leftInbounce").show();
            }, 3800);
        });
    })(jQuery);
</script>
</body>
</html>