大学生HTML网页设计期末大作业购物商城网站设计制作【496】

前言

​1.网页作品简介 ：网页包含8个网页， 首页、列表页、购物车、详情页、登录、注册页等，页面设计采用了目前主流购物网站的风格。网页布局整体为LOGO、导航、主体内容布局。（导航通过a超链接跳转各个页面）子页面多种布局，首页采用了上中下，图片混排，左右布局等相关布局方式。

2.网页作品编辑：网页设计作品均有源代码且原创, 轻设计 / 轻代码 / 慢生活的网页设计理念来完成网页的设计和制作，代码原创手写，干净简洁，全网唯一。作品下载后可使用任意HTML编辑软件(例如：DW、HBuilderVscode 、Sublime 所有编辑器均可使用)

3.网页作品技术方面：整个网页采用了html+div+css的知识点，应用了css的基本知识点鼠标经过及选中导航变色效果、下划线，li、p、span、img等相关知识点。 登录注册采用了from表单， 应用了文本框，密码框，按钮等。用js做了轮播图片。

作品展示

代码展示

<section class="shortcut">        <div class="w">            <ul class="fl">                <li>新星购物平台欢迎您! &nbsp;</li>                <li><a href="login.html">请登录&nbsp;</a> <a href="register.html" class="style_red">免费注册</a></li>            </ul>            <div class="fr">                <ul>                    <li>我的订单</li>                    <li></li>                    <li class="arrow_icomoon">我的新星购物平台</li>                    <li></li>                    <li>新星购物平台会员</li>                    <li></li>                    <li>企业采购</li>                    <li></li>                    <li class="arrow_icomoon">关注新星购物平台</li>                    <li></li>                    <li class="arrow_icomoon">客户服务</li>                    <li></li>                    <li class="arrow_icomoon">网站导航</li>                </ul>            </div>        </div>    </section>

.nav_center {    height: 465px;}​.nav_center .dd {    float: left;    padding: 10px 0px 0px 1px;    width: 210px;    height: 465px;    background-color: #c81623;}​.nav_center .dd ul {    margin-left: 1px;}.nav_center .dd ul li a:hover {    transition: all .5s;    padding-left: 15px;}.nav_center .dd ul li a {    display: inline-block;    width: 209px;    height: 33px;    font-size: 14px;    color: #ffffff;}​.nav_center .dd ul li a:hover {    background-color: #f7f7f7;    color: #c81623;}​.nav_center .banner {    float: left;    margin: 10px 9px 0;    width: 721px;    height: 455px;}​.nav_center .banner img {    width: 100%;}​.nav_center .dd ul li a::after {    float: right;    content: '\e920';    font-family: 'icomoon';    margin-right: 10px;}