因为弄了花生壳和云服务器，所以搭建一个个人介绍向的小博客
<!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>
云服务器的搭建还是比较容易的
网址：http://120.26.187.36/zz4.000/blog.html