Muke电商网站开发1 -项目搭建

最新推荐文章于 2024-11-09 17:11:29 发布

后海 0_o

最新推荐文章于 2024-11-09 17:11:29 发布

阅读量192

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/weixin_45137565/article/details/117331508

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、页面展示

在这里插入图片描述

二、页面展示

在这里插入图片描述
css - base css样式
css - common 公共样式
css - index 根目录HTML样式

img 下拉箭头(默认样式 + 悬停样式)

js - jquery jq内容(暂未用)

三、基础代码

1、index.html

<!DOCTYPE html>
<!-- 使用简体中文 -->
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>MuShop</title>
    <!-- css也可以在body中引用,但会在DOM加载完毕后执行 -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 导航 - 站点导航开始 -->
    <div class="nav-site">
        <!-- 水平居中容器 -->
        <div class="container">

            <!-- 左侧水平导航列表 -->
            <ul class="fl">
                <li class="fl">
                    <!-- <li class="nav-site-login fl"> -->
                    <a href="#" class="nav-site-login">嘿~ 请登录</a>
                </li>
                <li class="fl">
                    <!-- <li class="nav-site-signup fl"> -->
                    <a href="#" class="nav-site-signup link">免费注册</a>
                </li>
                <li class="fl">
                    <!-- <li class="nav-site-mobile fl"> -->
                    <a href="#" class="nav-site-mobile link">手机逛慕掏</a>
                </li>
            </ul>

            <!-- 右侧水平导航列表 -->
            <ul class="fr">

                <!-- 我的慕课 -->
                <li class="dropdown fl">
                    <a class="dropdown-toggle link" href="#" target="_blank">
                        我的慕课
                        <!-- 下拉icon -->
                        <i class="dropdown-arrow"></i>
                    </a>
                    <!-- 下拉菜单(默认隐藏) -->
                    <ul class="dropdown-layer">
                        <li><a class="dropdown-item" href="#" target="_blank">已买到的宝贝</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">我的足迹</a></li>
                    </ul>
                </li>

                <!-- 收藏夹 -->
                <li class="dropdown fl">
                    <a class="dropdown-toggle link" href="#" target="_blank">
                        收藏夹
                        <!-- 下拉icon -->
                        <i class="dropdown-arrow"></i>
                    </a>
                    <!-- 下拉菜单(默认隐藏) -->
                    <ul class="dropdown-layer">
                        <li><a class="dropdown-item" href="#" target="_blank">收藏的宝贝</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">收藏的店铺</a></li>
                    </ul>
                </li>

                <!-- 商品分类 -->
                <li class="fl">
                    <!-- <a class="nav-site-category link" href="#" target="_blank"> -->
                    <a class="dropdown-toggle link" href="#" target="_blank">
                        商品分类
                    </a>
                </li>

                <!-- 卖家中心 -->
                <li class="dropdown fl">
                    <a class="dropdown-toggle link" href="#" target="_blank">
                        卖家中心
                        <!-- 下拉icon -->
                        <i class="dropdown-arrow"></i>
                    </a>
                    <!-- 下拉菜单(默认隐藏) -->
                    <ul class="dropdown-layer">
                        <!-- <li class="dropdown-loading"></li> -->
                        <li><a class="dropdown-item" href="#" target="_blank">免费开店</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">已卖出的宝贝</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">出售中的宝贝</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">卖家服务市场</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">卖家培训中心</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">体验中心</a></li>
                    </ul>
                </li>

                <!-- 联系客服 -->
                <li class="dropdown fl">
                    <a class="dropdown-toggle link" href="#" target="_blank">
                        联系客服
                        <!-- 下拉icon -->
                        <i class="dropdown-arrow"></i>
                    </a>
                    <!-- 下拉菜单(默认隐藏) -->
                    <ul class="dropdown-layer">
                        <li><a class="dropdown-item" href="#" target="_blank">买家客服</a></li>
                        <li><a class="dropdown-item" href="#" target="_blank">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 导航 - 站点导航结束 -->


    <!-- 引入 cdnJs 的 jQuery -->
    <!-- 优点：减少服务器压力、速度快、可缓存, 缺点：依赖性高 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> -->

    <script>
        // 判断cdnJs是否被引入,如果没有就使用本地jQuery
        // <\/script>的意义是 < /script > 标签会打断外层 script 标签, 需要做一下转译
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>

    <!-- js也可在head中引用,但需要将js执行完毕,才能向后执行,可能造成代码阻塞 -->
    <script src="js/index.js"></script>
</body>

</html>

2、css - base

/*css reset*/
	/*清除内外边距*/
	body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
	ul, ol, li, dl, dt, dd, /*列表元素*/
	form, fieldset, legend, input, button, select, textarea, /*表单元素*/
	th, td, /*表格元素*/
	pre {
		padding: 0;
		margin: 0;
	}

	/*重置默认样式*/
	body, button, input, select, textarea {
		/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
		color: #333;
		font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size: 100%;
		font-weight: normal;
	}
	em, i {
		font-style: normal;
	}

	a {
		text-decoration: none;
	}
	li {
		list-style-type: none;
		vertical-align: top;
	}
	img {
		border: none;
		/*display: block;*/
		vertical-align: top;
	}
	textarea {
		overflow: auto;
		resize: none;
	}
	table {
		border-spacing: 0;
		border-collapse: collapse;
	}

3、css - common

/*公共样式*/

/*水平居中*/
.container {
	width: 1200px;
	margin: 0 auto;
}

/* 左浮动 */
.fl {
    float: left;
    display: inline;
}

/* 右浮动 */
.fr {
    float: right;
    display: inline;
}

/*链接正常颜色*/
a.link {
	color: #4d555d;
}

/*链接经过颜色*/
a.link:hover {
	color: #f01414 !important;
}
	


/* .cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
} */

4、css - index

/*nav-site*/


/* 导航 - 站点导航 */
.nav-site {
	width: 100%;
	background-color: #f3f5f7;
	border-bottom: 1px solid #cdd0d4;
}

/* 站点导航内容块整体设置 */
.container {
	margin: 0 auto;
	width: 1200px;
	height: 44px;
	line-height: 44px;
}

/* 左侧水平导航 */
/* 站点导航“亲，请登陆”设置 */
.nav-site-login {
	margin-left: 30px;
	color: #f01414;
}

/* 站点导航“注册和手机逛慕掏”设置 */
.nav-site-signup,
.nav-site-mobile {
	margin-left: 20px;
}

/* 右侧水平菜单 */
.dropdown-toggle {
	position: relative;
	z-index: 2;
	display: block;
	height: 100%;
	padding: 0 16px 0 12px;
	border-left: 1px solid #f3f5f7;
	border-right: 1px solid #f3f5f7;
}

/* 右侧水平菜单 - 下拉图标 */
.dropdown-arrow {
	display: inline-block;
	width: 8px;
	height: 6px;
	background: url(../img/dropdown-arrow.png) no-repeat;
	margin-left: 8px;
	vertical-align: middle;
}

/* 右侧水平菜单 - 下拉菜单 */
.dropdown-layer {
	display: none;
	z-index: 1;
	position: absolute;
	top: 43px;
	background-color: #fff;
	border: 1px solid #cdd0d4;
}

/* 右侧水平菜单 - 下拉菜单 - 元素 */
.dropdown-item {
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 12px;
	color: #4d555d;
	white-space: nowrap;
}
.dropdown-item:hover {
	background-color: #f3f5f7;
}

/* 悬停显示下拉弹窗 */
.dropdown:hover .dropdown-toggle {
	background-color: #fff;
	border-color: #cdd0d4;
}
/* 悬停下拉图标变红(换图片) */
.dropdown:hover .dropdown-arrow {
	background-image: url(../img/dropdown-arrow-active.png);
}
/* 悬停显示下拉弹窗 */
.dropdown:hover .dropdown-layer {
	display: block;
}

5、js - index(空)

6、js - jquery

/*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */
...