原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）

index.js:

function myTime(){

    let time=new Date();

    let hh=time.getHours();  //时

    let mm=time.getMinutes();  //分

    let ss=time.getSeconds();  //秒

    // Math.floor() 向下取整

    document.getElementById("1").innerText=Math.floor(hh/10);

    document.getElementById("2").innerText=hh%10;

    document.getElementById("4").innerText=Math.floor(mm/10);

    document.getElementById("5").innerText=mm%10;

    document.getElementById("7").innerText=Math.floor(ss/10);

    document.getElementById("8").innerText=ss%10;

}

// 一秒执行一次

setInterval(myTime,1000);

运行效果：

4. 搜索框

---

接下来加入我们的搜索框

<div class="midbox">

   <form action="http://www.baidu.com/s"  method="get" target="_blank">

      <input type="search" name="wd" id="seaid" placeholder="search something" autofocus="autofocus" autocomplete="off">

      <input type="submit" id="subid" value="">

   </form>

</div>

设置搜索框样式

.midbox{

    float: left;

    display: inline-block;

    background:transparent;

    width: 100%;

    height: 40px;

}

.midbox form{

    width: 600px;

    height:40px;

    margin:0 auto;

}

#seaid{

    float:left;

    width: 550px;

    height: 40px;

    outline: none;

    border:none;

    font-size: 18px;

    text-indent: 1em;

    background:rgba(255,255,255,.2);

}

#subid{

    float:left;

    width: 50px;

    height: 36px;

    outline: none;

    background:transparent;

    border:0;

    font-size: 18px;

    background: url("../images/search.svg") no-repeat center;

    background-position-y: 4px;

    cursor:pointer;



}

运行效果：

至此我们的头部就完成啦！

三、主体

=======================================================================

主体和footer也都很简单，基本上都是一些图标和样式设置。

添加元素

index.html:

<div class="container">

    <ul>

        <li><a href="https://wx.qq.com/" target="_blank"><img src="images/微信.svg" alt=""></a></li>

        <li><a href="https://s.weibo.com/top/summary?Refer=top_hot&topnav=1&wvr=6" target="_blank"><img src="images/微博.svg" alt=""></a></li>

        <li><a href="#" target="_blank"><img src="images/collect.svg" alt=""></a></li>

        <li><a href="https://email.163.com/" target="_blank"><img src="images/邮箱.svg" alt=""></a></li>

        <li><a href="#" target="_blank"><img src="images/相册.svg" alt=""></a></li>

        <li><a href="https://www.bilibili.com/" target="_blank"><img src="images/哔哩哔哩.svg" alt=""></a></li>

        <li><a href="https://music.163.com/" target="_blank"><img src="images/网易云.svg" alt=""></a></li>

        <li><a href="https://mp.weixin.qq.com" target="_blank"><img src="images/公众号.ico" alt=""></a></li>

        <li><a href="https://tieba.baidu.com" target="_blank"><img src="images/贴吧.svg" alt=""></a></li>

        <li><a href="http://www.baidu.com" target="_blank"><img src="images/百度.svg" alt=""></a></li>

        <li><a href="http://www.google.com" target="_blank"><img src="images/chrome.svg" alt=""></a></li>

        <li><a href="https://pan.baidu.com" target="_blank"><img src="images/百度网盘.svg" alt=""></a></li>

        <li><a href="https://www.iconfont.cn/" target="_blank"><img style="width:55px;height:55px;" src="images/iconfont.svg" alt=""></a></li>

        <li><a href="https://www.materialui.co/colors" target="_blank"><img src="images/颜色.svg" alt=""></a></li>

        <li><a href="https://github.com/" target="_blank"><img src="images/github.svg" alt=""></a></li>

        <li><a href="https://gitee.com/" target="_blank"><img src="images/码云.svg" alt=""></a></li>

        <li><a href="https://cloud.tencent.com" target="_blank"><img src="images/腾讯云.svg" alt=""></a></li>

        <li><a href="https://www.youkuaiyun.com/" target="_blank"><img src="images/csdn.svg" alt=""></a></li>

        <li><a href="https://www.w3school.com.cn/index.html" target="_blank"><img src="images/w3c.svg" alt=""></a></li>

        <li><a href="http://www.logofree.cn/" target="_blank"><img src="images/LOGO.svg" alt=""></a></li>

        <li><a href="https://cli.im/" target="_blank"><img src="images/草料.svg" alt=""></a></li>

        <li><a href="https://www.freecodecamp.org/" target="_blank"><img src="images/codecamp.svg" alt=""></a></li>

        <li><a href="https://www.v2ex.com/" target="_blank"><img src="images/v2ex.svg" alt=""></a></li>

        <li><a href="https://www.icourse163.org/" target="_blank"><img src="images/慕课.svg" alt=""></a></li>

        <li><a href="https://open.163.com/" target="_blank"><img src="images/公开课.svg" alt=""></a></li>

        <li><a href="https://www.canva.cn/" target="_blank"><img src="images/canvas.svg" alt=""></a></li>

        <li><a href="https://www.zhihu.com/hot" target="_blank"><img src="images/知乎.svg" alt=""></a></li>

        <li><a href="https://icomoon.io/" target="_blank"><img src="images/iconmoon.ico" alt=""></a></li>

        <li><a href="https://www.iqiyi.com/home2020" target="_blank"><img src="images/爱奇艺.svg" alt=""></a></li>

        <li><a href="https://v.qq.com/" target="_blank"><img src="images/腾讯视频.svg" alt=""></a></li>

        <li><a href="https://www.runoob.com/" target="_blank"><img src="images/菜鸟.svg" alt=""></a></li>

        <li><a href="https://www.jd.com" target="_blank"><img src="images/京东.svg" alt=""></a></li>

        <li><a href="https://www.tmall.com" target="_blank"><img src="images/天猫.svg" alt=""></a></li>

    </ul>

</div>

设置样式：

style.css

li{

    list-style: none;

    display: inline-block;

}

.container{

    width: 1080px;

    margin: 0 auto;

    margin-top:40px;



}

.container ul {

    width: 100%;

    height: 100%;

}

.container ul li{

    margin:20px;

    width: 60px;

    height: 60px;

    background-color: rgba(0,0,0,0);

    border-radius: 5px;



    text-align: center;

}

.container ul li:hover{

    transform:translateY(-3px);

    transition:all 0.2s;

}

.container ul li a img{

    margin:5px;

    width: 48px;

    height: 48px;

    opacity: 1;

}

完成后的效果：

四、底部

=======================================================================

与主题部分相似，多了一个鼠标悬浮于底部的hover效果，都是较为基础的。

index.html:

<footer>

    <ul>

        <li><a href="https://mp.weixin.qq.com" target="_blank"><img src="images/公众号.ico" alt=""></a></li>

        <li><a href="https://www.bilibili.com/" target="_blank"><img src="images/哔哩哔哩.svg" alt=""></a></li>

        <li><a href="https://github.com/" target="_blank"><img src="images/github.svg" alt=""></a></li>

        <li><a href="https://pan.baidu.com" target="_blank"><img src="images/百度网盘.svg" alt=""></a></li>

        <li><a href="https://www.iconfont.cn/" target="_blank"><img src="images/iconfont.svg" alt=""></a></li>

        <li><a href="https://www.materialui.co/colors" target="_blank"><img src="images/颜色.svg" alt=""></a></li>

        <li><a href="http