679.大学生HTML期末大作业 —【简单的仿花瓣首页精品网页(2页)】 Web前端网页制作 html5+css3

一只小小的眠羊

1063人浏览 · 2025-11-24 23:31:53

一只小小的眠羊 · 2025-11-24 23:31:53 发布

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

一、网页简介

本实例应用html5+css3，div+css布局，代码简单,带实验报告书。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含2个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<html>
   <head>
       <title>花瓣网首页</title>
       <meta charset="utf-8">
   </head>

   <body>
       <div id="wrap">
           <div id="top">
               <div id="top-1">
                   <div id="top-1-1">
                       <img src="images/logo1.png" id="logo1">
                       <div id="huaban">花瓣</div>
                   </div>
                   <div id="top-1-2">
                       <div class="daohang">发现</div>
                       <div class="daohang">最新</div>
                       <div class="daohang">美思</div>
                       <div id="daohang">
                           <div id="huodong">活动</div>
                       </div>
                       <div class="daohang">教育</div>
                   </div>
                   <div id="top-1-3">
                       <button type="button" id="denglu" type="width: 50px;height: 40px;"><a href="dneglu.html"
                               style="text-decoration: none;color:white;">登录</a></button>
                       <button type="button" id="zhuce"><a href=""
                               style="text-decoration: none;color:white;">注册</a></button>
                   </div>
               </div>
               <div id="top-2">
                   花瓣，陪你做生活的设计师
               </div>
               <div id="top-3">
                   <input type="text" name="search" placeholder="    搜索你喜欢的">
                   <a href="#">
                       <div id="fangdajing"></div>
                   </a>
               </div>
               <div id="top-4">
                   热门搜索：匠人匠心,精神工匠,灵感源泉
               </div>
           </div>
           <div id="mid">
               <div id="mid-1">
                   <hr class="hr1">大家正在关注
                   <hr class="hr2">
               </div>
               <div id="mid-2">
                   <div class="mid-2-img" style="background:url(images/1.png); background-size: cover;">草莓</div>
                   <div class="mid-2-img" style="background:url(images/2.png); background-size: cover;">派对装饰</div>
                   <div class="mid-2-img" style="background:url(images/3.png); background-size: cover;">雪</div>
                   <div class="mid-2-img" style="background:url(images/4.png); background-size: cover;">美食</div>
                   <div class="mid-2-img" style="background:url(images/5.png); background-size: cover;">书架</div>
                   <div class="mid-2-img" style="background:url(images/6.png); background-size: cover;">彩虹色</div>
               </div>
               <div id="mid-3">
                   <hr class="hr1">为您推荐
                   <hr class="hr2">
               </div>
               <div id="mid-4">
                   <div class="mid-4-div" id="mid-4-1">
                       <div id="triangle-1"></div>
                   </div>
                   <div class="mid-4-div" id="mid-4-2">
                       <div id="mid-4-2-1">
                           <p>笑靥如花的你</p>
                           <p><b style="font-size: 25px; color: black;">54</b>观看</p>
                       </div>
                       <hr style="height: 10px; background-color: ivory; border:none;">
                       <div id="mid-4-2-2">
                           <p>当下视觉||中餐摄影</p>
                           <p>
                                          
                                   
                               <b style="font-size: 25px; color: black;">89</b>观看
                           </p>
                       </div>
                   </div>
                   <div class="mid-4-div" id="mid-4-3" style="">
                       <div id="triangle-2"></div>
                   </div>
                   <div class="mid-4-div" id="mid-4-4" style="">
                       <div id="triangle-3"></div>
                   </div>

...

2.CSS

代码如下（节选示例）：

* {
           margin: 0;
           padding: 0;
       }

       #top {
           width: 1328px;
           height: 512px;
           background: url(images/6.jpg);
           margin: 0 auto;
           overflow: hidden;
       }

       #top-1 {
           width: 1328px;
           height: 65px;
           overflow: hidden;
       }

       #top-1-1 {
           width: 130px;
           height: 50px;
           margin-left: 100px;
           color: white;
           font-size: 35px;
           margin-top: 10px;
           float: left;
       }

       #logo1 {
           width: 50px;
           height: 50px;
       }

       #huaban {
           width: 80px;
           height: 50px;
           float: right;
       }

       #top-1-2 {
           width: 700px;
           height: 35px;
           margin-top: 20px;
           float: left;
       }

       .daohang {
           width: 140px;
           height: 35px;
           float: left;
           color: white;
           text-align: center;
           font-size: 21px;
       }

       #daohang {
           width: 140px;
           height: 35px;
           float: left;
           color: white;
       }

       #huodong {
           width: 50px;
           height: 35px;
           margin-left: 30px;
           float: left;
           text-align: center;
           font-size: 21px;
       }

       #new {
           width: 50px;
           height: 18px;
           float: left;
           margin-top: 8px;
           background-color: red;
           line-height: 18px;
           text-align: center;
           font-size: 15px;
       }

       #top-1-3 {
           width: 200px;
           height: 100px;
           float: left;
           margin-left: 100px;
       }

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

六、更多推荐

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责