【大学生期末大作业】HTML+CSS — 星辰漫步

Enovo_你当像鸟飞往你的山

已于 2023-07-08 19:08:43 修改

阅读量5.8k

点赞数 22

分类专栏： Enovo热爱前端开发文章标签：课程设计 html css

于 2023-07-03 08:00:00 首次发布

本文链接：https://blog.csdn.net/m0_63244368/article/details/131501261

版权

前端开发同时被 2 个专栏收录

30 篇文章 10 订阅

订阅专栏

Enovo热爱

25 篇文章 14 订阅

订阅专栏

在宇宙的浩瀚中，我们是微不足道的，但我们的思维却可以触及无尽的边界。

🌙部分代码样例，获取源码请 —> 关注 ↓公 Z 号获取更多源码 !

获取源码？私信？关注？点赞？收藏？WeChat?

关于HTML5：

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

关于CSS：

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率！

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

一、🌎前言：

HTML课程期末作业，👨‍🎓学生HTML动态网页基础水平制作，页面排版干净简洁。

本篇博客为 星辰漫步主题类 宇宙设计风格，精简优化，使用 HTML+CSS 页面布局设计。

大学生网页设计课程作业源码，画面精美，排版整洁，内容丰富，主题鲜明，适合初学者、大学生、期末综合作业实践等学习使用，内容丰富多彩全面，有助于对于HTML设计的学习。

本文将详细介绍如何从头开始设计个人网站并将其转换为代码的过程来实践设计，思路+过程+代码。

一直走在路上🏔

二、🔖网页描述

🏷️HTML综合实践作业，采用 DIV+CSS 布局，包含多个页面，排版整洁，内容丰富，主题鲜明。

首页使用 HTML+CSS 排版丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。

设置了背景图，头边框，底边框等页面设计

子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到二三级页面，有多页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
可选有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言 HTML5+CSS3+JavaScript 程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：HTML网页结构文件、CSS网页样式文件、JavaScript网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

文件内容：

主文件夹包含：

📑 html 文件：其中index.html是首页、其他 html 为二级页面；
📑 style 文件夹包含：css 全部页面样式、文字滚动,、图片放大等；
📑 img 文件夹包含：网站插入的图片等；

四、⚙️设计要求：

（1）网站页面数量不少于4个，文件命名规范，网站结构要求层次清楚，目录结构清晰，代码缩进规整。（4分）

（2）采用HTML结构标记（或div标记）+CSS进行整体布局定位。（5分）

（3）网站首页栏目数量不能少于3个，各栏目要能正确链接到相应栏目子页面，同时各栏目页面也能正确返回到网站首页。（3分）

（4）网站页面标题、图片图标等要符合网站主题。（2分）

（5）网站页面中要有列表。（2分）

（6）网站页面中要含有表单（form）。（3分）

（7）网站内容应具有原创性，内容充实。（7分）

（8）网站整体色系符合视觉习惯，布局合理美观。（4分）

五、💠网站演示

📜index.html

📜login.html

📜SolarSystem.html

五、🥇 网站代码

🌙部分代码样例，获取源码请 —> 关注 ↓公 Z 号获取更多源码 !

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Enovo星辰漫步</title>
    <link href="style/css0.css" rel="stylesheet" type="text/css" />
    <script
      src="javascript/jquery-3.2.1.min.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript" src="javascript/js0.js"></script>
  </head>

  <body>
    <!-- 顶部导航栏部分 -->
    <div id="header">
      <div id="headerbox">
        <div id="title" href="#">星辰漫步</div>
        <div id="menu">
          <ul>
            <a name="top" id="top"></a>
            <li><a href="index.html">主站</a></li>
            <li>
              <a
                href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
                >友情链接</a
              >
            </li>
            <li><a href="login.html">登录 /</a></li>
            <li><a href="login.html">注册</a></li>
            <li><a href="#">关于</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 图片标题栏部分 -->
    <div id="bar">
      <div id="bartext1">星辰漫步</div>
      <div id="bartext2">Welcome to my little site.</div>
      <div id="header-img">
        <img src="img/personal_banner.jpg" width="100%" height="100%" />
      </div>
    </div>
    <!-- 联系我部分 -->
    <div id="social">
      <div id="social-text">
        <ul>
          <li>
            <a href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
              >CSDN:EnovoDream</a
            >
          </li>
          <li><a>|</a></li>
          <li>
            <a href="https://img1.imgtp.com/2023/07/02/Yyu5F8Hb.jpg">
              微信公众号：Enovo开发工厂</a
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- 主体部分 -->
    <div id="content">
      <div id="bgimg">
        <img src="img/reg-bg.jpg" width="100%" height="100%" />
      </div>
      <h2>浩瀚天文的精彩内容推荐</h2>
      <h3>以下内容可以让您了解更多关于天文的知识 带您领略天文的神奇魅力</h3>
      <div id="bigbox">
        <div id="box">
          <img src="img/solarsystem.jpg" width="300" ; height="150" ; />
          <h4><a href="SolarSystem.html">太阳系</a></h4>
          <h5>Solar System</h5>
          <p>
            太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星(由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星
            )
          </p>
        </div>
        <div id="box">
          <img src="img/timg.jpg" width="300" ; height="150" ; />
          <h4>银河系</h4>
          <h5>Milky Way Galaxy</h5>
          <p>
            银河系是太阳系所在的棒旋星系，包括1000~4000亿颗恒星和大量的星团、星云以及各种类型的星际气体和星际尘埃，从地球看银河系呈环绕天空的银白色的环带。
          </p>
        </div>
        <div id="box">
          <img src="img/dark.jpg" width="300" ; height="150" ; />
          <h4>黑洞</h4>
          <h5>Black Hole</h5>
          <p>
            黑洞是现代广义相对论中，宇宙空间内存在的一种天体。黑洞的引力很大，使得视界内的逃逸速度大于光速。黑洞是时空曲率大到光都无法从其事件视界逃脱的天体。
          </p>
        </div>
        <div id="box">
          <img src="img/stars.jpg" width="300" ; height="150" ; />
          <h4>星云</h4>
          <h5>Nebula</h5>
          <p>
            星云的形状是多姿多态的。星云和恒星有着“血缘”关系。恒星抛出的气体将成为星云的部分，星云物质在引力作用下压缩成为恒星。在一定条件下，星云和恒星是能够互相转化的。
          </p>
        </div>
        <div id="box">
          <img src="img/timg (1).jpg" width="300" ; height="150" ; />
          <h4>猎户座</h4>
          <h5>Orion</h5>
          <p>
            猎户座，赤道带星座之一。位于双子座、麒麟座、大犬座、金牛座、天兔座、波江座与小犬座之间，其北部沉浸在银河之中。星座主体由参宿四和参宿七等4颗亮星组成一个大四边形。
          </p>
        </div>
        <div id="box">
          <img src="img/timg (2).jpg" width="300" ; height="150" ; />
          <h4>北斗七星</h4>
          <h5>The Big Dipper</h5>
          <p>
            北斗七星是由天枢、天璇、天玑、天权、玉衡、开阳、瑶光七星组成的。古代中国人民把这七星联系起来想象成为古代舀酒的斗形。不同的季节和夜晚不同的时间，出现于天空不同的方位。
          </p>
        </div>
        <div id="box">
          <img src="img/hst.jpg" width="300" ; height="150" ; />
          <h4>哈勃空间望远镜</h4>
          <h5>Hubble Space Telescope</h5>
          <p>
            哈勃空间望远镜的位置在地球的大气层之上，因此影像不会受到大气湍流的扰动，视相度绝佳又没有大气散射造成的背景光，还能观测会被臭氧层吸收的紫外线，是天文史上最重要的仪器之一。
          </p>
        </div>
        <div id="box">
          <img src="img/NGC.jpg" width="300" ; height="150" ; />
          <h4>上帝之眼</h4>
          <h5>NGC 7293</h5>
          <p>
            从照片上可以看到，蔚蓝色瞳孔和白眼球的四周是肉色的眼睑，与我们的眼睛像极了，但“上帝之眼”其实浩瀚无边，它散发的光线从一侧到另一侧需要五~六年时间。
          </p>
        </div>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="footer">
      <div id="footer-bottom">
        <p>
          Copyright&copy;2023 / Enovo开发工厂 /
          <a href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
            >CSDN:Enovo_Dream</a
          >
        </p>
      </div>
    </div>
  </body>
</html>

login.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>登录/注册</title>
    <link rel="stylesheet" href="style/css0.css" />
    <link rel="stylesheet" href="style/css2.css" />
  </head>
  <body>
    <!-- 顶部导航栏部分 -->
    <div id="header">
      <div id="headerbox">
        <div id="title" href="#">星辰漫步</div>
        <div id="menu">
          <ul>
            <li><a href="index.html">主站</a></li>
            <li>
              <a
                href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
                >友情链接</a
              >
            </li>
            <li><a href="#">登录 /</a></li>
            <li><a href="login.html">注册</a></li>
            <li><a href="login.html">关于</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 图片标题栏部分 -->
    <div id="bar">
      <div id="bartext1">星辰漫步</div>
      <div id="bartext2">Welcome to my little site.</div>
      <div id="header-img">
        <img src="img/5 (1).jpg" width="100%" height="100%" />
      </div>
    </div>

    <!-- 联系我部分 -->
    <div id="social" style="background-color: #000000">
      <div id="social-text">
        <ul>
          <li>
            <a href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
              >CSDN:EnovoDream</a
            >
          </li>
          <li><a>|</a></li>
          <li>
            <a href="https://img1.imgtp.com/2023/07/02/Yyu5F8Hb.jpg">
              微信公众号：Enovo开发工厂</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div id="lgcontent">
      <div id="lgbox-left">
        <form action="#" method="post">
          <div id="login">
            <div id="login_title">登&nbsp;录</div>

            <div class="line"><span id="msg"></span></div>
            <div class="line">
              账号&nbsp;&nbsp;
              <input name="username" type="text" placeholder="账号/手机/邮箱" />
            </div>
            <div class="line">
              密码&nbsp;&nbsp;
              <input name="password" type="password" placeholder="请输入密码" />
            </div>
            <input id="log_submit" type="button" value="登录" />
            <!--  注册按钮    -->
            <input id="log_submit" type="button" value="创建新账号" />

            <div class="line">
              <a href="#">找回密码</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"
                >注册账号</a
              >
            </div>
          </div>
        </form>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="footer">
      <div id="footer-bottom">
        <p>
          Copyright&copy;2023 / Enovo开发工厂 /
          <a href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
            >CSDN:Enovo_Dream</a
          >
        </p>
      </div>
    </div>
  </body>
</html>

SolarSystem.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>太阳系/Solar System</title>
    <link rel="stylesheet" href="style/css0.css" />
    <link rel="stylesheet" href="style/css1.css" />
    <script
      src="javascript/jquery-3.2.1.min.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript" src="javascript/js0.js"></script>
  </head>
  <body>
    <!-- 顶部导航栏部分 -->
    <div id="header">
      <div id="headerbox">
        <div id="title" href="#">Enovo天文</div>
        <div id="menu">
          <ul>
            <li><a href="index.html">主站</a></li>
            <li>
              <a
                href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
                >友情链接</a
              >
            </li>
            <li><a href="#">登录 /</a></li>
            <li><a href="login.html">注册</a></li>
            <li><a href="login.html">关于</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 图片标题栏部分 -->
    <div id="bar">
      <div id="bartext1">浩瀚天文</div>
      <div id="bartext2">Welcome to my little site.</div>
      <div id="header-img">
        <img src="img/31.jpg" width="100%" height="100%" />
      </div>
    </div>
    <div id="leader">
      <div id="leader-text">
        <ul>
          <li>
            <a href="#"><span>太阳系</span></a>
          </li>
          <li><a href="#">太阳</a></li>
          <li><a href="#">水星</a></li>
          <li><a href="#">金星</a></li>
          <li><a href="#">火星</a></li>
          <li><a href="#">木星</a></li>
          <li><a href="#">土星</a></li>
          <li><a href="#">天王星</a></li>
          <li><a href="#">海王星</a></li>
        </ul>
      </div>
    </div>
    <div id="sscontent">
      <div id="sstitle">
        <h1>太阳系</h1>
        <h2>Solar System</h2>
        <p>
          太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星（由离太阳从近到远的顺序：水星、金星、地球、火星、木星、土星、天王星、海王星
          ）、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以亿计的太阳系小天体。
        </p>
      </div>
      <div id="ssbigbox">
        <div id="ssbox" style="height: 850px">
          <img
            src="img/ss1.jpg"
            style="float: right"
            width="100%"
            height="100%"
          />
          <h3>名词解释</h3>
          <p1
            >银河系是一个棒旋星系，直径约8万光年，包括一千亿到四千亿恒星。太阳是银河系较典型的恒星，位于分支悬臂猎户臂上，离银河系中心有2.61万光年，太阳系移动速度约240㎞/s，2.26亿年转一圈。</p1
          >
          <p1
            >太阳系中的八大行星都位于差不多同一平面的近圆轨道上运行，朝同一方向绕太阳公转。除木星及天王星以外，其他行星的自转方向和公转方向相同。彗星的绕日公转方向大都相同，多数为椭圆形轨道，一般公转周期比较长。</p1
          >
          <p>轨道环绕太阳的天体被分为三类：行星、矮行星和太阳系小天体。</p>
          <p1>行星是环绕太阳且质量够大的天体。</p1>
          <div id="tianti">
            <h4>这类天体：</h4>
            <ol left-1>
              <li>有足够的质量使本身的形状成为球体</li>
              <li>有能力清空邻近轨道的小天体。</li>
              <li>不是行星的卫星，或者是非恒星的天体</li>
            </ol>
          </div>
          <p>
            能称为大行星的天体有8个：水星、金星、地球、火星、木星、土星、天王星、海王星。
          </p>
          <p>
            在2006年8月24日，第26届国际天文联合会在捷克首都布拉格举行，重新定义行星这个名词，首次将冥王星排除在大行星外，并将冥王星、谷神星和阋神星组成新的分类：矮行星。
            矮行星不需要将邻近轨道附近的小天体清除掉，其他可能成为矮行星的天体还有塞德娜、厄耳枯斯和创神星。从第一次发现的1930年到2006年，冥王星被当成太阳系的第九颗行星。但是在20世纪末期和21世纪初，许多与冥王星大小相似的天体在太阳系内陆续被发现，特别是阋神星更明确的被指出比冥王星大（据2015年旅行者发回的数据显示，阋神星仍然比冥王星大），使得冥王星的地位受到严重威胁。
          </p>
          <p>环绕太阳运转的其他天体都属于太阳系小天体。</p>
          <p>
            卫星（如月球之类的天体），由于不是环绕太阳而是环绕行星、矮行星或太阳系小天体，所以不属于太阳系的小天体。
          </p>
          <p>
            天文学家在太阳系内以天文单位（AU）来测量距离。1AU是地球到太阳的平均距离，大约是1.5亿公里（9300万英里）。冥王星与太阳的距离大约是39AU，木星则约是5.2AU。最常用在测量恒星距离的长度单位是光年，1光年大约相当于63240天文单位。行星与太阳的距离以公转周期为周期变化着，最靠近太阳的位置称为近日点，距离最远的位置称为远日点。
          </p>
          <p>
            有时会将太阳系非正式地分成几个不同的区域：“内太阳系”，包括四颗类地行星和主要的小行星带；其余的是“外太阳系”，包含小行星带之外所有的天体。
            其它的定义还有海王星以外的区域，而将四颗大型行星称为“中间带”。
          </p>
        </div>
        <div id="ssbox">
          <h3>概述轨道</h3>
          <p>
            太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体：8颗行星、至少173颗已知的卫星、几颗已经辨认出来的矮行星（冥王星、谷神星、阋神星（齐娜）、妊神星和鸟神星）和数以亿计的太阳系小天体。这些小天体包括小行星带天体、柯伊伯带天体、彗星和星际尘埃。
          </p>
          <div style="text-align: center">
            <img src="img/solarsystem.jpg" style="margin: 0 auto" />
          </div>
          <p>
            广义上，太阳系的领域包括黄矮星
            太阳，4颗像地球的类地行星，由许多小岩石组成的小行星带，4颗充满气体的类木行星，充满冰冻小岩石，被称为柯伊伯带的第二个小天体区。在柯伊伯带之外还有黄道离散盘面和太阳圈，和依然属于假设的奥尔特云。
          </p>
          <p>
            依照至太阳的距离，行星依序是水星、金星、地球、火星、木星、土星、天王星、和海王星，8颗中的6颗有天然的卫星环绕着。在英文天文术语中，因为地球的卫星被称为月球，这些卫星在英语中习惯上亦被称为“月球”（moon），在中文里面用卫星更为常见。五颗矮行星有冥王星，柯伊伯带内已知最大的天体之一鸟神星与妊神星，小行星带内最大的天体谷神星，和属于黄道离散天体的阋神星。
          </p>
          <p>
            太阳系内体积较大的卫星（超过3000公里）包括地球的卫星月球、木星的伽利略卫星木卫一（伊奥）、木卫二（欧罗巴）、木卫三（盖尼米德）、木卫四（卡利斯多）和土星的卫星土卫六（泰坦），以及海王星捕获的卫星海卫一（特里同）。更小的卫星参见各个相关行星条目。
          </p>
          <p>
            太阳系的主角是位居中心的太阳，它是一颗光谱分类为G2V的主序星，拥有太阳系内已知质量的99.86%，并以引力主宰着太阳系
            。木星和土星，是太阳系内最大的两颗行星，又占了剩余质量的90%以上，仍属于假说的奥尔特云，还不知道会占有多少百分比的质量。
          </p>
          <p>
            太阳系内主要天体的轨道，都在地球绕太阳公转的轨道平面（黄道）的附近。行星都非常靠近黄道，而彗星和柯伊伯带天体，通常都有比较明显的倾斜角度。
          </p>
          <p>
            由北方向下鸟瞰太阳系，所有的行星和绝大部分的其他天体，都以逆时针（左旋）方向绕着太阳公转。有些例外的，如哈雷彗星。
          </p>
          <p>
            环绕着太阳运动的天体都遵守开普勒行星运动定律，轨道都是以太阳为，焦点的一个椭圆，并且越靠近太阳时的速度越快。行星的轨道接近圆形，但许多彗星、小行星和柯伊伯带天体的轨道则是高度椭圆的，甚至会呈抛物线型。
          </p>
          <p>
            在这么辽阔的空间中，有许多方法可以表示出太阳系中每个轨道的距离。在实际上，距离太阳越远的行星或环带，与前一个的距离就会更远，而只有少数的例外。例如，金星在水星之外约0.33天文单位，而土星与木星的距离是4.3天文单位，海王星在天王星之外10.5天文单位。曾有些关系式企图解释这些轨道距离变化间的交互作用。
          </p>
        </div>
      </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="footer">
      <div id="footer-bottom">
        <p>
          Copyright&copy;2023 / Enovo开发工厂 /
          <a href="https://blog.csdn.net/m0_63244368?spm=1000.2115.3001.5343"
            >CSDN:Enovo_Dream</a
          >
        </p>
      </div>
    </div>
  </body>
</html>

style

css0.css

@charset "utf-8";

body{
	text-align:center;
	background:#232524;
	margin:0;
	padding:0;
	font-family:"宋体",Arial,Helveica,sans-serif;
	font-size:15px;
	line-height:1.5;
	width:100%;
	}

/**  header   **/
#header{
	position: fixed;
    top: 0;
    left: 0;
    z-index:5;
    width: 100%;
    min-width: 600px;
	height:40px;
	background:#101010 ;
	display: inline-block;
	}
#headerbox{
	width: 70%;
	margin: 0 auto;
}
#title{
	float: left;
	line-height: 1.42857143;
	font-size:19px;
	color:#BBBBBB;
	text-decoration:none;
	margin: 5px auto;
	font-weight: bold;
}
#title:hover{
	color:#FFFFFF;
}
#menu{
	float:right;
	height:29px;
	margin:5px auto;
	display:inline;
	padding:0;
}
#menu ul{
	list-style:none;
	display:inline;
}
#menu ul li{
	float:left;
	padding-left:20px;
	padding-top:5px;
}
#menu ul li a{
	line-height: 1.42857143;
	font-size:14px;
	color:#BBBBBB;
	text-decoration:none;
}
#menu ul li a:hover{
	color:#FFFFFF;
}

/** 顶部图片栏 **/
#bar{
	position: relative;
	top:40px;
	z-index:1;
	width: 100%;
	height: 150px;
}
#header-img{
	width:100%;
	height:150px;
	margin:0 auto;
	}
#bartext1{
	position:absolute;
	top:15px;
	left:22%;	
	font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeitiSC-Light, Arial, sans-serif;
	color: #fff;
	font-size: 36px;
	font-weight: bold;
}
#bartext2{
	position: absolute;
	top: 60px;
	left: 22%;
	z-index:2;
	font-family: "PingFang SC", "Helvetica Neue", Helvetica, STHeitiSC-Light, Arial, sans-serif;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
}

/**  联系我  **/
#social{
	position: relative;
	top:40px;
	z-index: 1;
	width: 100%;
	height: 35px;
    text-align: center;
    background-color: #232524;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    
}
#social-text{
	width: 370px;
	margin:0 auto;
}
#social-text ul{
	list-style:none;
	display:inline;
}
#social-text ul li{
	float: left;
	padding-left:20px;
	padding-top:7px;
}
#social-text ul li a{
	line-height: 1.42857143;
	font-size:14px;
	color:#BBBBBB;
	text-decoration:none;
}
#social-text ul li a:hover{
	color: #FFFFFF;
	text-decoration:underline;
}


/******  content 中间主体部分   ******/
#content{
	position: relative;
	top:0px;
	width: 100%;
	height: auto;
}
#bgimg{
	z-index: 0;
	width:100%;
	height:auto;
	margin:0 auto;
	}
#content h2{
	margin: auto;
	position: absolute;
	top: 120px;right:0;bottom:0;left: 0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 38px;
}
#content h3{
	margin: auto;
	position: absolute;
	top: 178px;right:0;bottom:0;left: 0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
}
#bigbox{
	width: 70%;
	height: auto;
	margin: auto;
	position: absolute;
	top: 250px;right:0;bottom:0;left: 0;
	padding-bottom: 50px;    /*等于footer的高度*/
}
#box{
	float: left;
	display: block;
	width: 19%;
	margin-right: 2%;
	margin-left: 2%;
    padding: 4px;
    margin-bottom: 70px;
    line-height: 1.42857143;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
}
#box img {
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    z-index: -1;
}
#box h4{
	margin: 5px auto;
	color: #FFFFFF;
	font-size: 18px;
}
#box h4 a:link{
	text-decoration: none;
	color: #FFFFFF;
}
#box h4 a:hover{
	text-decoration: underline;
	font-weight: bold ;
	color: #BBBBBB;
}
#box h4 a:visited {
 	COLOR:#FFFFFF;
}
#box h5{
	margin: -8px auto;
	font-size: 14px;
	color: #BBBBBB;
}
#box p{
	margin: 16px 16px 16px 16px;
	font: 15px;
	color: #BBBBBB;
}

/******  footer底部说明栏  ******/
#footer{
	margin: 0 auto -50px auto;
	position: relative;
	margin-top:-50px;    /*等于footer的高度*/      
	z-index: 1;
	width: 100%;
	height: 50px;       /*等于footer的高度*/
	background-color: #000000;
	border-top: solid #BBBBBB 1px ;
}
#footer-top{
	
}
#footer-bottom{
	width: 100%;
	height: 0px;
	font_size:20px;
	color:#FFFFFF;
	text-align:center;
}
#footer-bottom p{
	margin: 8px auto;
}

css1.css

@charset "utf-8";

/** header下导航栏 **/
#leader{
	position: relative;
	top:40px;
	z-index: 1;
	width: 100%;
	height: 35px;
    text-align: center;
    background-color: #000000;
}
#leader-text{
	width: 643px;
	margin:0 auto;
}
#leader-text ul{
	list-style:none;
	display:inline;
}
#leader-text ul li{
	float: left;
	padding-left:30px;
	padding-top:7px;
}
#leader-text ul li a span{
	float: left;
	font-size: 16px;
	font-weight: bold;
	padding-left:30px;
	padding-top:-3px;
}
#leader-text ul li a{
	line-height: 1.42857143;
	font-size:14px;
	color:#BBBBBB;
	text-decoration:none;
}
#leader-text ul li a:hover{
	color: #FFFFFF;
}
/**      主体盒子              **/
#sscontent{
	position: relative;
	top:0px;
	width: 60%;
	height: auto;
	background-color: #101010;
	margin: 0 auto;
}
#sstitle{
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 auto;
}
#sstitle h1{
	margin: auto;
	position: relative;
	top: 80px;right:0;bottom:0;left: 0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 34px;
}
#sstitle h2{
	margin: auto;
	position: relative;
	top: 70px;right:0;bottom:0;left: 0;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 24px;
}
#sstitle p{
	position: relative;
	top: 80px;right:0;bottom:0;left: 0;
	width: 40%;
	height: auto;
	color: #FFFFFF;
	text-indent:2em;
	font-size: 15px;
	margin: 0 auto;
	text-align: left;
}

#ssbigbox{
	width: 100%;
	height: 2200px;
	margin:10px auto;
	position: relative;
	top: 0px;    
	padding-bottom: 0px; /*等于footer的高度*/
	margin-bottom: 0px;
}

#ssbox{
	position: relative;
	top: 120px;
	width: auto;
	height: auto;
	border-top: solid #BBBBBB 1px;
	padding-top: 60px;
	padding-left: 50px;
	padding-right: 50px;
	
}
#ssbox h3{
	float: left;
	margin: -10px 100px 20px 0;
	font-size: 19px;
	color: #BBBBBB;
}
#ssbox p1{
	width: 47%;
	float: left;
	font-size: 15px;
	text-indent:2em;
	color: #FFFFFF;
	text-align: left;
	margin: 0px 0 25px 20px;
}
#ssbox p{
	width: 95%;
	float: left;
	font-size: 15px;
	text-indent:2em;
	color: #FFFFFF;
	text-align: left;
	margin: 0px 0 25px 20px;
}

#ssbox img{
	width: 45%;
	height: auto;
	margin: 0 0 0 10px;
}
#tianti{
	width: 100%;
	float: left;
	margin: 0px auto 0 10px;
}
#tianti h4{
	text-align: left;
	margin: 0 0 0 10px;
	font-size: 16px;
	color: #BBBBBB;
}
#tianti ol{
	
}
#tianti ol li{
	color: #FFFFFF;
	margin: 5px;
	text-align: left;
}

六、获取源码

正确的代码文件及路径，见下图：

第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式；

第二步，可以根据需求自定义背景文字，背景图片；

第三步，点击 index.html 文件打开即可，可添加 JavaScript 样式等；

以上就是我们此次期末时间大作业的全部内容了，是否精彩呢？如果有好的建议或者想法可以联系我，一起交流🙇‍；

🥇Summary

上述内容就是此次 【大学生期末大作业】HTML+CSS — 星辰漫步 的全部内容了，感谢大家的支持，相信在很多方面存在着不足乃至错误，希望可以得到大家的指正。🙇‍(ง •_•)ง

调整自己。不忘来时路，努力前行，找到前进的方向。

2023年第四十三期，希望得到大家的喜欢🙇‍

希望大家有好的意见或者建议，欢迎私信，一起加油

以上就是本篇文章的全部内容了

~ 关注我，点赞博文~ 每天带你涨知识!

1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、HTML模板、C++、数据结构、Python程序设计、Java程序设计、爬虫等！「在这里有好多开发者，一起探讨前端开发知识，互相学习」！

3.以上内容技术相关问题可以相互学习，可 关注 ↓公 Z 号 获取更多源码 !

获取源码？私信？关注？点赞？收藏？WeChat?

👍+✏️+⭐️+🙇‍

有需要源码的小伙伴可以关注下方微信公众号 " Enovo开发工厂 " 回复 " 1-星辰漫步 " 获取源码！，更多源码等着你哦

~~~///(^v^)\\\~~~

Enovo_你当像鸟飞往你的山

关注

22
点赞
踩
99

收藏

觉得还不错? 一键收藏
打赏
5
评论
【大学生期末大作业】HTML+CSS — 星辰漫步

📑 html 文件：其中index.html是首页、其他 html 为二级页面；📑 style 文件夹包含：css 全部页面样式、文字滚动,、图片放大等；📑 img 文件夹包含：网站插入的图片等；
复制链接

扫一扫