用Html、Css实现一个简易的易买网页面，可以互相跳转

最新推荐文章于 2022-12-30 21:08:38 发布

原创

最新推荐文章于 2022-12-30 21:08:38 发布 · 1.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #web

本文档展示了如何使用HTML和CSS技术创建一个简易的易买网页面模板。主要内容包括Product/list.html的设计，以及其他页面根据此模板进行的修改。重点在于样式文件Css/style.css的应用，用于实现页面样式的定义和交互效果。

Product/list.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品管理页面</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
	</head>
	<body>
		<!-- 此为整体的div container容器-->
		<div class="container">
			<!-- 此为头部的div -->
			<div class="header">
				<div class="logo_box">
					<img src="../../img/logo.jpg" width="80px" class="logo">
					<span>易买网后台数据管理系统</span>
				</div>
				<div class="logoout_box">
					<span>测试用户001</span>
					<a href="">退出登录</a>
				</div>
			</div>
			<!-- 此为中间的div -->
			<div class="middle">
				<!-- 此为中间的左边div -->
				<div class="middle_left">
					<!-- 用户信息的div -->
					<div class="user_info">
						<!-- 用户头像 -->
						<img src="../../img/user_head.jpg" class="user_head">
						<span>欢迎登录!管理员用户</span>
					</div>
					<!--  -->
					<div class="">
						<a href="../product/list.html" class="a_product">商品管理</a>
						<a href="../category/list.html" class="a_category">分类管理</a>
						<a href="../order/list.html" class="a_order">订单管理</a>
						<a href="../comment/list.html" class="a_comment">评论管理</a>
						<a href="../user/list.html" class="a_user">用户管理</a>
						<a href="../cart/list.html" class="a_cart">购物车管理</a>
					</div>
				</div>
				<!-- 此为中间的右边div -->
				<div class="middle_right">
					<!-- 此为右侧横幅 -->
					<div class="current_loc">
						当前位置-->商品管理页面
					</div>
					<!-- 此为右侧商品表格（数据表格） -->
					<div class="">
						<!-- 此为商品表格 -->
						<table class="table_style">
							
							<!-- 此为表头 -->
							<thead class="">
								<th>商品编号</th>
								<th>商品名称</th>
								<th>商品库存</th>
								<th>商品价格</th>
								<th>商品图片</th>
								<th>操作</th>
							</thead>
							<!-- 此为表格主体 -->
							<tbody>
								<tr>