大学生静态网页设计期末作业-基于HTML+CSS+DIV布局+JS实现的影视推荐静态网页设计

共44个文件

jpg：32个

css：4个

html：4个

版权申诉

html

javascript

23 浏览量 2024-05-06 16:47:42 上传评论收藏 14.02MB ZIP 举报

在本项目中，大学生以HTML、CSS和JavaScript技术为基础，设计了一个影视推荐的静态网页作为其静态网页设计的期末作业。这个项目展示了Web前端开发的基本技能，尤其关注页面布局和交互性的实现。以下是对这些技术及其应用的详细解释： 1. HTML (HyperText Markup Language)： HTML是构成网页的基础语言，它用于定义网页内容的结构和意义。在这个项目中，学生可能使用了HTML标签如`<head>`、`<body>`、`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等来构建网页的各个部分。此外，`<h1>`到`<h6>`定义标题，`<p>`定义段落，`<a>`创建链接，`<img>`插入图像，`<ul>`、`<ol>`和`<li>`组织列表等，都是HTML的基本元素。 2. CSS (Cascading Style Sheets)： CSS负责网页的样式和布局。通过CSS，学生可以控制字体、颜色、大小、背景、边距、对齐方式等视觉元素。使用`div`元素配合CSS的布局技术（如盒模型、Flexbox或Grid）可以实现复杂的页面结构。例如，`div`常用于创建可自定义样式的容器，而Flexbox和Grid则可以实现灵活的多列布局。CSS选择器如类选择器、ID选择器、伪类等，使得对特定元素进行样式定制成为可能。 3. DIV布局： `div`元素是一个无语义的块级元素，通常用于组合其他元素或作为设计的容器。在CSS的帮助下，`div`元素可以用来创建响应式布局，使网页适应不同的屏幕尺寸。学生可能使用了浮动（float）、定位（position）或者现代布局方法（如Flexbox或Grid）来安排`div`元素的位置。 4. JavaScript (JS)： JavaScript是实现网页动态交互的关键技术。在这个项目中，学生可能使用JavaScript实现了以下功能：响应式导航菜单、图片轮播、电影推荐的动态加载、表单验证等。JS可以改变HTML元素的属性和内容，监听用户事件，以及与服务器进行异步通信（AJAX）。例如，`addEventListener`用于添加事件监听，`document.getElementById`或`document.querySelector`用于选取DOM元素，`innerHTML`或`textContent`用于读写元素内容。 5. K12（Kindergarten to 12th Grade）： K12是指从幼儿园到12年级的教育阶段，这表明这个项目可能是针对初级或中级水平的学生，旨在教授他们基础的Web开发技能。这个大学生的静态网页设计作业涵盖了Web开发的核心技术，通过实践这些技术，学生能够创建一个功能齐全、视觉吸引人的影视推荐网站。这样的项目不仅锻炼了他们的编程能力，还帮助他们理解Web页面的构造和用户体验设计。

资源推荐

资源详情

资源评论

收起资源包目录

HTML04.zip （44个子文件）

HTML04

Information.html 13KB

image

fuchou.jpg 595KB

pikaqiu.jpg 633KB

jujingyi.jpg 553KB

changgexing.jpg 461KB

bingtang.jpg 31KB

dahua.jpg 597KB

shentou2.jpg 229KB

zuihao.jpg 47KB

bianni.jpg 27KB

dasong3.jpg 453KB

liujin.jpg 535KB

jinyi.jpg 443KB

baise.webp 19KB

dangni1.webp 17KB

langya.jpg 36KB

shentou1.jpg 240KB

liulangdiqiu.jpg 572KB

deluna.jpg 28KB

caoyuan.jpg 463KB

zhouyutong1.jpg 483KB

motong.jpg 591KB

zhouyutong.jpg 422KB

siteng.jpg 669KB

IU.jpg 396KB

hanxiaozhou.png 619KB

qingyunian1.jpg 563KB

dasong2.jpg 488KB

dasong.jpg 533KB

liechang.jpg 1.48MB

tianqizhizi.jpg 501KB

dabai.jpg 368KB

baishe1.jpg 415KB

xueshan.jpg 222KB

bailu.jpg 13KB

IU1.jpg 589KB

About.html 5KB

jquery-3.3.1.min.js 85KB

Middlecontent.html 5KB

Index.html 2KB

Information.css 6KB

Index.css 9KB

About.css 3KB

Middlecontent.css 3KB

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Information</title> <link rel="stylesheet" href="./Information.css"> </head> <body> <div class="content"> <img class="bgc" src="image/baishe1.jpg" width="100%" alt=""> <span class="title">最新影视资讯和明星动态</span> <span class="titles">The latest film and television news and celebrity updates</span> <ul id="top-nav" class="ribbon"> <li><a href="Index.html"> <span>首页</span></a></li> <li><a href="About.html"> <span>关于</span></a></li> <li><a href="Middlecontent.html"> <span>榜单</span></a></li> <li><a href="Information.html"> <span>影视资讯</span></a></li> </ul> <div id="Information" class="Information"> <h3 id="star">明星资讯</h3> <ul id="Mlist"> <li>明星剧场</li> <li>影片信息</li> <li>影视动态</li> </ul> <div id="Mbox1" class="Mbox1"> <ul id="ul1"> <li class="i1"> <div class="Mbox-pic1"> <img src="image/deluna.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>李知恩(IU)</h5> <p><span>韩国</span> <span>2021-12-26 09:30:52</span></p> <h5>德鲁纳酒店</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/zhouyutong1.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>周雨彤</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>大宋少年志，我在他乡挺好的</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/jujingyi.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>鞠婧祎</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>满月之下</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>张新成</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>大宋少年志，变成你的那一天</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/bingtang.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>吴倩</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>冰糖炖雪梨</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/bailu.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>白鹿</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>周生如故</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/dangni1.webp" alt=""> </div> <div class="Mbox-font1"> <h5>李钟硕</h5> <p><span>韩国</span> <span>2021-12-26 09:30:52</span></p> <h5>当你沉睡时</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/hanxiaozhou.png" alt=""> </div> <div class="Mbox-font1"> <h5>韩孝周</h5> <p><span>韩国</span> <span>2021-12-26 09:30:52</span></p> <h5>W-两个世界</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/dangni1.webp" alt=""> </div> <div class="Mbox-font1"> <h5>裴秀智</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>当你沉睡时</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i1"> <div class="Mbox-pic1"> <img src="image/siteng.jpg" alt=""> </div> <div class="Mbox-font1"> <h5>景甜</h5> <p><span>中国</span> <span>2021-12-26 09:30:52</span></p> <h5>司藤</h5> <p><a href="#">查看全文</a></p> </div> </li> </ul> </div> <div id="Mbox2" class="Mbox2"> <ul id="ul2"> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/zhouyutong.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li class="i2"> <div class="Mbox-pic2"> <img src="image/dasong3.jpg" alt=""> </div> <div class="Mbox-font2"> <h5>大宋少年志</h5> <p><span>古装</span> <span>2019-06-03 09:30:52</span></p> <h5>谍战、热血、群像</h5> <p><a href="#">查看全文</a></p> </div> </li> <li clas

评论收藏

内容反馈

版权申诉