HTML5响应式的商城积分应用系统基于html5的购物商城网站

转载

梦断蓝桥魂 2023-12-28 15:42:44

文章标签 HTML5响应式的商城积分应用系统 css html dreamweaver javascript 文章分类 HTML5 移动开发

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈

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（源文件）所需的知识点。

一、网页效果🌌

HTML5响应式的商城积分应用系统基于html5的购物商城网站_javascript

二、代码展示😈

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);
}