静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

这篇具有很好参考价值的文章主要介绍了静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b

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

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:有关网上个人图书馆。

主要内容

1、首页

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

静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

最上方使用li标签+css设计制作的菜单导航,还有使用js实现的轮播图,可以自动切换图片,或者点击左方的按钮可以手动切换图片。
静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript
代码:

<div class="product sub_pro"> 
  <!--left-->
  <div class="product01">
    <div class="product07">本馆概况</div>
    <!--left nav-->
    <div class="sidenav">
      <ul>
        
        <li> <a href="index-2.htm"  title="发展历史" class="sidenava">
          <p>发展历史</p>
          </a> </li>
        
      </ul>
    </div>
    <div class="l_contact">
      <div class="lcon_tel">12345678910</div>
      <p class="lmap">北京市海淀区中关村南大街33号</p>
      <p class="ltel">12345678910</p>
      <p class="lfix">010-66889888</p>
      <p class="lemail">570000</p>
    </div>
  </div>
  <!--left end-->
  <div class="product02">
    <div class="content_com_title">
      <h2>本馆概况</h2>
      <div class="bread"> 当前位置:<a href="index.htm" >主页</a> > <a href="index-1.htm" >本馆概况</a> </div>
    </div>
    <div class="content">
      <div class="view">
        <h1 class="view-title">本馆概况</h1>
        <div class="bshare-custom view-share" ><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a></div>
       <script type="text/javascript" charset="utf-8" src="js/buttonlite.js" ></script> 
        <script type="text/javascript" charset="utf-8" src="js/bsharec0.js" ></script> 
        &nbsp;&nbsp;&nbsp;&nbsp;中国国家图书馆位于北京市中关村南大街33号&mdash;&mdash;与海淀区白石桥高粱河、紫竹院公园相邻。是国家总书库,国家书目中心,国家古籍保护中心;是世界最大、最先进的国家图书馆之一。入选第三批中国20世纪建筑遗产项目。2018年10月11日,入选“全国中小学生研学实践教育基地”名单。
中国国家图书馆前身是筹建于1909年9月9日的京师图书馆,1931年,文津街馆舍落成(现为国家图书馆古籍馆);新中国成立后,更名为北京图书馆 &mdash;&mdash;&ldquo;1987年新馆落成,1998年12月12日经国务院批准,北京图书馆更名为国家图书馆,对外称中国国家图书馆。 &rdquo;
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;据2018年10月该图书馆官网信息显示,中国国家图书馆总建筑面积28万平方米,图书馆分为总馆南区、总馆北区和古籍馆,总馆南区主楼为双塔形高楼,采用双重檐形式,孔雀蓝琉璃瓦大屋顶,淡乳灰色的瓷砖外墙,花岗岩基座的石阶,再配以汉白玉栏杆,通体以蓝色为基调,取其用水慎火之意;馆藏文献3768.62万册,其中古籍文献近200万册,数字资源总量超过1000TB,是亚洲规模最大的图书馆,居世界国家图书馆第三位;图书馆共设有阅览室25个、阅览座位5000余个,在编员工1529人,设有33个机构部门。</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;2020年5月12日,中国国家图书馆有序恢复开馆,开放区域为国家图书馆总馆南区,实行预约限流入馆。</p>
 </div>
      <div class="page"> <a href="index.htm"  title="返回首页" class="back theme_color">返回首页</a> </div>
    </div>
  </div>
  <div class="clear"></div>
</div>
2、样貌风采

该页面使用html+css设计结构和样式,将图片img标签设计成排列整齐的卡片,有些还是卡片超链接,鼠标放上去卡片或者卡片上的文字会变色。
静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

代码:

<div class="product sub_pro"> 
  <!--left-->
  <div class="product01">
    <div class="product07"><b>样貌风采</b></div>
    <!--left nav-->
    <div class="sidenav">
      <ul>
        
        <li> <a href="index-4.htm"  title="外 观" class="sidenava">
          <p>外 观</p>
          </a> </li>
        
        <li> <a href="index-5.htm"  title="总 体" class="sidenava">
          <p>总 体</p>
          </a> </li>
        
        <li> <a href="index-6.htm"  title="座 位" class="sidenava">
          <p>座 位</p>
          </a> </li>
        
        <li> <a href="index-7.htm"  title="书 籍" class="sidenava">
          <p>书 籍</p>
          </a> </li>
        
        <li> <a href="index-8.htm"  title="其 他" class="sidenava">
          <p>其 他</p>
          </a> </li>
        
      </ul>
    </div>
    <div class="l_contact">
      <div class="lcon_tel">12345678910</div>
      <p class="lmap">北京市海淀区中关村南大街33号</p>
      <p class="ltel">12345678910</p>
      <p class="lfix">010-66889888</p>
      <p class="lemail">:570000</p>
    </div>
  </div>
  
  <!--left end-->
  <div class="product02">
    <div class="content_com_title">
      <h2>样貌风采</h2>
      <div class="bread"> 当前位置:<a href="index.htm" >主页</a> > <a href="index-3.htm" >样貌风采</a> >  </div>
    </div>
    <div class="content">
      <ul class="product3">
        <div> <li>
            <div> <a href="42.html"  title="远望"><img   src="images/1-1FP6093530353-lp.jpg" /></a> </div>
            <p><a href="42.html"  title="远望" class="pg-color">远望</a></p>
          </li><li>
            <div> <a href="41.html"  title="上空"><img   src="images/1-1FP6093404V1-lp.jpg" /></a> </div>
            <p><a href="41.html"  title="上空" class="pg-color">上空</a></p>
          </li><li>
            <div> <a href="40.html"  title="一角"><img   src="images/1-1FP6093241257-lp.jpg" /></a> </div>
            <p><a href="40.html"  title="一角" class="pg-color">一角</a></p>
          </li><li>
            <div> <a href="39.html"  title="阅读"><img   src="images/1-1FP60931242a-lp.jpg" /></a> </div>
            <p><a href="39.html"  title="阅读" class="pg-color">阅读</a></p>
          </li><li>
            <div> <a href="38.html"  title="桌椅"><img   src="images/1-1FP6093001118-lp.jpg" /></a> </div>
            <p><a href="38.html"  title="桌椅" class="pg-color">桌椅</a></p>
          </li><li>
            <div> <a href="37.html"  title="排列"><img   src="images/1-1FP5192644624-lp.jpg" /></a> </div>
            <p><a href="37.html"  title="排列" class="pg-color">排列</a></p>
          </li><li>
            <div> <a href="36.html"  title="仰望"><img   src="images/1-1FP5192450557-lp.jpg" /></a> </div>
            <p><a href="36.html"  title="仰望" class="pg-color">仰望</a></p>
          </li><li>
            <div> <a href="35.html"  title="远方"><img   src="images/1-1FP519232W15-lp.jpg" /></a> </div>
            <p><a href="35.html"  title="远方" class="pg-color">远方</a></p>
          </li><li>
            <div> <a href="34.html"  title="背景"><img   src="images/1-1FP5192202624-lp.jpg" /></a> </div>
            <p><a href="34.html"  title="背景" class="pg-color">背景</a></p>
          </li> </div>
      </ul>
      <div class="pagination-wrapper">
        <div class="pagination"> <li><a>首页</a></li>
<li class="thisclass"><a>1</a></li>
<li><a href="list_2_2.html" >2</a></li>
<li><a href="list_2_2.html" >下一页</a></li>
<li><a href="list_2_2.html" >末页</a></li>
 </div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>
3、书籍资源

静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

4、在线留言

该页面使用了form表单技术,可以填写并且提交文字信息,密码会被****字符代替,不会泄露密码,其他的名字则直接用明文的input标签。
静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

5、其他

该页面以img标签嵌入图片+table表格标签嵌入整齐的文字的形式,对图片的内容进行了简要的介绍。
静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。文章来源地址https://www.toymoban.com/news/detail-814216.html

到了这里,关于静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • c语言课程设计(图书馆管理系统)

    大一c语言课程设计:图书馆管理系统。 图书管理系统,功能齐全拿来就能用 1.主界面   代码段  2.图书录入界面 运用文件录入多次使用   代码段  3.图书查询界面 根据输入书的数据与文件中数据进行比对 ,查找后输出。 代码段 4.图书修改 输入修改图书数据并在文件中查找

    2024年02月11日
    浏览(41)
  • 学校图书馆管理系统的架构设计与实现

    随着大学生越来越多,学校图书馆的管理变得愈发复杂。为了更好地管理和服务于学生和教职工,学校需要建立一个高效的图书馆管理系统。本文将介绍学校图书馆管理系统的架构设计与实现。 1. 架构设计 学校图书馆管理系统的架构设计主要分为三个部分: 展示层:展示层

    2024年02月22日
    浏览(54)
  • 基于JAVA图书馆管理系统设计与实现

    【后台管理员功能】 广告管理:设置小程序首页轮播图广告和链接 留言列表:所有用户留言信息列表,支持删除 会员列表:查看所有注册会员信息,支持删除 资讯分类:录入、修改、查看、删除资讯分类 录入资讯:录入资讯标题、内容等信息 管理资讯:查看已录入资讯列

    2024年02月13日
    浏览(56)
  • java毕业设计——基于java+Java Swing+sqlserver的图书馆书库管理系统设计与实现(毕业论文+程序源码)——图书馆书库管理系统

    大家好,今天给大家介绍基于java+Java Swing+sqlserver的图书馆书库管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下载地址哦。需要下载开题报告PPT模板及论文答辩PPT模板等的小伙伴,可以进入我的博客主页查看左侧最下面栏目中的自助下载方法哦 文章目录: 毕业

    2024年02月03日
    浏览(51)
  • 【计算机毕业设计】图书馆管理系统设计与实现

            以往的图书馆管理事务处理主要使用的是传统的人工管理方式,这种管理方式存在着管理效率低、操作流程繁琐、保密性差等缺点,长期的人工管理模式会产生大量的文本借书与文本数据,这对事务的查询、更新以及维护带来不少困难。随着互联网时代的到来,现如

    2024年02月04日
    浏览(53)
  • 微信图书馆座位预约小程序系统设计与实现,

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月05日
    浏览(49)
  • 微信小程序的图书馆预约系统设计与实现

    摘 要 近年来随着社会竞争压力的不断加剧,人们需要不断充实自己的学识来提升自己的竞争力,对于在校的大学生而言需要利用在校期间实现考研考编的内容,职场的上班族需要通过考取职业技能资格证书来实现升职加薪,各行各业的人们都在利用有限的时间去提升和充实

    2024年02月11日
    浏览(49)
  • 【计算机毕业设计】图书馆借阅管理系统

    一、系统截图(需要演示视频可以私聊)         摘  要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识,科学化的管理,使信息存储达到准确、

    2024年02月09日
    浏览(76)
  • php图书馆管理系统的设计与实现毕业设计-附源码

    摘 要 大数据时代下,数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求,利用互联网服务于其他行业,促进生产,已经是成为一种势不可挡的趋势。在图书馆的要求下,开发一款整体式结构的图书馆管理系统,将复杂的系统进行拆分,能够实现对需求的

    2024年02月08日
    浏览(47)
  • 一分钟图情论文:《关于图书馆空间嗅觉设计的探讨》

    嗅觉设计是空间设计的一环,探讨嗅觉设计在图书馆空间领域内的应用,可以为图书馆空间建设提供新思路,虽然现在国内的空间嗅觉设计从理论指导到实际运行还未完全成熟,但优秀的嗅觉设计为公共文化空间所带来的积极、正面的影响不容忽视。吴梦菲在《关于图书馆空

    2024年02月02日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包