HTML+CSS个人简单网页设计作业

已于 2023-05-29 21:18:20 修改
阅读量85 收藏
点赞数
分类专栏： 前端 文章标签： css 前端 html5 html javascript
于 2023-05-29 21:16:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tryo_susu/article/details/130935883
版权

目录

一、网页介绍

  • 网页由四个模块组成，分别为
    • HOME : 主页
    • ABOUT : 自我介绍
    • TIP : 学习清单
    • JOIN : 呼吁加入

二、效果展示

  • HOMEHOME1HOME2

  • ABOUTABOUT1ABOUT2

  • TIPtip

  • JOINJOIN

三、源码

  • HOME
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/Loading.css">
    <link rel="stylesheet" href="../css/homestyle.css">
    <link rel="stylesheet" href="../css/body.css">
    <link rel="stylesheet" href="../css/nav.css">
    <!-- <script src="../js/Loading.js"></script> -->
    <title>SSS的主页</title>
</head>
<body>
    <nav class="homenav">
        <div class="navtitle"><strong>SSS</strong>|MY LOFT</div>
        <a href="home.html">HOME</a>
        <a href="about.html">ABOUT</a>
        <a href="tip.html">TIP</a>
        <a href="join.html">JOIN</a>
        <div class="none"></div>
    </nav>
    <main class="main">
    <section class="sec">
        <div class="titleimg">
            <div class="title">
                &emsp;The secret of life<br>
                is just every monment
            </div>
        </div>
    </section>
    <section class="sec">
        <a href="about.html">
            <div class="part1 pt">
                <div class="imghid"><div class="img"></div></div>
                <div class="txt">
                    <h1>关于</h1>
                    <p class="text1">关于我的信息</p>
                    <p>For some information about me, you can learn about my background and other related information from here</p>
                </div>
            </div>
        </a>
        <a href="tip.html">
            <div class="part2 pt">
                <div class="txt">
                    <h1>清单</h1>
                    <p class="text1">关于我的清单</p>
                    <p>About my tips, some learning process is recorded, you can learn about my learning experience here</p>
                </div>
                <div class="imghid"><div class="img"></div></div>
            </div>
        </a>
        <a href="join.html">
            <div class="part3 pt">
                <div class="imghid"><div class="img"></div></div>
                <div class="txt">
                    <h1>加入</h1>
                    <p class="text1">加入我们</p>
                    <p>My contact information, welcome everyone who is interested to join us</p>
                </div>
            </div>
        </a>
    </section>
        <footer class="foot">
            <p>@2023   |  BY:SSS</p>
            <p>The secret of life is just every monment</p>
        </footer>
    
    </main>
</body>
</html>
  • ABOUT
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于</title>
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/body.css">
    <link rel="stylesheet" href="../css/about.css">
</head>
<body>
    <nav>
        <div class="navtitle"><strong>SSS</strong>|MY LOFT</div>
        <a href="home.html">HOME</a>
        <a href="about.html">ABOUT</a>
        <a href="tip.html">TIP</a>
        <a href="join.html">JOIN</a>
        <div class="none"></div>
    </nav>
    <div class="mid">
        <div class="headimg">
            <h1>ABOUT ME</h1>
        </div>
        <div class="ab a1">
            <div class="txt">
                <h2>关于我</h2>
                <p>&emsp;&emsp;学院：XXX</p>
                <p>&emsp;&emsp;专业：XXX</p>
                <p>&emsp;&emsp;年级：XXX</p>
                <p>&emsp;&emsp;爱好：XXX</p>


            </div>
            <div class="imghid">
                <div class="img"></div>
            </div>
        </div>
        <div class="ab a2">
            <div class="imghid">
                <div class="img"></div>
            </div>
            <div class="txt">
                <h2>关于网站</h2>
                <p>&emsp;&emsp;HOME :主页</p>
                <p>&emsp;&emsp;ABOUT:自我介绍</p>
                <p>&emsp;&emsp;&emsp;TIP&emsp;:学习清单</p>
                <p>&emsp;&emsp;JOIN :呼吁加入</p>
                <p id="zili">&emsp;&emsp;学识尚浅，多多指教</p>
            </div>  
        </div>
        <div class="ab a3">
            <div class="txt">
                <h2>心灵捕手</h2>
                <h4>只是向上走，不必听自暴自弃者流的话。能做事的做事，能发声的发声。有一分热，发一分光，就令萤火一般，也可以在黑暗里发一点光，不必等候炬火。此后如竟没有炬火：我便是唯一的光</h4>
            </div>
            <div class="imghid">
                <div class="img"></div>
            </div>
        </div>

    </div>
    <footer class="foot">
        <p>@2023  |  BY:SSS</p>
        <p>The secret of life is just every monment </p>
    </footer>
</body>
</html>

四、后记

网页设计参考较多，全部来源于网络。
同时图片资源来源于网络。

若不小心侵犯了您的权益，请联系删除，谢谢！！！

tyro_sss
关注
专栏目录
HTML5期末大作业 HTML+CSS+JavaScript 简单的网页设计
qq_365392777
11-13 4214
常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作...
HTML CSS 网页设计作业「动漫小站」
网页设计与制作 | HTML+CSS+JS
01-07 1186
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
【网页设计】期末大作业html+css（动漫网站）
网页设计与制作 | HTML+CSS+JS
01-05 1285
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
期末大作业Html+CSS个人网站制作
m0_73701261的博客
06-07 6752
个人介绍网页制作，期末大作业，网站设计与制作
HTML+CSS篮球静态网页设计（web前端网页制作课作业）NBA杜兰特篮球运动网页
HTML网页设计
08-11 1766
📔网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；......
用HTML+CSS做一个漂亮简单的个人网页
热门推荐
qq_42523321的博客
12-20 59万+
用HTML+CSS做一个漂亮简单的个人网页 1.刚好帮我妹写了一个作业做一个个人网页设计，简单的三个小页面，就从网上随便找了图片自己随便设计了下东拼西凑哈哈哈！！！可能有点low但是对她来说或者需要做简单的个人网站应该就够了吧！ 图片是从站酷上面找的(因为我不会设计图)，如果有侵权了什么的请联系我立刻马上删掉哈! （首页的首屏有下雪了的特效，右下角有音乐播放提示） 2.先看一下效果哈！ 效...............
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML+CSS个人静态网页设计
HTML网页设计 专注大学生网页设计
09-24 1211
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
Web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程作业
weixin_57130283的博客
08-13 2万+
用HTML+CSS+JS做一个简单的个人网页，这个网页整体围绕首页的结构与样式去完成，在content盒子想添加什么元素就添加什么。
div+css布局实现个人网页设计(HTML期末作业)
HTML网页设计
08-14 4957
制作一个简单HTML个人网页网页（HTML+CSS）
HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品
08-10
### 三、关键技术知识点 ...通过以上技术知识点的应用，本项目不仅展示了HTML+CSS的基础技能，还涉及了一些进阶的技术，适合初学者作为学习案例，同时也能够帮助学生完成网页设计作业或期末项目。
一个简单的HTML网页 个人网站设计与实现 HTML+CSS+JavaScript自适应个人相册展示留言博客模板
08-10
这个项目的完成不仅有助于学生掌握 HTML、CSS 和 JavaScript 的基础知识和实际应用技巧，还能让他们了解现代网页设计的最佳实践。此外，由于项目中的模板具有广泛的适用性，它们也可以成为未来开发个人或商业网站的...
学生网页设计作业源码(HTML+CSS)——海贼王6页代码质量好
08-10
### 知识点分析 #### 一、网页设计与实现 ...综上所述，这份学生网页设计作业不仅涵盖了HTML+CSS的基本用法，还引入了一些进阶特性，如JavaScript的应用等，非常适合作为初学者学习HTML/CSS的基础案例。
制作一个简单HTML个人网页网页——人物介绍梵高（HTML+CSS）
08-10
HTML5与CSS3在个人网页设计中的应用 - **HTML5**: 作为第五代的HTML标准，提供了更丰富的标签来支持多媒体内容，例如 `<video>` 和 `<audio>` 标签可以直接嵌入视频和音频，无需额外插件支持。此外，还引入了语义...
使用纯CSS和JavaScript来实现一个转盘抽奖效果
最新发布
weixin_46328739的博客
10-10 353
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。
CSS3-Day1
m0_74039531的博客
10-10 599
CSS3圆角CSS3盒阴影box-shadowCSS3边界图片CSS3 background-clip属性padding-box 沿着边框填充content-box 在边框外面。
高频CSS总结
qq_51384850的博客
10-10 834
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS响应式布局
2401_82561004的博客
10-10 514
CSS 响应式布局也称自适应布局，是 Ethan Marcotte 在 2010 年 5月份提出的一个概念，简单来讲就是一个网站能够兼容多个不同的终端（设备），而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验，而且随着大屏智能手机的普及，用“大势所趋”来形容也不为过。接下来我们以媒体查询为例来具体演示一下响应式布局的实现。
HTML+CSS茶叶文化网页设计作业源码
"该资源是一份HTML+CSS网页设计的期末课程大作业，主题为茶叶文化网站，适合学生用于期末考核或课程设计。作业包含多种页面，使用了DIV+CSS布局，首页设计丰富，色彩鲜明，顶部导航和底部区域背景色为全宽。代码结构...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值