web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

最新推荐文章于 2024-04-20 09:51:46 发布

深巷积木青春

最新推荐文章于 2024-04-20 09:51:46 发布

阅读量612

点赞数 7

文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_62153875/article/details/135053422

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

嗨，欢迎来到深巷积木青春的小店。这篇文章主要讲解HTML5＋CSS3制作网站，请一起学习吧。

作品目录

一、📚网站介绍

二、🔗网站效果

🧩1.图片演示

三、💒网站代码

二、📚网站介绍

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

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

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

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

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中：
(1)📜html文件包含：其中index.html是首页、其他html为二级页面；
(2)📑 css文件包含：css全部页面样式；
(3)📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

三、🔗网站效果

四、💒代码展示

代码说明：以下仅展示部分代码供参考~

🧱HTML结构部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <style>

    </style>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul>
                <li class="active">
                    <a href="index.html">首页</a>
                </li>
                <li>
                    <a href="index01.html">我的爱好</a>
                </li>
                <li>
                    <a href="index02.html">我的家乡</a>
                </li>
                <li>
                    <a href="index03.html">家乡美食</a>
                </li>
            </ul>
        </div>
    </div>
    <div id = "wrapper">
        <div class="content">
            <ul class="imgs">
                <li><img src="./images/banner1.jpg"/></li>
                <li><img src="./images/banner2.jpg"/></li>
                <li><img src="./images/banner3.jpg"/></li>
                <li><img src="./images/banner4.jpg"/></li>
                <li><img src="./images/banner5.jpg"/></li>
            </ul>
            <ul class='dots'></ul>
        </div>
        <div class="btns">
          <span class="left">&lt;</span>
          <span class="right">&gt;</span>
      </div>
  </div>
    <div class="content">
        <div class="content1">
            <h1>自我介绍</h1>
            <p>我是XXX大学的一名学生，人们都说学生是这个社会上最穷的，我觉得不然;学生不但不是最穷，相反是最富有的;我一直认为我拥有着很大一笔财富，因为我有知识，有能力，最重要的是我有潜力。我对我个人自己是这样评价的</p>
            <p>首先是在思想上，一个人的政治思想决定着他的人生观，也就决定着他对学习、工作、生活的态度。初中时我就已经成为一名团员，进入中专后和老师同学相处极为融洽，也得到了老师和同学的关心帮助，使我感受到大家庭的温暖，更使我有了坚定的政治方向，热爱生活，热爱集体，得到别人帮助的同时热心帮助别人，为此我还参加了青年志愿者行动，利用课余时间去做些能力所及之事，去帮助那些真正需要帮助的人。课余积极踊跃参加学校班级组织的各项活动，能够在学习生活中能够尊敬师长，帮助老师和同学做些力所能及的事，和大家和谐相处。这些培养了我较强的集体荣誉感和团队精神，使我在学习生活中受益匪浅，不只在思想觉悟上取得了很大进步，也使我对自己、对未来充满了信心和希望。</p>
            <p>生活中我遵循简朴大方、严以律已、宽以待人的原则，不与同学比吃穿，而是比学习、比进步程度。对自己在学习生活中严格要求，遇到问题决不退缩，向老师、家长和同学虚心请教，知难而上，遇到错误不姑息迁就，分析错误原因，做到知错就改，能够遵守校纪校规，认真履行学生职责，做好每一件小事，热爱劳动，讲究卫生。我所在学校距离家乡路途遥远，我时常给家里打电话、写信，汇报学习生活情况，有什么思想问题也及时和父母沟通，使父母时刻感受到女儿的牵挂，也使我时刻感受着来自家庭的温暖，更多的是鼓励和支持。</p>
            <p>工作上。学习精神，知识型社会已不再是过去学一技而用终生的时代，必须时时处处学习，时时更新自己的知识体系，为此我经常上网查阅各方面信息，拓宽视野的同时也增加了信息量和知识量，养成独立思考、分辩事非的思维能力，越是学习，越是有信心，越是有希望，在以后的工作中能够发挥重要作用。团队精神，不管毕业之后从事什么工作，要想实现自己的人生价值，认真努力工作是必须要做到的，而个人的力量总是有限的，群体的力量是无穷的，更是智慧和力量的源泉，因此团队精神很是重要，在学校期间我就积极参加各项活动，和老师同学密切配合完成各项任务，这种团体精神会一直继续下去。不怕吃苦精神，做任何事没有吃苦的精神是不会成功的，在学习中是这样，遇到难题就放弃不会获得知识，在生活中也一样，遇到挫折就退缩不会有进步，在以后的工作中也一样，只有抱定不怕苦的精神才能在工作中取得更大的成绩，才能真正实现自己的人生梦想。</p>
        </div>
    </div>
    <div class="footer">
        <span>深巷积木青春 © 版权所有</span>
    </div>

    <script src="./js/index.js"></script>
</body>
</html>

🏠CSS样式部分代码

* {
    margin: 0;
    padding: 0;
}
.header {
    width: 1000px;
    height: 50px;
    margin: 0 auto;
}
.nav {
    width: 1000px;
    height: 50px;
}
.nav ul {
    padding: 0;
    width: 100%;
    height: 50px;
}
.nav ul li {
    float: left;
    width: 250px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    list-style: none;
    background-color: rgb(0, 174, 255);;
}
.nav ul li:hover {
    background-color: rgb(77, 199, 255);
}
.nav ul li.active {
    background-color: rgb(77, 199, 255);
}
.nav ul li a {
    color: white;
    text-decoration: none;
}
#wrapper{
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    height: 400px;
}
#wrapper .content{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#wrapper>.content>.imgs{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 6000px;           /*多留出一张图片的宽度！*/
    list-style: none;
}
#wrapper>.content>.imgs li{
    float: left;
    margin: 0;
    padding: 0;
    width: 1000px;
    height: 400px;
}
#wrapper>.content>.imgs>li img{
    width: 100%;
    height: 100%;
}

#wrapper>.content>.dots{
    position: absolute;
    right: 10px;
    bottom: 10px;
    list-style: none;
}
#wrapper>.content>.dots li{
    float: left;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%; 
    margin-left:10px ;
    cursor: pointer;
}

li.active{
    background-color: white;
}
li.quiet{
    background-color: #b1b1b1;
}

.btns{
    display: none;
}
.btns span{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.5;
    cursor: pointer;
    color: #fff;
    background: black;
}
.btns .left{
    left: 5px;
}
.btns .right{
    left: 100%;
    margin-left: -45px;
} 
.content {
    width: 1000px;
    margin: 0 auto;
}
.content1 {
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
    background-color: rgb(231, 247, 255);
}
.content1 h1 {
    text-align: center;
    margin-bottom: 30px;
}
.content1 p {
    text-indent: 2em;
    line-height: 26px;
}
.content1 img {
    width: 100%;
    margin-top: 10px;
}
.footer {
    width: 1000px;
    height: 50px;
    color: white;
    line-height: 50px;
    margin: 0 auto;
    background-color: rgb(0, 174, 255);
    text-align: center;
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥

深巷积木青春

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
web期末作业设计网页：学校网站设计——个人介绍1(4页) HTML+CSS+JavaScript 学生DW网页设计作业成品网页设计作业 web网页设计与开发 html实训大作业

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
复制链接

扫一扫