【第22期】观点:IT 行业加班,到底有没有价值?

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

原创 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,或者游戏客户端等程序此问题没有解决。这个问题在这里先不做讨论,等下一个作品再去实现。


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


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

相关文章推荐

Javascript高性能动画与页面渲染

Javascript高性能动画与页面渲染 作者 李光毅 发布于 2014年4月30日 | 17 讨论 No setTimeout, No setInterval 如果你不...

前端知识点

本文旨在加深对前端知识点的理解,资料来源于网络,由(博客:http://segmentfault.com/u/trigkit4) 收集整理。 一些开放性题目 1.自我介绍:除了基本个人信息以外...

勿忘初心不负梦想

勿忘初心不负梦想 转眼又是一年,2016年7月3号是自己正式参加工作两年,入职一家新公司工作两个月的日子。每年到这个时间点,总是想要写点儿什么总结一下。前半年除了学习提高专业技能外,主要读了...

前端面试题

你如何理解HTML结构的语意化? 1、去掉或样式丢失的时候能让页面呈现清晰的结构。 2、屏幕阅读器(如果访客有视障)会完全根据你的标记来"读"你的网页。 3、PDA、手机等设备可能无法像...

Web网页简单的静态导航菜单的制作

Web网页导航菜单的制作最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单,很基础的东西。 思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单 本文结构: 1...

用HTML5做的导航条(步骤非常详细)

转载请注明出处:这里写链接内容 首先准备网页背景图片和导航背景图片,放在同一目录下的images文件夹中 编写html文件 u011731233
  • u011731233
  • 2015-05-27 11:37
  • 14441
  • 网页导航菜单制作

    导航部分可分为三部分: 第一部分:登陆/注册 第二部分:导航,无序列表部分 第三部分:图标部分 具体步骤: 1. 先新建一个div容纳整个导航部分的内容 2. 再新建p标签...

    html里制作简单导航栏

    今天简单的做了一下网页里的导航栏。 效果如下: 代码: 实验3 ul{/*设置导航栏的框框*/ margin: 30px auto;/*框框整体的位...

    怎么制作一键导航

    关于导航,我想大家都会用,那么怎么去制作一个网页导航呢,怎样去制作一个简单的导航呢。 在这里我喜欢使用百度地图导航,实现很简单,只需要你传入目的地的经、纬度就可以了。第一、怎么去获取目的地的经、纬度...

    css+div 制作网页导航栏

    课程开始: 前三节课, 我们知道了什么是 “内容块状元素和内联元素” , 以及 XHTML+CSS 布局的 核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”, 这 次我们就...
    收藏助手
    不良信息举报
    您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
    举报原因:
    原因补充:

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