第一个页面作品--个人网页导航

最新推荐文章于 2024-04-24 19:08:26 发布

JinYF1992

最新推荐文章于 2024-04-24 19:08:26 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/JinYF1992/article/details/51538659

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>实战一</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<header id="header">
    <div class="center">
        <h1 class="logo"></h1>
        <nav class="link">
            <h2 class="none">导航</h2>
            <ul>
        <li><a href="tencent://message/?uin=">启动QQ</a></li>
        <li><a href="https://wx.qq.com/" target="_blank">打开微信</a></li>
        <li><a href="http://weibo.com/" target="_blank">新浪微博</a><</li>
            </ul>
        </nav>
    </div>
</header>
<div id="search">
    <div class="center"></div>
    <form οnsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
        <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
        <a href="https://www.baidu.com/" target="_blank"></a>

        <input type="text"  οnfοcus="checkHttps" placeholder="输入搜索相关内容" class="search" name="word"  size="30">

        <button type="submit" value="搜索" class="button">搜索</button>
    </form>
    <script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
    <script>
        function checkHttps () {
            BaiduHttps.useHttps();
        }
        function baiduWithHttps (formname) {
            var data = BaiduHttps.useHttps();
            if (data.s === 0) {
                return true;
            }
            else {
                formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
                return true;
            }
        }
    </script>


</div>
<div id="menu">
<section  class="center">
    <h2>常用</h2>
</section>
    <figure>
        <a href="http://www.qq.com/" target="_blank"></a>
        <img src="img/腾讯.jpg" alt="">
        <div>
            <em class="sat">中国浏览量最大的中文门户网站</em>
            <span class="score"><strong>腾讯网</strong></span>
        </div>
        <div class="type">腾讯</div>
    </figure>
    <figure>
        <a href="http://www.sina.com.cn/" target="_blank"></a>
        <img src="img/sina.jpg" alt="">
        <div>
            <em class="sat">为全球用户24小时提供全面及时的中文资讯</em>
            <span class="score"><strong>新浪网</strong></span>
        </div>
        <div class="type">新浪</div>
    </figure>
    <figure>
        <a href="http://www.163.com/" target="_blank"></a>
        <img src="img/网易.jpg" alt="">
        <div>
            <em class="sat">最有态度的网站</em>
            <span class="score"><strong>网易</strong></span>
        </div>
        <div class="type">网易</div>
    </figure>
    <figure>
        <a href="http://www.huxiu.com/" target="_blank"></a>
        <img src="img/虎嗅.png" alt="">
        <div>
            <em class="sat">带给你最新的资讯</em>
            <span class="score"><strong>虎嗅</strong></span>
        </div>
        <div class="type">虎嗅</div>
    </figure>
    <figure>
        <a href="https://www.zhihu.com/" target="_blank"></a>
        <img src="img/知乎.png" alt="">
        <div>
            <em class="sat">知无不言</em>
            <span class="score"><strong>知乎</strong></span>
        </div>
        <div class="type">知乎</div>
    </figure>
    <figure>
        <a href="http://36kr.com/" target="_blank"></a>
        <img src="img/36kr.jpg" alt="">
        <div>
            <em class="sat">为创业者提供最好的产品和服务</em>
            <span class="score"><strong>36氪</strong></span>
        </div>
        <div class="type">36kr</div>
    </figure>
    <figure>
        <a href="http://www.woshipm.com/" target="_blank"></a>
        <img src="img/人人都是产品经理.jpg" alt="">
        <div>
            <em class="sat">产品经理、产品爱好者学习交流平台</em>
            <span class="score"><strong>人人都是产品经理</strong></span>
        </div>
        <div class="type">人人都是产品经理</div>
    </figure>
    <figure>
        <a href="http://www.iqiyi.com/" target="_blank"></a>
        <img src="img/爱奇艺.jpg" alt="">
        <div>
            <em class="sat">中国领先的视频门户</em>
            <span class="score"><strong>爱奇艺</strong></span>
        </div>
        <div class="type">爱奇艺</div>
    </figure>
    <figure>
        <a href="http://www.youku.com/" target="_blank"></a>
        <img src="img/youku.png" alt="">
        <div>
            <em class="sat">中国领先的视频网站</em>
            <span class="score"><strong>优酷</strong></span>
        </div>
        <div class="type">优酷</div>
    </figure>
    <figure>
        <a href="https://www.douban.com/" target="_blank"></a>
        <img src="img/豆瓣.png" alt="">
        <div>
            <em class="sat">提供图书、电影、音乐唱片的推荐</em>
            <span class="score"><strong>豆瓣</strong></span>
        </div>
        <div class="type">豆瓣</div>
    </figure>
    <figure>
        <a href="http://bbs.hupu.com/" target="_blank"></a>
        <img src="img/hupu.png" alt="">
        <div>
            <em class="sat">最专业的篮球网站</em>
            <span class="score"><strong>虎扑</strong></span>
        </div>
        <div class="type">虎扑</div>
    </figure>
    <figure>
        <a href="http://www.jianshu.com/" target="_blank"></a>
        <img src="img/简书.png" alt="">
        <div>
            <em class="sat">最简洁的博客</em>
            <span class="score"><strong>简书</strong></span>
        </div>
        <div class="type">简书</div>
    </figure>
    <figure>
        <a href="https://www.taobao.com/" target="_blank"></a>
            <img src="img/淘宝.jpg" alt="">
            <div>
                <em class="sat">只有想不到，没有买不到</em>
                <span class="score"><strong>淘宝</strong></span>
            </div>
            <div class="type">淘宝</div>
    </figure>
    <figure>
        <a href="http://www.qunar.com/" target="_blank"></a>
            <img src="img/去哪儿.png" alt="">
            <div>
                <em class="sat">特价机票,超值酒店,省心省钱,聪明你的旅行!</em>
                <span class="score"><strong>简书</strong></span>
            </div>
            <div class="type">去哪儿</div>
    </figure>
    <figure>
        <a href="http://www.meituan.com/" target="_blank"></a>
            <img src="img/美团.png" alt="">
            <div>
                <em class="sat">吃喝玩乐好帮手,专业品质团购网</em>
                <span class="score"><strong>美团</strong></span>
            </div>
            <div class="type">美团</div>
    </figure>
</div>

    <footer id="footer">
         <div class="block">
             <h2>文艺</h2>
             <hr>
             <ul>
                 <li><a href="https://wuzhi.me/last" target="_blank">吾志</a></li>
                 <li><a href="http://www.kdatu.com/" target="_blank">看大图</a></li>
                 <li><a href="http://youqu.de/" target="_blank">有趣的</a></li>
                 <li><a href="http://www.sketchswap.com/" target="_blank">一画换一画</a></li>
                 <li><a href="http://www.topit.me/" target="_blank">收录美好的图片it.me</a></li>
             </ul>
         </div>

        <div class="block">
            <h2>小众</h2>
            <hr>
            <ul>
                <li><a href="http://www.qingfanqie.com/" target="_blank">青番茄</a></li>
                <li><a href="http://www.duitang.com/" target="_blank">堆糖网 </a></li>
                <li><a href="http://www.xiachufang.com/" target="_blank">下厨房</a></li>
                <li><a href="http://ondream.org/" target="_blank">在梦上</a></li>
                <li><a href="http://xianguo.com/hot" target="_blank">鲜果</a></li>
            </ul>
        </div>

        <div class="block">
            <h2>青年</h2>
            <hr>
            <ul>
                <li><a href="http://www.zimuzu.tv/" target="_blank">人人影视</a></li>
                <li><a href="http://www.xiangdang.net/" target="_blank">香当</a></li>
                <li><a href="http://www.blouth.com/portal.php" target="_blank">花开暖年</a></li>
                <li><a href="http://blah.me/category/21" target="_blank">Blah书库</a></li>
                <li><a href="http://www.u148.net/" target="_blank">有意思吧</a></li>
            </ul>
        </div>
        <div class="bottom">Copyright © Jin| 浙</div>
    </footer>

</body>
</html>

@charset "utf-8";

body {font-family:sans-serif;}

body,h1,h2,ul,p{
    margin: 0;
    padding: 0;
}
ul{
    list-style: outside none none;
}
a{
    text-decoration: none;
}
.none{
    display: none;
}
#header {
    width: 100%;
    min-width: 1263px;
    height: 65px;
    background-color:#333;
    box-shadow: 0 11px 10px rgba(0,0,0,0.3);//导航栏阴印
    position: relative;
    z-index: 9999;
}
#header .center{
    width: 1263px;
    height: 65px;
    margin: 0 auto;
}
#header .logo{
    margin: 1px;
    width:156px;
    height:62px;
    background-image:url(img/LOGO.png);
    text-indent: -9999px;
    float: left;
}
#header .link{
    width: 1000px;
    height: 65px;
    line-height: 65px;
    color: #eee;
    float: right;
}
#header .link li{
    width: 120px;
    text-align: center;
    float: right;
}
#header .link a{
    color: #eee;
    display: block;
}
#header .link a:hover,
#header .active a{
    background-color: #000;
}

#search{
    width: 100%;
    min-width: 1263px;
    height: 550px;
    background: url(img/首页风景图.jpg) no-repeat center;
    position: relative;
}

#search .center{
    width: 600px;
    height: 60px;
    background-color: #000;
    position:absolute ;
    top:50%;
    left: 50%;
    margin: -30px 0 0 -300px;
    opacity: 0.6;
    border-radius: 10px;
}

#search .search{
    width: 446px;
    height: 52px;
    background-color: #fff;
    position:absolute ;
    top:50%;
    left: 50%;
    margin: -27px 0 0 -296px;
    color: #666;
    border: 1px solid #666;
    border-radius: 10px;
    font-size: 24px;
    padding: 0 10px;
    outline: none;
}

#search .button{
    width: 120px;
    height: 54px;
    background-color: #eee;
    position:absolute ;
    top:50%;
    left: 50%;
    margin: -27px 0 0 175px;
    color: #666;
    border: 1px solid #666;
    border-radius: 10px;
    font-size: 24px;
    outline: none;
    cursor: pointer;
    font-weight: bold;
}

#menu{
    width: 1363px;
    height: 1700px;
    background-color: #CCCCCC;
    margin: 30px auto;
    text-align: center;
}


#menu .center h2{
    font-size: 30px;
    letter-spacing: 2px;
    color: #666;
    margin: 10px 0;
}

#menu .center p{
    color: #666;
    margin: 10px 0;
}

#menu figure{
    border: 1px solid  #ddd;
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
    margin: 25px 2px;
    width: 400px;
    background-color: white;
    text-align: left;
    position: relative;
    cursor: pointer;
}

#menu figure img{
    vertical-align:middle;
}

/*#menu figcaption{
    color: #777;
    line-height: 1.5;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 7px 0 5px 0;
}*/

#menu .title{
    color: #333;
    font-weight: normal;
}

#menu .sat{
    float:right;
    font-size: 13px;
    color: #999;
    font-style: normal;
    position: relative;
    top:5px;
    right: 5px;
}

#menu .score{
    color: #f60;
    font-size: 14px;
}

#menu .score strong{
     font-size: 20px;
    letter-spacing: 1px;
}

#menu .type{ // 标签
    width: 90px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    background-color:#ccc;
    position: absolute;
    top:4px;
    left: 4px;
}

#footer{
    width: 100%;
    height: 360px;
    background-color: #83858C;
    text-align: center;
}

#footer .top{
    width:1263px;
    height: 280px;
    margin: 0 auto;
}

#footer .block{
    width:410px;
    height: 280px;
    display: inline-block;
    text-align: left;
    color: #ccc;
    vertical-align: top;

}

#footer a:link,
#footer a:visited {
    color:#000000;
    text-decoration:underline;
}
#footer a:hover,
#footer a:active {
    color:#e0e7ec;
    text-decoration:none;
}

#footer h2{
    font-size: 24px;
    font-weight: normal;
    padding: 20px 0 0 20px;
}

#footer hr{
    width: 90%;
    border: 1px dashed #333;
}

#footer ul{
    font-size: 18px;
    color: #000000;
    text-indent: 20px;
    line-height: 2;
}

#footer .bottom{
    height: 80px;
    line-height: 80px;
    background-color: #000;
    color: #777;
    text-align: center;
    border-top: 1px solid #444;
}

开始自学Html5+CSS3+JS已经两个多月，现在才开始写第一个自己脑海中的作品。

因为是第一个，所以只用到一些基本知识，打算做一个个人网页导航类页面，把自己常用的网站链接放到页面中，并用自己喜欢的排版方式进行排列。

这里对一些简单步骤就不一一写明。讲讲主要遇到的问题。

1.百度搜索框的引入。

自己的页面能进行搜索功能，这是必不可少的，刚开始为了图方便，做了一个阉割版，只是对搜索按钮加了一个百度的超链接，搜索框并无实际功能。

但是在页面最终几乎成型的时候，觉得不能草草了事，于是决定找到方法，完成功能实现。

在百度知道中找到答案。

在百度站长平台中的网站组建中找到百度搜索框代码。

<form οnsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
    <input name="tn" type="hidden" value="SE_zzsearchcode_shhzc78w">
    <a href="https://www.baidu.com/" target="_blank">
        <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="Baidu" align="bottom" border="0">
    </a>
    <input type="text"  οnfοcus="checkHttps" name="word"  size="30">
    <input type="submit"value="百度搜索">
</form>
<script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>
<script>
    function checkHttps () {
        BaiduHttps.useHttps();    
    };
    function baiduWithHttps (formname) {
        var data = BaiduHttps.useHttps();
        if (data.s === 0) {
            return true;
        }
        else {
            formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
            return true;
        }
    };
</script>

将代码复制到自己的页面中。

接着去掉“百度图片”<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="Baidu" align="bottom" border="0">。

将输入文本框 <input type="text" οnfοcus="checkHttps" name="word" size="30">

搜索按钮 <input type="submit"value="百度搜索"> 将百度二字去掉改成< button type= "submit" value= "搜索" class= "button">搜索</ button>

加入class属性，与CSS3进行对接。

最终完成了功能实现。

2.想从网页中加入启动QQ和微信等PC程序的功能按钮。

在网上查找到在QQ登陆在线的情况下，弹出与指定联系人对话框的代码如下：

我将QQ号写成我自己的进行实验，发现功能可以实现。弹出“您无法与自己聊天”对话框。

但是仍无法实现直接从网页启动QQ程序的功能。

经过多方查找办法，仍旧没有头绪的时候，忽然想到先将自己在线的QQ下线，然后再进行点击选项，发现QQ进行了启动登陆操作，登陆完毕后，接着弹出“您无法与自己聊天”框，然后我将代码中的QQ删除，讲位置留空，再次进行实验，这次直接成功，QQ启动，无对话框弹出。功能完美实现。

但是要想从网页中直接点击启动PC中如WORD，或者游戏客户端等程序此问题没有解决。这个问题在这里先不做讨论，等下一个作品再去实现。