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

原创 2016年05月30日 15:59:17

<!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 onsubmit="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"  onfocus="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 onsubmit="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"  onfocus="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"  onfocus="checkHttps" name="word"  size="30"> 
搜索按钮  <input type="submit"value="百度搜索">   将百度二字去掉 改成<button type="submit" value="搜索" class="button">搜索</button>
加入class属性,与CSS3进行对接。
最终完成了功能实现。

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

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

<a href="tencent://message/?uin=qq号">点击</a>

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


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


最后经过几个小时的编写修改,个人网页导航最终成型。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

C++ 单位整型计算器,仅支持带括号的四则运算。初学c++第一个个人作品

//本程序实际意义并不大,初学C++小试牛刀,但是本程序并没有体现出C++语言程序的特点,即主函数简短。但实际上,主函数大部分内容可以转换成一个普通函数,所以这里不再处理。 //这篇博客算是给自己第...

我写的的第一个网页 本地网址导航

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     ...
  • tsdsl
  • tsdsl
  • 2013-01-07 17:57
  • 178

我个人制作的网页网站作品,自学网站制作,自学网页制作网页制作视频教程

要想学做网页,首先得了解制作网页的工具Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。 ...

iOS 个人页面展示(导航条操作)

1.搭建基本界面 在storyboard中自定义一个导航控制器,移除自带的根控制器UITableViewController,重新拖入一个UIViewController,在根控制器上方拖入一个UIV...

网页导航页面

  • 2014-05-18 23:12
  • 3.88MB
  • 下载

web开发的第一个小作品--html svg +css+js时钟效果

先上最后效果图: html结构中使用SVG path来模拟时钟的轮廓,时钟动起来的js代码简单的使用js定时器来制作: 时钟页面在线演示...

第一个作品c#计算器

  • 2008-11-17 12:00
  • 12KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)