前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！

感谢大佬的视频：

https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b

源码：https://space.bilibili.com/565112134

使用技术：HTML+CSS+JS（静态网页设计）

主要内容：有关网上个人图书馆。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子p标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，或者点击左方的按钮可以手动切换图片。

代码：

         本馆概况              
           
发展历史
           
              
          12345678910      
北京市海淀区中关村南大街33号
      
12345678910
      
010-66889888
      
570000
                    
本馆概况
       当前位置：主页 > 本馆概况                       
本馆概况
                                     中国国家图书馆位于北京市中关村南大街33号——与海淀区白石桥高粱河、紫竹院公园相邻。是国家总书库，国家书目中心，国家古籍保护中心；是世界最大、最先进的国家图书馆之一。入选第三批中国20世纪建筑遗产项目。2018年10月11日，入选“全国中小学生研学实践教育基地”名单。中国国家图书馆前身是筹建于1909年9月9日的京师图书馆，1931年，文津街馆舍落成（现为国家图书馆古籍馆）；新中国成立后，更名为北京图书馆 ——“1987年新馆落成，1998年12月12日经国务院批准，北京图书馆更名为国家图书馆，对外称中国国家图书馆。 ”
    据2018年10月该图书馆官网信息显示，中国国家图书馆总建筑面积28万平方米，图书馆分为总馆南区、总馆北区和古籍馆，总馆南区主楼为双塔形高楼，采用双重檐形式，孔雀蓝琉璃瓦大屋顶，淡乳灰色的瓷砖外墙，花岗岩基座的石阶，再配以汉白玉栏杆，通体以蓝色为基调，取其用水慎火之意；馆藏文献3768.62万册，其中古籍文献近200万册，数字资源总量超过1000TB，是亚洲规模最大的图书馆，居世界国家图书馆第三位；图书馆共设有阅览室25个、阅览座位5000余个，在编员工1529人，设有33个机构部门。
    2020年5月12日，中国国家图书馆有序恢复开馆，开放区域为国家图书馆总馆南区，实行预约限流入馆。
        返回首页         

2、样貌风采

该页面使用html+css设计结构和样式，将图片img标签设计成排列整齐的卡片，有些还是卡片超链接，鼠标放上去卡片或者卡片上的文字会变色。

代码：

         样貌风采              
           
外 观
           
                
           
总 体
           
                
           
座 位
           
                
           
书 籍
           
                
           
其 他
           
              
          12345678910      
北京市海淀区中关村南大街33号
      
12345678910
      
010-66889888
      
：570000
                      
样貌风采
       当前位置：主页 > 样貌风采 >                
 
                          
远望
          
                          
上空
          
                          
一角
          
                          
阅读
          
                          
桌椅
          
                          
排列
          
                          
仰望
          
                          
远方
          
                          
背景
          
       
         
首页
1
2
下一页
末页
               

3、书籍资源

4、在线留言

该页面使用了form表单技术，可以填写并且提交文字信息，密码会被****字符代替，不会泄露密码，其他的名字则直接用明文的input标签。

5、其他

该页面以img标签嵌入图片+table表格标签嵌入整齐的文字的形式，对图片的内容进行了简要的介绍。

总结

想要看具体效果的同学，可以访问这个链接：

https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b

具体的代码也在该链接下。