web结课作业的源码——HTML+CSS+JavaScript仿oppo官网手机商城(1页)

news2024/11/24 19:54:37

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。


⚽精彩专栏推荐👇🏻👇🏻👇🏻

【作者主页——🔥获取更多优质源码】
【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】


文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML结构代码 🧱
    • 2.CSS样式代码 🏠
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。

3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。


一、网页效果🌌

在这里插入图片描述


二、代码展示😈


1.HTML结构代码 🧱

代码如下(示例):以下仅展示部分代码供参考~


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="css/base.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function() {
            var aIcon = $('#icon div');
            var aBanner = $('#banner a');
            aIcon.mouseover(function() {
                aIcon.removeClass('active');
                $(this).addClass('active');
                aBanner.removeClass('show');
                $('#banner a').eq($(this).index()).addClass('show');
            });

            var aBtn = $('#btn a');
            var aCon = $('#con ul');
            aBtn.mouseover(function() {
                aBtn.removeClass('active');
                $(this).addClass('active');
                aCon.removeClass('show');
                $('#con ul').eq($(this).index()).addClass('show');
            });
        });
    </script>

</head>

<body>
    <div class="login-wrap">
        <div class="login clearfix">
            <div class="login-l fl clearfix">
                <span></span>
                <i></i>
                <b>4001-666-888</b>
            </div>
            <ul class="login-r fr clearfix">
                <li class="one"><a href="###">登录</a></li>
                <li class="two"><a href="###">注册</a></li>
                <li><a href="###">积分兑换</a></li>
                <li><a href="###">帮助中心</a></li>
                <li class="five clearfix"><span></span><a href="###" class="fl">购物车</a></li>
            </ul>
        </div>
    </div>
    <!--login-wrap end-->
    <div class="topnav-wrap clearfix">
        <h2 class="fl">oppa<span></span></h2>
        <ul class="fr clearfix">
            <li><a href="###">首页</a></li>
            <li><a href="###">手机</a></li>
            <li><a href="###">配件</a></li>
            <li><a href="###">服务</a></li>
            <li class="wid1"><a href="###">体验店</a></li>
            <li class="wid2"><a href="###">软件商店</a></li>
            <li class="wid2"><a href="###">ColorOS</a></li>
            <li><a href="###">社区</a></li>
        </ul>
    </div>
    <!--topnav end-->
    <div class="banner-wrap">
        <div class="banner" id="banner">
            <a href="###" class="banner-bg1 show"><img src="img/20150202100021_PPLCdk.jpg" /></a>
            <a href="###" class="banner-bg2"><img src="img/1.jpg" /></a>
            <a href="###" class="banner-bg3"><img src="img/2.jpg"/></a>
            <a href="###" class="banner-bg4"><img src="img/3.jpg"/></a>
            <a href="###"><img src="img/20150202100021_TgEOkp.png" class="banner-con"/></a>
        </div>
        <div class="icon clearfix" id="icon">
            <div class="icon1 active fl"><a href="###"></a></div>
            <div class="icon2 fl"><a href="###"></a></div>
            <div class="icon3 fl"><a href="###"></a></div>
            <div class="icon4 fl"><a href="###"></a></div>
        </div>
        <div class="opa1"></div>
        <div class="opa2"></div>
        <div class="bor"></div>
    </div>
    <!--banner-wrap end-->
    <div class="box-1">
        <div class="tit1"></div>
        <ul class="clearfix">
            <li class="first">
                <div class="product">
                    <div class="box1-pic">
                        <a href="###"><img src="img/8_03.jpg" /></a>
                        <a href="###"><img src="img/pic-s.png" /></a>
                    </div>
                    <h6>N3</h6>
                    <P>1600万电动旋转摄像头</P>
                    <div class="price clearfix">
                        <i class="fl">¥ 3999&nbsp;&nbsp;立即购买</i>
                        <span class="fr"></span>
                    </div>
                </div>
            </li>
            <li>
                <div class="product">
                    <div class="box1-pic">
                        <a href="###"><img src="img/8_05.jpg" /></a>
                        <a href="###"><img src="img/pic-s.png" /></a>
                    </div>
                    <h6>R5</h6>
                    <P>薄至4.85mm</P>
                    <div class="price clearfix">
                        <i class="fl">¥ 2999&nbsp;&nbsp;立即购买</i>
                        <span class="fr"></span>
                    </div>
                </div>
            </li>
            <li>
                <div class="product">
                    <div class="box1-pic">
                        <a href="###"><img src="img/8_07.jpg" /></a>
                        <a href="###"><img src="img/pic-s.png" /></a>
                    </div>
                    <h6>Find7</h6>
                    <P>4G全能旗舰</P>
                    <div class="price clearfix">
                        <i class="fl">¥ 2999&nbsp;&nbsp;立即购买</i>
                        <span class="fr"></span>
                    </div>
                </div>
            </li>
            <li class="last">
                <div class="product">
                    <div class="box1-pic">
                        <a href="###"><img src="img/8_09.jpg" /></a>
                        <a href="###"><img src="img/pic-s.png" /></a>
                    </div>
                    <h6>R1C</h6>
                    <P>钻石流光镜面</P>
                    <div class="price clearfix">
                        <i class="fl">¥ 2499&nbsp;&nbsp;立即购买</i>
                        <span class="fr"></span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <!--box1 end-->
    <div class="box-2">
        <div class="tit2"></div>
        <ul class="clearfix">
            <li class="box2-l fl clearfix">
                <a href="###" class="first fl"><img src="img/9_03.jpg" /></a>
                <div class="fl">
                    <a href="###"><img src="img/9_05.jpg"  class="second" /></a>
                    <a href="###"><img src="img/9_11.jpg" /></a>
                </div>
                <a href="###" class="fl"><img src="img/9_18.jpg" /></a>
            </li>
            <li class="box2-r fl">
                <a href="###" class="fl"><img src="img/9_07.jpg" /></a>
                <a href="###" class="fl"><img src="img/9_12.jpg"  class="third" /></a>
                <div class="fl">
                    <a href="###"><img src="img/9_14.jpg" class="fouth" /></a>
                    <a href="###" class="fl"><img src="img/9_19.jpg" /></a>
                </div>
            </li>
        </ul>
    </div>
    <!--box-2 end-->
    <div class="box-3">
        <div class="tit3"></div>
        <ul class="clearfix">
            <li>
                <a href="###"><img src="img/10_23.jpg" class="first" /></a>
                <a href="###"><img src="img/10_34.jpg" /></a>
            </li>
            <li class="center">
                <a href="###"><img src="img/10_25.jpg" class="first" /></a>
                <a href="###"><img src="img/10_30.jpg" /></a>
            </li>
            <li>
                <div class="btn clearfix" id="btn">
                    <a href="###" class="active">新闻</a>
                    <a href="###">微博</a>
                </div>
                <div class="con" id="con">
                    <ul class="con1 show">
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_28.jpg" /></a>
                            <a href="###" class="detail fl">业界革命,OPPO发布全球最高灵敏度平面振膜耳机PM-1</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_31.jpg" /></a>
                            <a href="###" class="detail fl">极致原音 OPPO PM-1耳机斩获EISA年度HIFI大奖</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_37.jpg" /></a>
                            <a href="###" class="detail fl">OPPO或在巴塞罗那MWC通讯展发布ColorOS 2.0</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_39.jpg" /></a>
                            <a href="###" class="detail fl">OPPO N1入选英国《stuff》杂志年度TOP 10</a>
                        </li>
                    </ul>
                    <ul class="con2">
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_31.jpg" /></a>
                            <a href="###" class="detail fl">业界革命,OPPO发布全球最高灵敏度平面振膜耳机PM-1</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_37.jpg" /></a>
                            <a href="###" class="detail fl">极致原音 OPPO PM-1耳机斩获EISA年度HIFI大奖</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_28.jpg" /></a>
                            <a href="###" class="detail fl">OPPO或在巴塞罗那MWC通讯展发布ColorOS 2.0</a>
                        </li>
                        <li class="clearfix">
                            <a href="###" class="pic fl"><img src="img/10_39.jpg" /></a>
                            <a href="###" class="detail fl">OPPO N1入选英国《stuff》杂志年度TOP 10</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <!--box-3 end-->
    <div class="banner-bottom"><a href="###"></a></div>
    <div class="link-wrap">
        <div class="link clearfix">
            <dl>
                <dt><a href="###">关于我们</a></dt>
                <dd><a href="###">&diams;关于OPPO</a></dd>
                <dd><a href="###">&diams;新闻中心</a></dd>
                <dd><a href="###">&diams;人才招聘</a></dd>
            </dl>
            <dl>
                <dt><a href="###">推荐机型</a></dt>
                <dd><a href="###">&diams;N3</a></dd>
                <dd><a href="###">&diams;R5</a></dd>
                <dd><a href="###">&diams;R1C</a></dd>
                <dd><a href="###">&diams;Find 7</a></dd>
            </dl>
            <dl>
                <dt><a href="###">购物相关</a></dt>
                <dd><a href="###">&diams;帮助中心</a></dd>
                <dd><a href="###">&diams;周边产品</a></dd>
                <dd><a href="###">&diams;OPPO体验店</a></dd>
                <dd><a href="###">&diams;客户服务政策</a></dd>
            </dl>
            <dl>
                <dt><a href="###">会员中心</a></dt>
                <dd><a href="###">&diams;产品注册</a></dd>
                <dd><a href="###">&diams;会员注册</a></dd>
                <dd><a href="###">&diams;会员登录</a></dd>
            </dl>
            <dl class="consider">
                <dt><a href="###">关注我们</a></dt>
                <dd><a href="###" class="clearfix"><span class="icon1 fl"></span>新浪微博</a></dd>
                <dd><a href="###" class="clearfix"><span class="icon2 fl"></span>腾讯微博</a></dd>
                <dd><a href="###" class="clearfix"><span class="icon3 fl"></span>人人网</a></dd>
                <dd><a href="###" class="clearfix"><span class="icon4 fl"></span>QQ空间</a></dd>
            </dl>
            <dl class="contact">
                <dt><a href="###">联系我们</a></dt>
                <dd>
                    <a href="###" class="contact1 clearfix">
                        	<span class="fl"></span>
                            <div class="fl contact-r">
                                <i>4001-666-888</i><br />
                                <b>7*24小时客服电话</b>
                            </div>
                        </a>
                </dd>
                <dd>
                    <a href="###" class="contact2 clearfix">
                        	<em class="fl"></em>
                            <div class="fl contact-r">
                                <i>在线客服</i><br />
                                <b>服务时段:8:30--22:00</b>
                            </div>
                        </a>
                </dd>
            </dl>
        </div>
    </div>
    <div class="footer-wrap">
        <div class="footer clearfix">
            <span class="fl"></span>
            <p class="fl">@ 2005-2015东莞市永盛通信科技有限公司 版权所有(粤ICP备 08130115号)</p>
            <ul class="fr clearfix">
                <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>
</body>

</html>


2.CSS样式代码 🏠

@charset "utf-8";
/* base文件 */

* {
    font-family: 'Microsoft Yahei';
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

a {
    text-decoration: none;
    color: #000;
}

i,
em {
    font-style: normal;
}

b,
strong {
    font-weight: normal;
}

ul,
ol,
dl,
dd,
dt {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after {
    display: block;
    content: '';
    clear: both;
}

.clearfix {
    zoom: 1;
}

th,
td {
    border: 1px solid #fff;
    padding: 0;
}

table {
    border-collapse: collapse;
}

img,
li {
    vertical-align: top;
}

a img {
    border: 0;
}



三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

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

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/65401.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

15、简单了解Vue

1、vue概述 Vue是一套前端框架&#xff0c;可以免除原生JavaScript中的DOM操作&#xff0c;简化书写。 基于MVVM&#xff08;Model-View-View Model&#xff09;思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上 vue的官网&#xff1a;https://cn.v…

电脑数据转移到新电脑?换新电脑如何转移软件

电脑数据转移到新电脑&#xff1f;许多用户在下载游戏的时候&#xff0c;没有更改默认安装位置&#xff0c;直接把游戏安装到了C盘里&#xff0c;结果导致C盘空间不足&#xff0c;于是希望将游戏移动到其他驱动器以释放空间。也有的用户是更换了电脑&#xff0c;不想重新安装游…

常用数据库之sqlite的使用

2.1 介绍 sqlite为关系型数据库&#xff0c;是一款轻型的数据库&#xff0c;是遵守ACID的关系型数据库管理系统&#xff0c;它包含在一个相对小的C库中。它的设计目标是嵌入式的&#xff0c;而且已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&#xff0c;在嵌…

反序列化__wakeup

简介 __wakeup()&#xff0c;执行unserialize()时&#xff0c;先会调用这个函数。 <?php class c1 {private $argv;private $method;function __construct($argv,$method){$this->argv$argv;$this->method$method;}public function f1(){ech…

BUG系列路径规划算法原理介绍(六)——BugFlood算法

本系列文章主要对Bug类路径规划算法的原理进行介绍&#xff0c;在本系列的第一篇文章中按照时间顺序梳理了自1986年至2018年Bug类路径规划算法的发展&#xff0c;整理了13种BUG系列中的典型算法&#xff0c;从本系列的第二篇文章开始依次详细介绍了其中具有代表性的BUG1、BUG2、…

KubeSphere开启DevOps 功能教程

基于 Jenkins 的 KubeSphere DevOps 系统是专为 Kubernetes 中的 CI/CD 工作流设计的&#xff0c;它提供了一站式的解决方案&#xff0c;帮助开发和运维团队用非常简单的方式构建、测试和发布应用到 Kubernetes。它还具有插件管理、Binary-to-Image (B2I)、Source-to-Image (S2…

MySQL遵循最左前缀匹配原则!面试官:回去等通知吧

我们都知道&#xff0c;MySQL的Innodb引擎中&#xff0c;索引是通过B树来实现的。不管是普通索引还是联合索引&#xff0c;都需要构造一个B树的索引结构。 那么&#xff0c;我们都知道普通索引的存储结构中在B树的每个非节点上记录的索引的值&#xff0c;而这棵B树的叶子节点上…

Markdown官方教程(六)

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

Spring Boot 创建项目 / 目录介绍 / 配置文件

目录 Spring Boot项目创建 一、通过IDEA来创建Spring Boot项目 二、通过网页版创建Spring Boot项目 Spring Boot项目目录介绍 Spring Boot项目创建 一、通过IDEA来创建Spring Boot项目 社区版IDEA需要先安装 Spring Assistant 插件。 1. 创建新项目&#xff0c;选择Sprin…

2022最后一个月,我们该如何学Java​?

2022最后一个月&#xff0c;我们该如何学Java&#xff1f; 互联网的快速发展和激烈竞争&#xff0c;在世界编程语言排行榜中&#xff0c;Java位列前三&#xff0c;占全球编程市场份额的12%左右,各大公司对Java工程师的需求量都很大&#xff0c;要求也越来越高&#xff0c;优秀…

Gradle学习第一篇——自定义Gradle插件

纸上得来终觉浅&#xff0c;绝知此事要躬行。 自定义Gradle插件有三种方法&#xff0c;各有优劣处&#xff0c;同类博客文章很多但是有的语法已经过时了&#xff0c;笔者运行环境 Android Studio Dolphin && gradle-7.4-bin 文章目录第一种 build script (单文件生效)第…

Linux目录操作

一、常用权限操作 权限操作实战 1、创建文件&#xff0c;设置其用户组 root用户创建新文件love.txt 命令&#xff1a;echo I Love you > love.txt 查看文件love.txt的用户及用户组 将其用户组改为lzy用户组 命令&#xff1a;chgrp lzy love.txt 查看文件love.txt的用…

System Verilog断言

简介 断言通常被称为序列监视器或者序列检验器&#xff0c;是对设计应当如何执行特定行为的描述&#xff0c;是一种嵌入设计检查。如果检查的属性&#xff08;property&#xff09;不是我们期望的表现&#xff0c;那么在我们期望事件序列的故障上会产生警告或者错误提示。 断言…

SpringMVC:整合SSM框架

一、大致框架 1.建立数据库&#xff0c;并导入数据 create database cjgl; create table books( bookID int(10) not null auto_increment comment 书id, bookName varchar(100) not null comment 书名, bookCounts int(11) not null comment 数量, detail varchar(200) no…

C. Planar Reflections

题目如下&#xff1a; 思路 or 题解 我们可以通过图解发现&#xff1a;可以递推找到答案了 我们约定&#xff1a;dp[i][j]dp[i][j]dp[i][j] 第 iii 个板, 衰变年龄为jjj 的答案是 dp[i][j]dp[i][j]dp[i][j] 我们通过图解找到转移方程&#xff1a; dp[i][j]dp[i−1][j]dp[n−i]…

[附源码]Python计算机毕业设计Django时间管理软件app

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

数据结构【红黑树模拟实现】

目录 红黑树&#xff1a;基于AVL树改进 红黑树的性质 红黑树基本结构 insert基本结构 新增节点的默认颜色为红色 节点性质总结 情况一: cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红 情况二: cur为红&#xff0c;p为红&#xff0c;g为黑&#xf…

基于web的电子图书管理系统

目  录 中文摘要&#xff08;关键词&#xff09; 1 英文摘要&#xff08;关键词&#xff09; 1 前 言 2 1概述 3 1.1系统研究背景 3 1.2系统研究意义 3 2 需求分析 4 2.1可行性分析 4 2.2功能需求分析 4 2.3非功能需求分析 5 3系统分析 6 3.1系统业务流程分析 6 3.2系统数据…

web前端课程设计 HTML+CSS+JavaScript旅游风景云南城市网页设计与实现 web前端课程设计代码 web课程设计 HTML网页制作代码

&#x1f468;‍&#x1f393;静态网站的编写主要是用 HTML DⅣV CSSJS等来完成页面的排版设计&#x1f469;‍&#x1f393;&#xff0c;一般的网页作业需要融入以下知识点&#xff1a;div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉…

狂神说多线程学习笔记

一、线程简介 1、多任务 现实中太多这样同时做多件事情的例子了&#xff0c;看起来是多个任务都在做&#xff0c;其实本质上我们的大脑在同一时间依旧只做了一件事情。 2、多线程 原来是一条路&#xff0c;慢慢因为车太多了&#xff0c;道路阻塞&#xff0c;效率极低。为了提…