一、项目介绍

本次设计的项目为阿布巴工作室静态网站是为主题设计的HTML和css语言设计了六个简单的网页，包括工作室介绍、食物、美丽的风景、个人信息、登录和注册，每个页面可以通过点击一些图片或模块文本跳转。

二、开发过程

1.项目总体设计

本项目设计web静态网页，以阿布巴工作室导航是为主题设计的，每个页面都有导航显示，每个页面都可以跳转，比如注册和登录页面之间。为了方便整理和修改设计，这六个页面分别使用一个html通过使用超链接，设计文件，实现六页之间的跳转转换。用一个总的HTML文件是主页文件，链接这六个页面，然后设计每个页面部分。展示工作室内容，设计动态动画，为网站添加音乐；在个人信息页面设计表格中输入修改信息；在hometown页面包含两个页面：食物和美丽的风景，通过图片和文本介绍；在用户页面部分，有两个页面：注册和登录。注册成功后，您可以跳转到登录页面，登录页面可以跳转到注册页面，登录页面可以跳转到工作室介绍主页。

2、导航设计

使用nav 标签设置导航页面，使用超链接在导航中链接其他页面，可以跳转。本质上，打开的新页面覆盖在原始页面上，每个页面的导航设置可以实现每个页面显示的导航一致性。使用ul标签无序列表，span 组合行业元素，li标签定义列表项目hometown两个二级列表项目设置在导航和用户页面下。
实现代码：

  <nav class="sidebar sidebar-offcanvas" id="sidebar">       <ul class="nav">         <li class="nav-item sidebar-category">           <p>阿布工作室</p>           <span></span>         </li>         <li class="nav-item">           <a class="nav-link" href="../../index.html">             <i class="mdi mdi-view-quilt menu-icon"></i>             <span class="menu-title">工作室介绍</span>             <div class="badge badge-info badge-pill">2</div>           </a>         </li>         <li class="nav-item sidebar-category">           <p>阿布阿布</p>           <span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
            <i class="mdi mdi-palette menu-icon"></i>
            <span class="menu-title">Hometown</span>
            <i class="menu-arrow"></i>
          </a>
          <div class="collapse" id="ui-basic">
            <ul class="nav flex-column sub-menu">
              <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/buttons.html">美食</a></li>
              <li class="nav-item"> <a class="nav-link" href="../../pages/ui-features/typography.html">美景</a></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="../../pages/forms/basic_elements.html">
            <i class="mdi mdi-view-headline menu-icon"></i>
            <span class="menu-title">个人信息</span>
          </a>
        </li>
        <li class="nav-item sidebar-category">
          <p>User</p>
          <span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
            <i class="mdi mdi-account menu-icon"></i>
            <span class="menu-title">用户页面</span>
            <i class="menu-arrow"></i>
          </a>
          <div class="collapse" id="auth">
            <ul class="nav flex-column sub-menu">
              <li class="nav-item"> <a class="nav-link" href="../../pages/samples/login.html"> 登陆 </a></li>
              <li class="nav-item"> <a class="nav-link" href="../../pages/samples/register.html"> 注册 </a></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://blog.csdn.net/weixin_45970808/article/details/125689442?spm=1001.2014.3001.5502">
            <button class="btn bg-danger btn-sm menu-title">课程设计报告</button>
          </a>
        </li>
      </ul>

    </nav>

实现效果：

3、工作室介绍页面设计

首页设计：利用html中class元素，添加图片连接以及显示，再添加要输入的文字，文字的样式、位置、大小、颜色等属性同样是通过css样式列表实现。

<div class="content">
<div class="stars"></div>
<img class="bgc" src="https://img.freepik.com/free-photo/high-angle-people-world-map_23-2149407885.jpg?t=st=1657273650~exp=1657274250~hmac=b4c54d24fde69cc4c946ded4aafd6fe29b4abf5fe1917dc94fd421e9578cd272" width="100%" alt="">
<h3 class="title">欢迎来到阿布巴工作室......</h3>
<img class="icon" src="images/book.png" alt="">
</div>

内容介绍设计：进行背景图添加、图片添加、文字、以及文字和图片之间的位置为绝对模式、文字的排版的控制。

<div class="icons">
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/lk/jz/QJ8673228338.jpg@!350h" alt="">
                  <span>stm32
                  </span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/mt/ut/QJ6673897195.jpg@!350h" alt="">
                  <span>yolo5</span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/lk/jz/QJ8673228338.jpg@!350h" alt="">
                  <span>ARDUINO</span>
              </div>
              <div class="icons_items">
                  <img class="icons_items_imgs" src="https://pic.quanjing.com/mt/ut/QJ6673897195.jpg@!350h" alt="">
                  <span>Web</span>
              </div>
          </div>
          <div class="introduce">
              <div class="introduce_item">
                  <img class="introduce_item_img" src="https://pic.quanjing.com/6g/12/QJ6999096291.jpg@!794ws" alt="">
                  <span class="introduce_item_title">在STM32F105和STM32F107互连型系列微控制器之前，意法半导体已经推出STM32基本型系列、增强型系列、USB基本型系列、互补型系列；新系列产品沿用增强型系列的72MHz处理频率。内存包括64KB到256KB闪存和 20KB到64KB嵌入式SRAM。</span>
  
              </div>
              <div class="introduce_item">
  
                  <span class="introduce_item_titles">YOLOv5是一种单阶段目标检测算法，该算法在YOLOv4的基础上添加了一些新的改进思路，使其速度与精度都得到了极大的性能提升。</span>
                  <img class="introduce_item_img" src="https://pic.quanjing.com/1p/sc/QJ9127035502.jpg@!350h" alt="">
              </div>
              <div class="introduce_item">
                  <img class="introduce_item_img" src="https://pic.quanjing.com/gk/5n/QJ6396830271.jpg@!350h" alt="">
                  <span class="introduce_item_title">Arduino能通过各种各样的传感器来感知环境，通过控制灯光、马达和其他的装置来反馈、影响环境。板子上的微控制器可以通过Arduino的编程语言来编写程序，编译成二进制文件，烧录进微控制器。</span>
              </div>
              <div class="introduce_item">
                  <span class="introduce_item_titles">Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。</span>
                  <img class="introduce_item_img" src="https://pic.quanjing.com/zb/jm/QJ6779434701.jpg@!350h" alt="">
              </div>
          </div>

设置动态雪花：在首页第一个页面设置动态动画

//html
<!-- 使用stars属性生成动态雪花飘落 -->
 <div class="stars"></div>

//css

.stars { 
        
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    z-index: 999;
    border-radius: 50%;
    box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px -88px #cfcfcf, -453px 308px #d6d6d6, -111px 1px #d9d9d9, 573px -450px #ededed, 198px 300px #d6d6d6, -355px 166px #dedede, -715px 13px #e3e3e3, 262px -104px #d1d1d1, 147px 325px #dbdbdb, 1px 399px #dbdbdb, 286px -100px white, 43px -329px #e8e8e8, 617px 55px #d9d9d9, -168px -392px #cccccc, 84px 219px #c9c9c9, 507px -226px #d9d9d9, -327px -70px #e6e6e6, 386px -212px #c4c4c4, -717px 4px #cfcfcf, 502px -231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c9c9c9, 516px -31px #e6e6e6, 689px 447px #c2c2c2, 591px -206px #fafafa, 422px -137px #e6e6e6, -510px -324px #cccccc, -649px 287px #c2c2c2, -194px -48px #f7f7f7, -279px -329px #d1d1d1, -406px 478px #dbdbdb, -735px -87px #c9c9c9, 30px -197px #dedede, -564px 233px #e6e6e6, -486px -324px #ededed, -54px -7px #ededed, -441px -194px #e3e3e3, -133px -95px #e0e0e0, -722px -73px #d6d6d6, 595px 423px #ededed, 568px -39px #ededed, 370px 377px #d1d1d1, -419px -102px #fcfcfc, -450px 109px #c4c4c4, -57px -119px #d1d1d1, -582px 150px #e6e6e6, 206px -263px #cfcfcf, 582px -461px #c9c9c9, -268px -141px #d9d9d9, -148px 291px #c7c7c7, 254px -179px #c9c9c9, 725px 424px #f0f0f0, 391px -150px #ebebeb, 89px -299px #d4d4d4, 170px 1px #c9c9c9, 243px 209px #c7c7c7, 27px 460px #c9c9c9, -465px -380px #d4d4d4, 530px -360px whitesmoke, -626px 53px #e0e0e0, 706px 218px #d9d9d9, 40px -82px #cccccc, -5px -212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px -125px #cccccc, -216px 348px #cfcfcf, 601px 332px #ededed, 344px -88px #c4c4c4, 659px -22px #d1d1d1, -411px 188px #d6d6d6, -423px -206px #fcfcfc, -359px -136px #cfcfcf, 612px 406px whitesmoke, 725px 96px whitesmoke, 363px -446px white, -204px 325px #c9c9c9, 740px 176px #fafafa, -489px -352px white, -638px 64px #dbdbdb, 537px -65px #dbdbdb, 151px -32px #ebebeb, 681px 212px #fcfcfc, 604px -149px #e6e6e6, -542px -398px #c4c4c4, -707px 66px whitesmoke, -381px 258px #cfcfcf, -30px 332px #d6d6d6, 512px -381px #c9c9c9, 195px 288px #cccccc, -278px 479px #c7c7c7, 27px -208px #d6d6d6, -288px 15px white, -680px 248px #dedede, 433px 31px #c9c9c9, 150px -206px #d4d4d4, -79px 247px white, -594px 115px #e0e0e0, 99px 292px #e0e0e0, 673px -269px #dedede, -257px -64px #d1d1d1, 449px 81px #f2f2f2, 18px -99px #d1d1d1, -694px 415px #f7f7f7, 240px 264px #e0e0e0, 450px -172px white, 383px 7px #e8e8e8, 338px -73px #c9c9c9, 291px -19px #ebebeb, 659px 137px #d1d1d1, 602px -6px #fcfcfc, 554px 249px #ebebeb, 625px 356px #d9d9d9, 579px -183px #d6d6d6, -20px 250px white, -401px 431px #c4c4c4, -645px -232px #cccccc, -265px -148px white, 553px 258px #d1d1d1, 166px -360px #ebebeb, 719px 51px #ededed, 612px -129px #ebebeb, -465px -104px #f2f2f2, -154px -121px #d9d9d9, -1px 330px #f2f2f2, -666px 248px #f7f7f7, -720px 264px #ededed, 148px -365px #e6e6e6, -388px -349px #c4c4c4, 128px -88px #e3e3e3, -683px -274px #fafafa, -341px 41px #c9c9c9, -59px -471px #f0f0f0, -3px -427px #c2c2c2, 418px 167px #d6d6d6, 343px 247px #c7c7c7, 623px -347px #d1d1d1, 716px -217px white, 243px -409px whitesmoke, -75px -126px #d6d6d6, -730px -91px #c9c9c9, -210px -397px #cfcfcf, -349px 180px #c9c9c9, -567px -281px #e0e0e0, -460px 381px #fcfcfc, -310px -22px #ededed, 450px -1px #dbdbdb, -405px -328px #e3e3e3, 5px 332px #d6d6d6, -294px 302px #fcfcfc, -398px 97px whitesmoke, -696px 325px #cfcfcf, -589px 110px #d6d6d6, 353px -411px #dbdbdb, -697px -318px #ebebeb, -114px -72px #f0f0f0, 259px -193px #fcfcfc, 60px 26px #e6e6e6, -63px -232px white, 205px -372px #f7f7f7, -464px -333px #f2f2f2, -374px 123px white 
        标签： e3t系列传感器usb连接器ut1111c
 锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

 热门文章
          
  动力学技术KTU1121 USB Type-C 端口保护器的介绍、特性、及应用
 
                          具有四个过电压保护(OVP)的USB Type-C CC和SBU信号传导路径。
                        
Sensata PTE7300密封数字压力传感器的介绍、特性、及应用
PANJIT PBHV8110DA/PBHV9110DA低Vce(sat)晶体管的介绍、特性、及应用
ams OSRAM OSLON 黑色平板X LED器件的介绍、特性、及应用
Cree LED CLQ6A三合一贴片LED的介绍、特性、及应用
Cree LED CLQ6B 4-in-1 RGBW贴片LED的介绍、特性、及应用
NDK NX1210AB表面贴装晶体的介绍、特性、及应用
伊顿ACE2V3225共模芯片电感器的介绍、特性、及应用
意法半导体X040灵敏型栅可控硅和Z040可控硅的介绍、特性、及应用
ABLIC S-82Y1B电池保护芯片的介绍、特性、及应用
Bel Power Solutions RDT-6Y系列6W DC-DC转换器的介绍、特性、及应用
 热门型号
          
 DW-35-10-S-D-500
9-146500-0
DW-32-10-S-D-500
DW-32-10-SM-D-500
DW-39-10-F-D-500
FTR-20-T
FDP-314-T
FTR-24-T
FTR-34-T
FTR-40-T
 锐单商城 - 一站式电子元器件采购平台

 首页 选型 品牌 购物车 我的
   
   
  
  
 
  搜索
 最近热搜
 
 历史搜索 清除历史记录

资讯详情

《通信软件开发与应用》课程结业报告

课程结业报告《通信软件开发与应用》

一、项目介绍

二、开发过程

1.项目总体设计

2、导航设计

3、工作室介绍页面设计

动力学技术KTU1121 USB Type-C 端口保护器的介绍、特性、及应用

《通信软件开发与应用》课程结业报告

课程结业报告《通信软件开发与应用》

一、项目介绍

二、开发过程

1.项目总体设计

2、导航设计

3、工作室介绍页面设计

动力学技术KTU1121 USB Type-C 端口保护器的介绍、特性、及应用

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录