华为商城主页（Web静态页面）

这是我的第一篇博客，主要分享一下期末大作业：华为商城主页，只涉及静态页面。

结构框架：

华为商城首页，根据每个部分的功能，可以将整个页面分为三部分：头部header、主内容区content、页脚footer。

header部分：可由上至下分为3块：新品推荐h-new、导航条h-nav、头部内容区h-content。

其页面内容代码如下：

<div id="header"><div id="h-new">…</div><div id="h-nav">…</div><div id="h-content">…</div>
</div>

content部分： 这部分内容比较繁多。由上到下总共可以分为18块：

.c-banner（广告条幅）
.c-nav（导航条）
.c-promo（促销）
. hots-goods（热销单品）
.recommend-goods（精品推荐）
.c-banner2（广告条幅2）
.phone-channel（手机专栏）
.computer-channel（笔记本专栏）
.panel-computer-channel（平板专栏）
.smartwatch-channel（智能穿戴）
.more-goods-channel（更多商品1）
.smarthome-channel（智能家居）
.more-goods-channel（更多商品2）
.hotparts-channel（热销配件）
.more-goods-channel（更多商品3）
.brandparts-channel（品牌配件）
.more-goods-channel（更多商品4）
.last-one（结尾）

其页面内容代码如下：

<div id="content "><div class="c-banner ">…</div><div class=" c-nav ">…</div><div class=" c-promo ">…</div><div class=" hots-goods ">…</div><div class=" recommend-goods ">…</div><div class=" c-banner2 ">…</div><div class=" phone-channel ">…</div><div class=" computer-channel ">…</div><div class=" panel-computer-channel ">…</div><div class=" smartwatch-channel ">…</div><div class=" more-goods-channel ">…</div><div class=" smarthome-channel ">…</div><div class=" more-goods-channel ">…</div><div class=" hotparts-channel ">…</div><div class=" more-goods-channel ">…</div><div class=" brandparts-channel ">…</div><div class=" more-goods-channel ">…</div><div class=" last-one ">…</div>
</div>

footer部分： 由上至下可以分为3块：标语f-slogan、服务f-service、f-container。

其页面内容代码如下：

<div id="footer"><div class="f-slogan">…</div><div class="f-service">…</div><div class="f-container">…</div>
</div>

效果图如下：

完整代码链接如下：
https://download.csdn.net/download/Brench/12504209

Web静态页面：华为商城主页相关推荐

html华为官网静态网页,Web静态页面：华为商城主页
华为商城主页(Web静态页面) 这是我的第一篇博客,主要分享一下期末大作业:华为商城主页,只涉及静态页面. 结构框架: 华为商城首页,根据每个部分的功能,可以将整个页面分为三部分: 头部header. ...
web 静态页面和动态页面的区别
文章目录一.静态web页面: 二.动态web页面: 为什么需要web服务器?(web server) 三.关于两者区别的简单直接的描述四.实验测试一.静态web页面: 1.在静态Web程序中,客 ...
写个厦门市健身徒步爬山线路的web静态页面
今年12月底,这个产品应该能进入一个差不多相对于初次开发阶段相对低需求的时间.所以明年1月份开始要复习下前端的基本知识,写一个静态web页面.尽可能详细记录下自己周末爬过的.观赏过的厦门景点,尽量详细 ...
web静态页面-MIUI米柚
效果图布局 <div id="box"><header><img src="./images/logo.png" >< ...
java web 静态_「Java Web」主页静态化的实现
一个站点的主页一般不会频繁变动,而大多数用户在訪问站点时不过浏览一下主页(未登陆).然后就离开了.对于这类訪问请求.假设每次都要通过查询数据库来显示主页的话,显然会给server带来多余的压力. 这时 ...
Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院
谷粒学院服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...
一些零碎知识（域名、DNS、浏览器、动态静态页面、web应用系统工作原理）
域名: http://localhost:8080/practice(胡写的,用于说明问题) http:表明当前请求是http协议,所有的Java Web应用程序都是基于HTTP协议,HTTP全称Hy ...
静态页面与动态页面的web访问
近期对web基础进行学习和整理一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(R ...
HTML5期末大作业——中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品
HTML5期末大作业--中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品常见 ...

Web静态页面：华为商城主页

华为商城主页（Web静态页面）

结构框架：

Web静态页面：华为商城主页相关推荐

最新文章

热门文章