【网页设计】基于HTML在线商城购物项目设计与实现-----电脑商城6页带视频 带报告3000字

news2024/11/16 9:54:16

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Computer Mall</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>
  <div class="head clearfix"> <b class="fl"><img src="../电脑商城/images/logo.jpg"></b>
    <nav class="fr" style="width: 700px;"> 
      <a href="index.html">商城主页</a> 
      <a href="about.html">新品先知</a> 
      <a href="pic.html">优质产品</a> 
      <a href="news.html">业内新消息</a> 
      <a href="sp.html">宣传视频</a>
    </nav>
  </div>
  <div class="main clearfix">
    <div class="banner"> <img src="../电脑商城/images/time.jpg" width="100%"> </div>
    <div class="div7 bg000 clearfix">
      <div class="">
        <ul id="jSearchHeroDiv" class="imgtextlist">
          <li><img src="../电脑商城/images/a1.jpg">

          </li>
          <li><img src="../电脑商城/images/a2.jpg">

          </li>
          <li><img src="../电脑商城/images/a3.jpg">

          </li>
          <li><img src="../电脑商城/images/a4.jpg">

          </li>
        </ul>
      </div>
    </div>
    <div class="div4 bg000 ">
      <div class="bar">
        <h3>企业介绍</h3>
      </div>
      <div class="fr">
        <div label-module="para" style="padding: 10px;box-sizing: border-box;">
          <div label-module="para" style="font-size:14px">
       联想笔记本发展简介:<br><br>
      联想笔记本是指联想集团生产的便携手提电脑。 联想集团成立于1984年,由中科院计算所投资20万元人民币、11名科技人员创办,到今天已经发展成为一家在信息产业内多元化发展的大型企业集团。联想的总部设在美国罗利,并建立了以中国北京、日本东京和美国罗利三大研发基地为支点的全球研发架构。通过联想自己的销售机构、联想业务合作伙伴以及与IBM的联盟,新联想的销售网络遍及全世界。
       <br>
       <br>
       联想的创新精神和IBM个人电脑事业部不断寻求突破的传统在今天的联想得到了延续,新联想是一个具有全球竞争力的IT巨人。
        <br>
        <br>
        2004年12月联想现场宣布以12.5亿美金收购IBM个人电脑业务,包括台式机、笔记本及个人产品研发和采购。其中6.5亿美元联想以现金形式支付。联想控股在集团占有45%股份,IBM占18.5%。联想未来5年使用IBM品牌。
          </div>
        </div>
      </div>
    </div>
    <div class="div2 bg000 ">
      <div class="bar">
        <h3>关于我们</h3>
      </div>
      <div style="padding: 5px;height: 460px;">
        <p style="text-indent: 2em;">联想集团,成立于1984年,是由中科院计算所投130万元人民币,11名管理人员共同创办的一家在信息产业内多元化发展的大型企业集团,富有创新性的国际化的科技公司。作为全球电脑市场的领导企业,联想从事开发、制造并销售可靠的、安全易用的技术产品及优质专业的服务,帮助全球客户和合作伙伴取得成功。联想公司主要生产台式电脑、服务器、笔记本电脑、打印机、掌上电脑、主板、手机 、一体机电脑等商品。</p>
        <p style="text-indent: 2em;">2004年,联想集团收购IBM PC(Personal computer,个人电脑)事业部。</p>  
        <p style="text-indent: 2em;">2016年8月,全国工商联发布“2016中国民营企业500强”榜单,联想名列第四。</p>  
        <p style="text-indent: 2em;">2019年12月18日,联想控股发公告宣布董事长柳传志退休,由宁旻接任联想控股董事长。</p>  
        
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="zhaopian">
  <img src="images/dibu1.jpg" width="100%">
  </div>
<div class="wenzi1">
  <p1>显示屏:采用15.6英寸微边全面屏,100%sRGB高色域,1920*1080高清分辨率,支持更高的165Hz刷新率和G-Sync FreeSync Premium双料防撕裂<br><br>
  处理器和显卡:搭载AMD Ryzen 7 5800H处理器。7nm的制程工艺,主频为3.2GHz,睿频4.4GHz,功耗70W。RTX 3050Ti 4GB芯片,4GB GDDR6 显存,支持Dynamic Boost 2.0,全功率性能释放可达95W<br><br>
  散热:采用霜刃散热系统3.0,3 x 8mm高性能复合式热管,配合一体式散热模组,高效导热297片0.1mm超薄铜合金散热鳍片,可以迅速导出热量。<br><br>
  电源电池:支持100W PD快充,80Wh大容量电池,大功率适配器,支持LEGION超能快充,30分钟充满50%电量,一小时可充至80%以上。<br>
  </p>
  </div>
  <div class="footer">版权所有&nbsp;xxx</div>

</html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

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

相关文章

java开发者工具IDEA自定义设置主题/字体/字号大小

IDEA自定义设置主题 第一步&#xff1a;点击工具栏上的“File”选项。 第二步&#xff1a;选择“Settings…”选项。 第三步&#xff1a;点击“Appearance & Behavior > Appearance”选项。 第四步&#xff1a;点击右侧"Theme"下拉框&#xff0c;选择自己喜…

动态爬虫管理平台构建与实现_kaic

目 录 第1章 绪论 1.1背景与意义 1.2主题网络爬虫的国内外研究现状 1.2.1主题辨别算法及平台构建 1.2.2主题爬虫系统 1.3本文的研究内容 第二章 主题网络爬虫的体系结构 2.1组成模块 2.1.1基本组成 2.1.2基本流程 2.2主题页面的分布特性 2.2.1 Hub/Authority特性 2.2.2 Linkag…

一篇文章带你搞懂前端Cookie

文章目录一. 前言(一些废话)二. Cookie1. 为什么会有Cookie2. Cookie的特性3. 浏览器Cookie4. 跨站和跨域三. Cookie操作1. 获取Cookie2. 设置Cookie3. 修改Cookie4. 删除Cookie四. Cookie属性1. Cookie属性Domain2. Cookie属性path3. Cookie属性expires4. Cookie属性max-age5.…

大数据_数据中台_数据分层

目录 分层总览 ODS:操作数据层 DIM:维度数据层 DWD:明细数据层 DWS:汇总数据层 ADS:数据应用层 CDM:公共数据层 数据层级调用原则 分层总览 ODS:操作数据层 ODS(Operate Data Store&#xff09;,ODS层数据是数据仓库的第一层数据&#xff0c;是业务数据库的原始数据的复…

Oracle Primavera Unifier uDesigner 资产管理器(Asset Manager )

目录 前言 特点 优势 维护管理 独立或集成 事务管理 资产组合管理 投资组合管理能力 可持续性和能源管理 单一集成设施和资产生命周期管理 移动应用 前言 Oracle Primavera Unifier 为组织提供设施管理的行业最佳实践解决方案。从设计、构建、运行和维护&#xff0…

【深入理解Kotlin协程】Google的工程师们是这样理解Flow的?

Question&#xff1a;why there is a Flow in kotlin? 问这个问题就好比在问为什么那里会有一座山存在&#xff0c;嗯&#xff0c;这貌似是一个哲学问题。当然&#xff0c;对于kotlin中的Flow的理解可能不会上升到这么高的哲学层次&#xff0c;对于Flow相关的Api掌握并使用它…

JavaSE笔记——多态

文章目录前言一、向上转型回顾1.忘掉对象类型二、转机1.方法调用绑定2.产生正确的行为3.可扩展性三、构造器和多态1.构造器调用顺序2.构造器内部多态方法的行为四、协变返回类型总结前言 本文是学习Java编程思想记录的笔记&#xff0c;主要内容介绍在 Java 中多态的概念。 多…

Servlet API(HttpSerrvlet+HttpServletRequest+HttpServletResponse)

目录 &#x1f432; 1. HttpServlet &#x1f432; 2. HttpServletRequest HTTP请求 &#x1f984; 2.1 打印请求信息(创建 ShowRequest 类) &#x1f984; 2.2 获取 GET 请求中的参数(创建 GetParameter 类) &#x1f984; 2.3 获取 POST 请求中的参数(创建 PostParame…

java学习day57(Spring Cloud)Spring Cloud 微服务

主要课程内容 第⼀部分&#xff1a;微服务架构 互联网应用架构演进 微服务架构的体现思想及优缺点 微服务架构的核心概念 第⼆部分&#xff1a;SpringCloud概述 Sping Cloud 是什么 Sping Cloud 解决什么问题 Sping Cloud 架构 第三部分&#xff1a;案例准备 第四部分&#xff…

2022华为杯研究生数学建模竞赛DS数模选题建议

2022华为杯研究生数学建模竞赛DS数模选题建议 开放性&#xff1a;F>E>AD>BC. 难度&#xff1a;AD>BC>EF &#xff08;仅C君个人看法&#xff09; A题 移动场景超分辨定位问题 此题是物理cv类题目&#xff0c;属于比较新颖的超分辨率图像检测类任务&#xff0c…

1、Java的json得到我们想要的数据结构

Java的json得到我们想要的数据结构 第一步&#xff1a;首先我们要知道json就两种数据结构。 &#xff01;&#xff01;&#xff01;第一种数据结构&#xff1a;对象用{ }表示 &#xff01;&#xff01;&#xff01;第二种数据结构&#xff1a;数组用[ ]表示 我们用这个案例来…

在智能家居领域产品中常用芯片

芯片是当前“电子科技设备的灵魂”所在&#xff0c;几乎决定了所有电子设备的综合性能&#xff0c;现如今智能家居带来了全新的使用场景与交互方式&#xff0c;从扫地机器人、智能洗碗机、智能冰箱等智能机器&#xff0c;到智能照明、智能感知、网络通讯、家庭影音等智能系统&a…

H264基础知识入门

之前视频基础&#xff0c;有讲到视频的原始数据YUV&#xff0c;相比RBG&#xff0c;数据确实减少了&#xff0c;但还是一个非常大数据量&#xff0c;会占用很大空间以及在给网络传输带来很大压力。所以必须要对视频进行压缩&#xff0c;减少占用空间。这里主要分享H264编码技术…

数字IC设计之——低功耗设计

目录 概述 背景 为什么需要低功耗设计 CMOS IC功耗分析 基本概念 功耗的分类 功耗相关构成 不同层次低功耗设计方法 芯片中的功耗分布以及对应的低功耗方案 低功耗方案 系统算法级的低功耗技术 编码阶段的低功耗技术 门控时钟 Clock Gating 物理实施的低功耗技术 操作数分离&am…

【第六部分 | JavaScript高级】1:面向对象

目录 【第一章】面向对象 | Class创建、构造函数、方法 | Class继承 | 三个注意点 | 静态成员 | 原型对象 __ _proto___ | 类的本质 【第一章】面向对象 | Class创建、构造函数、方法 创建类 class name {// class body }var xx new name() 构造函数 class Person {co…

【Godot】数据响应的方式执行功能

Godot Engine 版本&#xff1a;4.0 beta 6 下载地址&#xff1a;Index of /godotengine/4.0/beta6/ (downloads.tuxfamily.org) 在这个教程中&#xff0c;学会理解以数据为主的进行处理执行逻辑的代码编写方式&#xff0c;虽然看似简单&#xff0c;但是确是方便又好用。 以及下…

Git使用教程

Git项目的三个工作区域的概念&#xff1a; 1、Git仓库Git 仓库目录是 Git 用来保存项目的元数据和对象数据库的地方。 这是 Git 中最重要的部分&#xff0c;从其它计算机克隆仓库时&#xff0c;拷贝的就是这里的数据。 2、工作目录工作目录是对项目的某个版本独立提取出来的内容…

Ansible之 AWX 创建管理项目的一些笔记

写在前面 分享一些 AWX 创建管理项目的笔记博文内容涉及&#xff1a; 容器化 AWX 手工创建项目Demo通过 SCM 创建项目 Demo项目角色&#xff0c;更新策略介绍&#xff0c;SCM 凭据的创建 食用方式&#xff1a; 需要了解 Ansible理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐…

ssm项目改造spring boot项目

快速创建 Spring Boot 项目 添加依赖 如果是普通 Maven 项目&#xff0c;需要手动添加。 <!-- 打包方式 jar 包 --> <packaging>jar</packaging><!-- 指定父工程 --> <parent><groupId>org.springframework.boot</groupId><ar…

操作系统学习笔记(Ⅰ):概述

目录 1 操作系统概念 1.1 定义 1.2 功能 1.系统资源的管理者 2.用户和计算机硬件间接口 3.最接近硬件的层次 2 操作系统的特征 2.1 并发 2.2 共享 2.3 虚拟 2.4 异步 3 发展和分类 3.1 手工操作阶段 3.2 批处理阶段 1.单道批处理阶段 2.多道批处理系统 3.3 分…