- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）

IT司马青衫发表于 2022/08/11 10:45:17 2022/08/11

【摘要】 HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】@TOC...

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

@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="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="布卡漫画,专注各种动漫资讯,漫画更新速度快!">
    <meta name="keywords" content="动漫资讯,漫画,动漫更新,电子书">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/module.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>布卡漫画-首页</title>
</head>
<body>
<!--头部部分logo开始-->
<div class="top">
    <div class="w top_logo">
        <h1><a href="#" title="布卡漫画">布卡漫画</a></h1>
    </div>
</div>
<!--头部部分logo结束-->
<!--头部导航栏部分开始-->
<div class="top_nav w">
    <div class="nav">
        <ul class="fl">
            <li><a href="#">首页</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">用户中心</a></li>
            <li><a href="#">充值中心</a></li>
            <li><a href="#">客服中心</a></li>
        </ul>
    </div>
    <div class="search fr">
        <div class="search_box fl">
            <button class="btn"></button>
            <input type="text" placeholder="请输入漫画名/作者">
        </div>
        <div class="mail fr" title="布卡投稿平台">
            <span><img src="../img/mail.png" alt=""></span>
            我要投稿
        </div>
    </div>
</div>
<!--头部导航栏部分结束-->

<!--中部部分开始-->
<div class="middle w clearfix">
    <!--中部左侧开始-->
    <div class="middle_left fl">
        <!--中部轮播图部分开始-->
        <div class="banner">
            <ul class="ul_img">
                <li><img src="../img/carousel.jpg" alt=""></li>
                <li><img src="../img/carousel1.jpg" alt=""></li>
                <li><img src="../img/carousel2.jpg" alt=""></li>
                <li><img src="../img/carousel.jpg" alt=""></li>
            </ul>
            <ul class="ul_dot">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!--中部轮播图部分结束-->
        <!--游戏中心部分开始-->
        <div class="game_show clearfix">
            <div class="game_title"><h3>游戏中心</h3></div>
            <div class="game_prod">
                <ul>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/lhsl_199x259.jpg" alt=""></a>
                        <p><a href="#">灵魂撕裂</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <!--游戏中心部分结束-->
        <!--最近更新部分开始-->
        <div class="update clearfix">
            <div class="update_title clearfix">
                <h3 class="fl">最近更新</h3>
                <a href="#" class="fr">更多</a>
            </div>
            <div class="update_prod">
                <ul>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                    <li>
                        <a href="#"><img src="../img/32x(1).jpg" alt=""></a>
                        <p><a href="#">时雨</a></p>
                        <p class="text"><a href="#">睡筝娘</a></p>
                        <p class="text"><a href="#">最后更新:第1话</a></p>
                    </li>
                </ul>
            </div>
        </div>
        <!--最近更新部分结束-->
    </div>
    <!--中部左侧结束-->


    <!--中部右侧开始-->
    <div class="middle_right fr">
        <h3>游戏中心</h3>
        <ul>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
            <li>
                <a href="#"><img src="../img/20170111150925_5875d999b41c9.jpg" alt=""></a>
                <p class="text"><a href="#">崩坏学园2</a></p>
            </li>
        </ul>
    </div>
    <!--中部右侧结束-->
</div>
<!--中部部分结束-->

<!--底部部分开始-->
<div class="bottom w">
    <ul >
        <li class="address">
            <span class="fl"><img src="../img/addr.png"></span>
            <div class="address_text fl">
                <p>珠海布卡科技有限公司</p>
                <p>地址: 珠海市香洲区夏美路161号(南厦丰泽园)2栋二层商铺234C</p>
            </div>
        </li>
        <li class="email">
            <span class="fl"><img src="../img/email.png"></span>
            <div class="info_text fl">
                <p>客服: <a href="#">services@buka.cn</a></p>
                <p>投稿: <a href="#">td.sosobook.cn</a></p>
                <p>合作: <a href="#">bd@buka.cn</a></p>
            </div>
        </li>
        <li class="phone">
            <span class="fl"><img src="../img/phone.png"></span>
            <div class="info_text fl">
                <p>电话:</p>
                <p>0756-3360306</p>
            </div>
        </li>
        <li class="ICP">
            <span  class="fl">
                <img src="../img/global.png">
                <img src="../img/wenwangwenicon.png">
            </span>
            <div class="info_text fl">
                <p>ICP备案号:粤ICP备15028491号-1</p>
                <p>网络文化经营许可证:粤网文[2015]2094-438号</p>
            </div>
        </li>
        <li class="tip">
            <img src="../img/bkn.png">
            <img src="../img/tip.png">
        </li>
    </ul>
</div>
<!--底部部分结束-->
</body>
</html>

2.CSS样式代码 🏠

/*头部导航样式设置*/
.top_nav ul li:nth-child(1) {
    background-color: #f8b62d;
    /*color: #fff;*/
}
.top_nav ul li:first-child a{
    color: #fff;
}

/*中部左侧样式开始*/
.middle_left {
    width: 880px;
}

/*中部轮播图样式开始*/
.banner {
    width: 880px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.banner .ul_img {
    width: 400%;
}
.banner .ul_img li{
    float: left;
}
.banner .ul_dot {
    position: absolute;
    right: 20px;
    bottom: 10px;
}
.banner .ul_dot li {
    float: left;
    margin: 0 5px;
    width: 20px;
    height: 19px;
    background: url("../img/newicon_20160225.png") no-repeat -66px -264px;
}
.banner .ul_dot li:nth-child(1):hover{
    background-position: -66px -282px;
}
.banner .ul_dot li:nth-child(2){
    background-position: -44px -264px;
}
.banner .ul_dot li:nth-child(2):hover{
    background-position: -44px -282px;
}
.banner .ul_dot li:nth-child(3){
    background-position: 0px -264px;
}
.banner .ul_dot li:nth-child(3):hover{
    background-position: 0px -282px;
}
.banner .ul_dot li:nth-child(4){
    background-position: -22px -264px;
}
.banner .ul_dot li:nth-child(4):hover {
    background-position: -22px -282px;
}
/*中部轮播图样式结束*/

/*游戏中心部分样式开始*/
.game_show {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.game_title {
    height: 47px;
}
.game_title h3 {
    margin-left: 18px;
    line-height: 50px;
}
.game_prod ul li {
    float: left;
    margin: 0 17px 25px;
    font-size: 14px;
}
.game_prod ul li:hover img {
    opacity: 0.9;
}
.game_prod ul li img {
    width: 185px;
    height: 245px;
    margin-bottom: 12px;
    background-color: #000;
}
/*游戏中心部分样式结束*/

/*最近更新部分样式开始*/
.update {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.update_show {
    width: 880px;
    margin-top: 24px;
    background-color: #fff;
}
.update_title {
    height: 66px;
}
.update_title h3 {
    margin-left: 18px;
    line-height: 66px;
}
.update_title a {
    right: 10px;
    margin-top: 26px;
    margin-right: 20px;
    color: #afafaf;
    box-sizing: border-box;
}
.update_prod ul li {
    float: left;
    margin: 0 12px 25px 17px;
    font-size: 14px;
}
.update_prod ul li .text {
    font-size: 12px;
    color: #9a9a9a;
    margin-top: 15px;
}
.update_prod ul li img {
    width: 117px;
    height: 178px;
    margin-bottom: 12px;
}
/*最近更新部分样式结束*/
/*中部左侧样式结束*/

/*中部右侧样式开始*/
.middle_right {
    width: 240px;
    background-color: #fff;
}
.middle_right h3 {
    height: 44px;
    line-height: 44px;
    padding-left: 14px;
}
.middle_right ul li {
    margin-bottom: 16px;
}
.middle_right ul li img {
    width: 240px;
    height: 112px;
    margin-bottom: 12px;
}
.middle_right ul li .text {
    padding-left: 14px;
}
/*中部右侧样式结束*/

三、个人总结😊

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

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

四、更多干货🚀

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

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

3.以上内容技术相关问题😈欢迎一起交流学习🔥!

💂【获取方式】

gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML代码结构 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

HTML5期末大作业：商城网站设计——仿天猫在线商城（HTML和CSS实现天猫在线商城网站）

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML代码结构 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

💂【获取方式】

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品