制作一个企业网站——html华为官网购物商城项目的设计与实现

html网页制作

已于 2023-12-07 16:35:36 修改

阅读量114

点赞数

分类专栏：网页设计文章标签： html 前端 javascript

于 2022-08-06 08:45:39 首次发布

本文链接：https://blog.csdn.net/wx___BJ050106/article/details/126188757

版权

网页设计专栏收录该内容

685 篇文章 25 订阅

订阅专栏

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

--- @[TOC](文章目录🌰)

一、网页介绍📖

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 lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为-构筑万物互联的智能世界</title>
    
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/top-nav.css">
    <link rel="stylesheet" href="css/nav-con.css">
    <link rel="stylesheet" href="css/slideshow.css">
    <link rel="stylesheet" href="css/recommend.css">
    <link rel="stylesheet" href="css/img-show.css">
    <link rel="stylesheet" href="css/news-activity.css">
    <link rel="stylesheet" href="css/link-btn.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/corner.css">
    <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650896299792/font-awesome/css/all.css">
    <link rel="stylesheet" href="css/iconfont1.css">
    <script src="js/top-nav.js"></script>
</head>
<body>
    <!-- 上侧导航区域 -->
    <div class="top-nav">
        <!-- 最上面个导航栏 -->
        <div class="top-bar">
            <ul>
                <li class="login">
                    <a href="login.html">
                        <i class="fas fa-user"></i>
                        登录
                    </a>
                </li>
                <li class="pull">
                    <i class="fas fa-globe"></i>
                    <span>选择区域/语言</span>
                    <i class="fas fa-angle-down"></i>
                </li>
                <li class="pull">
                    <i class="fas fa-border-all"></i>
                    <span>集团网站</span>
                    <i class="fas fa-angle-down"></i>
                </li>
            </ul>
        </div>
        <!-- 集团网站下拉框 -->
        <div class="net">
                <ul class="brief">
                    <li class="title">
                        <i class="fas fa-chevron-right"></i>
                        <span>集团网站</span>
                    </li>
                    <li class="intro">
                        公司介绍、新闻动态、展会活动等信息
                    </li>
                </ul>
                <ul>
                    <li class="link">
                        <a href="javascript:;">
                            消费者业务网站
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="intro">
                        手机，PC和平板等智慧生活产品
                    </li>
                </ul>
                <ul>
                    <li class="link">
                        <a href="javascript:;">
                            企业业务网站
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="intro">
                        企业商用产品、解决方案和云服务
                    </li>
                </ul>
                <ul>
                    <li class="link">
                        <a href="javascript:;">
                            运营商网络业务网站
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="intro">
                        运营商网络解决方案、产品及服务
                    </li>
                </ul>
                <ul>
                    <li class="link">
                        <a href="javascript:;">
                            华为云网站
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="intro">
                        华为云服务及解决方案
                    </li>
                </ul>
        </div>
        <!-- 语言区域下拉框 -->
        <div class="region">
            <h3>选择地区/语言</h3>
            <ul class="first">
                <li>

                    <span>
                        Japan - 
                        <a href="javascript:;">日本語</a>
                    </span>
                </li>
                <li>
                    <span>
                        Myanmar - 
                        <a href="javascript:;">ျမန္မာ</a>
                    </span>
                </li>
                <li>
                    <span>
                        Spain - 
                        <a href="javascript:;">Español</a>
                    </span>
                </li>
                <li>
                    <span>
                        United Kingdom - 
                        <a href="javascript:;">English</a>
                    </span>
                </li>
                <li>
                    <span>
                        Global- 
                        <a href="javascript:;">English</a>
                    </span>
                </li>
            </ul>
            <ul>
                <li>
                    <span class="zhong">
                        <i class="fas fa-angle-right"></i>
                        China - 
                        <a href="javascript:;">简体中文</a>
                    </span>
                </li>
                <li>
                    <span>
                        Kazakstan - 
                        <a href="javascript:;">русский</a>
                    </span>
                </li>
                <li>
                    <span>
                        New Zealand - 
                        <a href="javascript:;">English</a>
                    </span>
                </li>
                <li>
                    <span>
                        Switzerland - 
                        <a href="javascript:;">English</a>
                    </span>
                </li>
                <li>
                    <span>
                        United States - 
                        <a href="javascript:;">English</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav-con">
        <div class="nav">
            <!-- 最左侧logo -->
            <a href="">
                <img src="picture/huawei_logo.png">
            </a>
            <!-- 中间选项卡 -->
            <ul class="center">
                <li class="product">
                    <span>个人及家庭产品</span>
                    <!-- 个人及家庭产品下拉框 -->
            
                <li>
                    <a href="javascript:;">隐私保护</a>
                </li>
                <li>
                    <a href="javascript:;">除名查询</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 流动客服及回到顶部 -->
    <div class="corner">
        <div class="to-serve">
            <i class="iconfont"></i>
        </div>
        <div class="to-top">
            <i class="fas fa-chevron-up"></i>
        </div>
    </div>
</body>
</html>

2.CSS样式代码 🏠

.news-activity{
    width: 85%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 60px;
}
.exhibition1{
    width: 31%;
    overflow: hidden;
    float: left;
    height: 435px;
}
.exhibition2{
    width: 31%;
    height: 435px;
    overflow: hidden;
    float: left;
    margin-left: 3.5%;
}
.exhi .tip{
    width: 92px;
    height: 32px;
    background: #999999;
    text-align: center;
    line-height: 32px;
}
.exhi .tip span{
    font-size: 14px;
    color: #fff;
}
.exhi img{
    width: 100%;
    height: 170px;
    transition: all 0.5s;
}
.exhi .message{
    width: 100%;
    background: #F8F8F7;
    margin-top: -5px;
    overflow: hidden;
    line-height: 2;
}
.message h3{
    margin-left: 25px;
    margin-top: 30px;
    color: #333333;
    font-size: 16px;
}
.message .location{
    margin-left: 25px;
    color: #333333;
    font-size: 14px;
    margin-right: 20px;
}
.location i{
    margin-right: 10px;
}
.message .date{
    color: #333333;
    font-size: 14px;
}
.date i{
    margin-right: 10px;
}
.message p{
    margin-left: 25px;
    margin-top: 20px;
    color: #333333;
    font-size: 14px;
    margin-bottom: 60px;
}
.exhi:hover img{
    transform: scale(1.03);
}
.exhi:hover .message{
    background: #F3F2F1;
}
.news-activity .news3{
    width: 31%;
    height: 432px;
    overflow: auto;
    float: right;
    background: #F8F8F7;
    position: relative;
}
.news3 .tip3{
    width: 65px;
    height: 32px;
    background: #999999;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 0;
}
.news3 ul{
    margin-top: 62px;
    margin-left: 30px;
    margin-right: 30px;
    line-height: 1.6;
}
.news3 ul li{
    margin-bottom: 30px;
}
.news3 ul li p{
    color: #333333;
    font-size: 16px;
    font-weight: bolder;
}
.news3 ul li span{
    color: #666666;
    font-size: 14px;
}
.news3 li a:hover p,
.news3 li a:hover span{
    color: #F70000;
}
.news3 .fog{
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    background: rgba(248, 248, 248, 0.9);
    box-shadow: 0 20px 20px 30px rgba(248, 248, 248, 0.9);
}
/* 设置滚动条样式 */
.news3::-webkit-scrollbar{
    width: 4px;
}
.news3::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.news3::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

三、个人总结😊

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

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

四、更多干货🚀

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

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

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

html网页制作

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
制作一个企业网站——html华为官网购物商城项目的设计与实现

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web.........
复制链接

扫一扫