网页设计:易购商城前台页面

最新推荐文章于 2022-09-30 08:32:39 发布

烫卷毛的狗

最新推荐文章于 2022-09-30 08:32:39 发布

阅读量1.1k

点赞数 2

分类专栏：前台文章标签： HTML 页面设计

本文链接：https://blog.csdn.net/qq_40771616/article/details/100564951

版权

前台专栏收录该内容

0 篇文章 0 订阅

订阅专栏

最近在学习网页设计，也就是HTML语言，简单的编写了一个商城前台的页面，以下是代码：

main.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/main.css">
        <!-- 引入字体图片插件 -->
        <link rel="stylesheet" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <img src="img/logo.png" alt="易购商城后台管理">
            </div>
            <div class="title"><h1>易购商城后台管理系统</h1></div>
            <div class="user-info">
                <div class="user-wrap">					
                    <span id="account">管理员:softeem</span>
                    &nbsp;
                    <a class="exit" href="#">
                        注销
                    </a>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="left">	
                <ul class="menu">
                    <li>
                        <a href="#">商品管理</a>
                        <ul class="submenu">
                            <li><a href="">商品信息</a></li>
                            <li><a href="">商品分类</a></li>
                            <li><a href="">品牌管理</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">订单管理</a>
                        <ul class="submenu">
                            <li><a href="">订单列表</a></li>
                            <li><a href="">退货处理</a></li>
                            <li><a href="">销售统计</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">系统设置</a>
                        <ul class="submenu">
                            <li><a href="">管理员列表</a></li>
                            <li><a href="">修改密码</a></li>
                            <li><a href="">安全退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="link-nav">
                    <ul>
                        <li><a href="#">商品管理</a></li>
                        <li>商品信息</li>
                    </ul>
                </div>
                <!-- 搜索表单组 start -->
                <div class="form-wrap">
                    <div class="search-title">
                        <i class="fa fa-search"></i>
                        <span>商品搜索</span>
                    </div>
                    <!-- 搜索条件表单 -->
                    <form class="form-inline" action="">
                        <div class="input-group">
                            <i class="fa fa-list"></i>
                            <input class="form-control" type="text" placeholder="商品名">
                        </div>
                        <div class="input-group">
                            <i class="fa fa-battery"></i>
                            <input class="form-control" type="text" placeholder="商品品牌">
                        </div>
                        <div class="input-group">
                            <i class="fa fa-list"></i>
                            <select class="form-control" name="" id="">
                                <option value="">手机</option>
                                <option value="">电脑</option>
                                <option value="">家用电器</option>
                            </select>
                        </div>
                        <div class="input-group">
                            <i class="fa fa-star"></i>
                            <select class="form-control" name="" id="">
                                <option value="">上架</option>
                                <option value="">下架</option>
                            </select>
                        </div>

                        <button class="btn btn-primary">搜索</button>

                        <button class="btn btn-danger">重置</button>
                    </form>
                </div>
                <!-- 搜索表单组 end -->
                <!-- 按钮组 start -->
                <div class="btn-group">
                    <button class="btn btn-primary">添加商品</button>
                </div>
                <!-- 按钮组 end -->
                <!-- 数据列表 start -->
                <div class="data-wrap">
                    <table class="tab">
                        <tr>
                            <th>序号</th>
                            <th>图片</th>
                            <th>商品名</th>
                            <th>单价</th>
                            <th>库存</th>
                            <th>分类</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td><img class="goods-icon" src="img/img2.jpg" alt="米兔故事机"></td>
                            <td>米兔故事机</td>
                            <td>￥199</td>
                            <td>无限</td>
                            <td>家用电器</td>
                            <td>上架中</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">下架</button>
                            </td>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td><img class="goods-icon" src="img/img2.jpg" alt="米兔故事机"></td>
                            <td>米兔故事机</td>
                            <td>￥199</td>
                            <td>无限</td>
                            <td>家用电器</td>
                            <td>上架中</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">下架</button>
                            </td>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td><img class="goods-icon" src="img/img2.jpg" alt="米兔故事机"></td>
                            <td>米兔故事机</td>
                            <td>￥199</td>
                            <td>无限</td>
                            <td>家用电器</td>
                            <td>上架中</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">下架</button>
                            </td>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td><img class="goods-icon" src="img/img2.jpg" alt="米兔故事机"></td>
                            <td>米兔故事机</td>
                            <td>￥199</td>
                            <td>无限</td>
                            <td>家用电器</td>
                            <td>上架中</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">下架</button>
                            </td>
                        </tr>
                        <tr>
                            <td>001</td>
                            <td><img class="goods-icon" src="img/img2.jpg" alt="米兔故事机"></td>
                            <td>米兔故事机</td>
                            <td>￥199</td>
                            <td>无限</td>
                            <td>家用电器</td>
                            <td>上架中</td>
                            <td>
                                <button class="btn btn-primary btn-sm">编辑</button>
                                <button class="btn btn-danger btn-sm">下架</button>
                            </td>
                        </tr>
                    </table>
                    <!-- 分页组件start -->
                    <ul class="page text-center">
                        <li><a href="">&lt;&lt;</a></li>
                        <li><a href="">1</a></li>
                        <li><a class="active" href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">&gt;&gt;</a></li>
                    </ul>
                    <!-- 分页组件 end -->
                </div>
                <!-- 数据列表 end -->
            </div>
        </div>
    </body>
</html>

核心样式文件（main.css）

/*界面整体框架结构*/
body{
	background: #34495E;
}
div {
	box-sizing: border-box;
}

.header {
	position:relative;
	width:100%;
	height: 80px;
	background: #333;
}
.main {
	position: relative;
	width:100%;
	min-height: 600px;
}

.header,
.main {
	min-width: 1000px;
}

.left,
.right {
	position:absolute;
	top:0;
	min-height: 600px;
}
.left{
	left:0;
	width:20%;
}
.right{
	padding:5px;
	left:20%;
	right: 0;
	width:80%;
	background: #eee;
}

/*头部样式*/
.header > div {
	float:left;
	height: 100%;
}
.logo {
	width:20%;
}
.title {
	width:60%;
	text-align: center;
	line-height: 80px;
	color:#fff;
}
.user-info{
	width:20%;
}
.logo img{
	margin:9px auto;
	height: 62px;
	width: 172px;
}
.user-wrap{
	position: absolute;
	right: 20px;
	bottom: 20px;
}

#account,
.exit{
	font-size:12pt;
	color:#ddd;
}

.exit{
	text-decoration: none;
	color:#bbb;
}
.exit:hover{
	color:#f00;
}

/*左侧菜单*/
.left li a{
	display: block;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
	text-align: center;
}
/*设置一级菜单样式*/
.menu > li > a{
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	color:#ddd;
	background: #2c3e50;
}
.submenu > li > a{
	font-size:14px;
	color:#eee;
	background: #34495e;
	transition:all .8s;/*过渡*/
}
/*设置二级菜单项的底部边框（除最后一个元素外）*/
.submenu > li:not(:last-child) {
	border-bottom:1px solid rgba(255,255,255,.1);
}

.submenu > li > a:hover{
	color: #222;
	background: #ddd;
}

/*右侧内容*/
.link-nav>ul>li{
	display: inline-block;
	margin-left:5px;
	font-size: 14px;
}
.link-nav a{
	display: inline-block;
}
.link-nav>ul>li:not(:last-child)::after { 
	content: "   >";
}

.form-wrap,
.data-wrap{
	margin:10px;
	padding:10px;
	border:1px solid rgba(0,0,0,0.2);
	overflow: hidden;
}

.input-group{
	width:200px;
	height:30px;
	border:1px solid rgba(0,0,0,.5);
	background:#fff;
}

.input-group>i{
	float:left;
	width:28px;
	height:28px;
	text-align: center;
	line-height: 28px;
}
.form-control {
	float:left;
	padding:0 5px;
	height: 28px;
	width: 170px;
	border:0;
	box-sizing: border-box;
}
.form-wrap>form {margin-top:10px;}

.form-inline > div,
.btn{
	float:left;
	margin: 10px;
}

.btn{
	padding:0 20px;
	height:30px;
	background:#ddd;
	border:1px solid rgba(0,0,0,0.1);
	border-radius: 5px;/*圆角边框*/
}

.btn-primary{
	color:#eee;
	background: #3498db;
	border:1px solid #3498db;
}

.btn-danger{
	color:#eee;
	background: #e74c3c;
	border:1px solid #e74c3c;
}

.btn-primary:hover{
	background: #2980b9;
	border-color: #2980b9;
}
.btn-danger:hover{
	background: #c0392b;
	border-color: #c0392b;
}
/*数据列表样式*/
.data-wrap{
	clear:both;/*清除浮动*/
}

.tab {
	width:100%;
	border-collapse: collapse;
}

th {
	color:#eee;
	background: #34495E;
}

th,
td {
	padding:8px;
	text-align: center;
	/* border-bottom: 1px solid rgba(0,0,0,.5); */
	/* border: 1px solid rgba(0,0,0,.5); */
}

/*选中所有除了第一行外的tr的偶数行*/
.tab tr:not(:first-child):nth-child(2n){
	background: #ddd;
}
.tab tr:not(:first-child):hover{
	background: rgba(0,0,0,.3);
}
.goods-icon{
	margin:0 auto;
	width: 60px;
	height: 60px;
	border:1px solid rgba(0,0,0,.1);
}

.btn-sm{
	font-size: 12px;
	padding:0 10px;
}

.tab td:nth-child(8){
	display: flex;
	align-items: center;
	justify-content: center;
}

/*分页组件的样式*/
.page{
	margin-top:20px;
}
.page > li{
	display: inline-block;
	width:30px;
	height:30px;
	border-radius: 5px;
}
.page > li > a {
	display: block;
	text-align: center;
	line-height: 30px;
	color:#3498db;
	text-decoration: none;
	border: 1px solid #3498db;
}

.text-left{text-align: left;}
.text-right{text-align: right;}
.text-center{text-align: center;}

.active,
.page > li > a:hover{
	color:#eee !important;
	background:#3498db;
	border-color: #3498db;
}

重置样式文件（reset.css）

*{
	margin:0;
	padding:0;
}
a{
	font-size: 12px;
	text-decoration: 0;
	color:#222;
}
a,
input,
button,
select,
textarea{
	outline: none;
}
ul,ol,li{
	list-style: none;
}
h1,h2,h3,h4,h5,h6,b,strong{
	font-weight: 100;
}
img{
	display: block;
	border: 0;
}

效果图
在这里插入图片描述

烫卷毛的狗

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页设计:易购商城前台页面

最近在学习网页设计，也就是HTML语言，简单的编写了一个商城前台的页面，以下是代码：main.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="...
复制链接

扫一扫