HTML+CSS大作业：仿华为官网（5页）

奥利奥ala

于 2024-09-10 16:41:44 发布

阅读量1.7k

点赞数 23

分类专栏： html基础网页制作文章标签： html css 课程设计

本文链接：https://blog.csdn.net/weixin_53453950/article/details/142102535

版权

html作业基础水平制作，适用于初学者，页面排版干净，包含了表单表格超链接等基础知识，采用了html+css来实现布局，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计并将其转换为代码的过程来实践设计。

难度系数：★★★☆☆

一、网站题目

仿华为商城，参考华为商城，华为商城制作等等。

二、网站描述

本网站是参考华为商城制作的网站，网站内容分为五个板块，分别是主页手机，平板，手机详情页，购物车页、登录这五个页面，画面布局风格统一，最可见的就是导航栏，首页和平板页都有banner图。主要就是参考华为商城，结合自己改造来制作。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的布局结构。多采用div+css来实现布局

网站程序方面：采用html+css+js技术来实现网站，并且兼容市面主流浏览器，打开不会错位不会乱码。

网站素材方面：通过网络社交网站等搜集图片和文字，运用适当的处理方法来对素材进行处理。

网站文件方面：网站系统文件种类包含：css文件夹、js文件夹、images文件夹；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

四、网站效果

这里对网站五个界面做了截图展示

HTML+CSS网站分享：仿写华为商城

五、部分代码制作

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>华为官网</title>
  <link rel="stylesheet" href="style/style.css">
  <link rel="stylesheet" href="style/iconfont.css">
  <link href="style/swiper-3.4.2.min.css" rel="stylesheet">
  <l