一个简单的网页系统(-) 首页-优快云博客

本文链接：https://blog.youkuaiyun.com/lccla120712/article/details/70832873

本文介绍了作者近期制作的一个简单网页系统，用于分享旅行经历。该系统利用了leaflet.js、d3.js、myfocus.js和jquery等JavaScript库，实现了效果展示、结构分析、代码解析及后期工作规划。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单的网页系统（一）

最近心血来潮写了一个网页系统，用来分享自己游玩的地方。主要使用到了leaflet.js d3.js myfocus.js jquery等JS 库。

一. 效果展示

二. 结构分析

（1）导航栏： logo可以在线免费自定义制作。导航栏无非是<ul></ul> 里面包含几个<li>标签，标签里面套一个超链接。

并设置ul list-style:none; 以及链接a text-decoration:none; float:left; 以及a 的四种状态。

（2）图片栏：使用了myFocus 的JS库，比较简单。类似于BootStrap，为<div>添加相应的类名即可。

（3）展示栏：分为左中右，结构相似。灵活使用float属性。此处使用动态分配每部分宽度。

三. 代码分析

代码格式看起来比较乱，尤其是style部分没有对齐(在代码中对齐可能显示在博客中有 <span>标签)。不过能通过格式化软件格式化

<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;

}
body,html{
width: 100%;
font-family: '微软雅黑';
}
.menu{
   
   	
height: 40px;
background-color: rgb(234,234,234);
width: 100%;
margin-bottom: 1px;
}
.front{
height:10px;
}
.menu ul{
 list-style: none;
margin-left: 10%;
margin-top: 0;
height: 40px;
line-height: 40px;
}
.menu img{
float: left;
margin-right: 5%;
}
.menu ul li{
list-style: none;
float: left;
width:15%;
padding: 0 4%;
height:40px;
line-height: 40px; 
}
.menu ul li a{
padding: 0 20%;
text-decoration: none;
color: black;
background-color: rgba(234,234,234,0.8);
text-align: center;
}
.menu ul li a:hover,.menu ul li a:active{
color: white;
  	
background-color:  rgba(229,229,229,0.2);
}
#boxID{
          &nbs