个人博客搭建

因为弄了花生壳和云服务器，所以搭建一个个人介绍向的小博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>林佳鹏的个人小博客</title>
    <meta name="Keywords" content="关键词">
    <meta name="description" content="描述">
<style type="text/css">
    *{margin: 0;padding: 0;}
    #top{margin: 0 auto;width: 1000px;}
     #top1{
      /* 设置宽度高度背景颜色 */
      height: auto; /*高度改为自动高度*/
      width:100%;
      margin-left: 0;
      text-align:center;
      background:rgb(189, 181, 181);
      top: 20;/*离顶部的距离为0*/
      margin-bottom: 5px;
      font-size: 20px;
   }
    #navbg{background-color:#ff3399;width: 100%;height: auto }
    #navbg nav{width: 100%;height:auto;margin: 0 auto}
    #navbg nav a{color: #ffffff;font-size: 14px;font-family: 微软雅黑;width: 160px;height: 37px;
        display: block;float:left;text-decoration: none;text-align: center;line-height: 37px; }
    #navbg nav a:hover{background:#e50065}
    .scrollNav{position: fixed;left: 0;top: 0}
     #div_music{
      display:block;bottom:0px;
      right:1px!important;
      right:18px;
      width:auto;
      line-height:30px;
      position:fixed;
      border:0px;
      text-align:center;
   }
   
</style>
</head>
<body>
<div id="navbg">
    <nav>
        <a href="aboutme.html">个人介绍</a>
        <a href="#">我的爱好</a>
        <a href="#">联系方式</a>
        <a href="#">我的代码</a>
        <a href="vedio.html">看个视频</a>
        <a href="blog.html">留个言</a>
    </nav>
</div>

<div id="top1"><img src="images/22.jpg" height="1000" width="1600"/></div>

 <div id="div_music" >
     <audio src="images/以冬 - 我的一个道姑朋友.mp3" controls></audio>
   </div>     

<script language="JavaScript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    var topH=$("#top").height();//获取头部高度
    var navbg=$("#navbg");
    //获取浏览器窗口
    $(window).scroll(function () {
        if($(window).scrollTop()>topH){
            navbg.addClass("scrollNav")//添加样式
        }else{
            navbg.removeClass("scrollNav")
        }
    });
});
</script>
</body>
</html>
View Code

云服务器的搭建还是比较容易的

网址：http://120.26.187.36/zz4.000/blog.html

posted @ 2020-03-24 09:06  林某大帅比  阅读(89)  评论(0)  编辑  收藏  举报