web网页设计期末课程大作业——基于HTML仿唯品会电商项目的设计与实现

最新推荐文章于 2022-12-14 09:59:43 发布

m0_71154533

最新推荐文章于 2022-12-14 09:59:43 发布

阅读量823

点赞数 1

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_71154533/article/details/126316688

版权

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

一、网页介绍📖

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>
    
<head>
    <meta charset="utf-8">
    <title>唯品会（原Vipshop.com）特卖会：品牌特卖_确保正品_确保低价_货到付款</title>
    <!-- 公共的CSS -->
    <link rel="stylesheet" href="css/public.css">
    <!-- 引入网站头像 -->
    <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1653216524048/favicon.ico">

    <!-- 首页的CSS -->
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--nav  -->
    <link rel="stylesheet" href="css/nav.css">
    
    <!-- footer  -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    



</head>

<body>
    <!--nav start -->
    <div class="nav">
        <div class="h-top">
            <div class="h-top-center">
                <div class="area">
                    <div class="area-location">长沙市</div>
                    <div class="area-triangle"></div>

                    <div class="top_box">
                        <div>
                            <span>请选择你所在的收货地区<i>&#10006</i></span>
                            <ul>
                                <li class="current_ul">省份</li>
                                <li>地区</li>
                            </ul>
                            <section class="top_div">
                                <div class="top_one current_div">
                                    <ul>
                                        <li>北京市</li>
                                    </ul>
                                </div>
                                <div class="top_two">请先选择省份</div>
                            </section>
                        </div>
                    </div>
                </div>
                <div class="select fr">
                    <ul>
                        <li class="wp-login ">
                            <a href="javascript:;"><span>请登录</span></a>
                            <div class="login-hide">
                                <i class="nav-line"></i>
                                <div class="nav-top-pic">
                                    <span class="top-nav-pic-avater"></span>
                                    <div class="top-nav-pic-right"><a href="javascript:;">您好！ [请登录]</a></div>
                                    <p class="top-nav-list">
                                        <span><a href="">我的收藏</a></span>
                                        <span><a href="">我的订单</a></span>
                                        <span><a href="">零钱</a></span>
                                        <span><a href="">我的优惠券</a></span>
                                        <span><a href="">我的唯品币</a></span>
                                        <span><a href="">唯品金融</a></span>
                                    </p>
                                </div>
                            
                            </div>
                        </li>
                        <li class="wp-register">
                            <a href="javascript:;"><span>注册</span></a>
                        </li>
                        <li class="wp-signin">
                            <div class="icon-signin">
                            </div>
                            <a href="#"><span class="fr">签到有礼</span></a>
                        </li>
                        <li class="wp-order">
                            <a href="#"><span>我的订单</span></a>
                        </li>
                        <li class="wp-myfav">
                            <a href="#"><span style="margin-right: 4px;">我的特卖</span></a>
                            <div id="icon-myfav" class="fl">

                            </div>
                            <p>
                                <span><a href="">商品收藏</a></<

最低0.47元/天解锁文章

m0_71154533

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web网页设计期末课程大作业——基于HTML仿唯品会电商项目的设计与实现

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
复制链接

扫一扫