HTML5期末大作业：服装购物商城网站设计——时尚服装购物商城(1页)
一、作品展示
二、文件目录
三、代码实现
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<script src="js/main.js"></script>
<title>Document</title>
</head>
<style>
.help-main p {
line-height: 50px;
}
</style>
<body >
<div class="top" id="item4">
<div class="container clearfix">
<ul class="clearfix fr">
<li><a href="join.html#tologin" >登录</a></li>
<li><a href="join.html#toregister" >注册</a></li>
<li><a href="member.html" style="border: none">个人中心</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="container clearfix">
<div class="logo fl">
<a href="index.html"><img src="images/logo4.png" alt=""/></a>
</div>
<div class="seacher fl">
<form action="" method="post">
<input type="text" placeholder="小伙伴，你想找什么?"/><input type="submit" value="搜 索"/>
</form>
<p>热门搜索：<a href="#">自行车</a> <a href="#">笔记本</a> <a href="#">散热器</a> <a href="#">考研资料</a> <a href="#">摩托车</a> <a href="#">手机</a> <a href="#">轮滑鞋</a> <a href="#">显示器</a> <a href="#">显示器</a> <a href="#">显示器</a> <a href="#">显示器</a></p>
</div>
<div class="mm fr clearfix">
<a href="list.html">我要买</a>
<a href="publish.html">我要卖</a>
</div>
</div>
</div>
<div class="help-wrap">
<div class="container clearfix">
<div class="bread">当前位置：
<a href="index.html">首页</a> >
<a href="member.html">个人中心</a> >
<a href="published.html">已发布</a>
</div>
<div class="help-l fl">
<div class="help-item">
<div class="help-item-title">个人中心
<a href="javascript:void(0)" class="abs"></a>
</div>
<div class="help-item-list">
<ul>
<li><a href="member.html">个人信息</a></li>
<li><a href="password.html">修改密码</a></li>
</ul>
</div>
</div>
<div class="help-item">
<div class="help-item-title">书籍管理
<a href="javascript:void(0)" class="abs"></a>
</div>
<div class="help-item-list">
<ul>
<li><a href="published.html">已发布</a></li>
<li><a href="bought.html">已买书籍</a></li>
<li><a href="publish.html">发布书籍</a></li>
</ul>
</div>
</div>
</div>
<div class="help-r fr">
<div class="help-item-title">已发布书籍</div>
<div class="help-main">
<div class="product-item clearfix">
<div class="name fl">
<span style="margin-left: 150px">书名</span>
</div>
<div class="attr fr">
<ul class="clearfix">
<li>价格</li>
<li>发布时间</li>
<li style="width: 110px">状态</li>
</ul>
</div>
</div>
<div class="pro">
<div class="product-attr">
<div class="product-name fl">
<div class="pic-thumb fl"><a href="detail.html" ><img class="middle" src="images/book.jpg"></a></div>
<div class="product-title fl">
<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
<span>传播学院</span>
<span>广告学</span>
<span>大三</span>
</div>
</div>
<div class="product-price fr">
<ul class="clearfix">
<li>¥150.00</li>
<li>2014-01-06</li>
<li class="edit" style="width: 110px">
<span>
<a href="edit.html">
<i class="icon-edit"></i>
<p>编辑</p>
</a>
</span>
<span class="line"></span>
<span>
<a href="#">
<i class="icon-trash"></i>
<p>删除</p>
</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="pro">
<div class="product-attr">
<div class="product-name fl">
<div class="pic-thumb fl"><a href="detail.html" ><img class="middle" src="images/book.jpg"></a></div>
<div class="product-title fl">
<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
<span>传播学院</span>
<span>广告学</span>
<span>大三</span>
</div>
</div>
<div class="product-price fr">
<ul class="clearfix">
<li>¥150.00</li>
<li>2014-01-06</li>
<li class="edit" style="width: 110px">
<span class="sell">已出售...</span>
</li>
</ul>
</div>
</div>
</div>
<div class="pro">
<div class="product-attr">
<div class="product-name fl">
<div class="pic-thumb fl"><a href="detail.html" ><img class="middle" src="images/book.jpg"></a></div>
<div class="product-title fl">
<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
<span>传播学院</span>
<span>广告学</span>
<span>大三</span>
</div>
</div>
<div class="product-price fr">
<ul class="clearfix">
<li>¥150.00</li>
<li>2014-01-06</li>
<li class="edit" style="width: 110px">
<span>
<a href="edit.html">
<i class="icon-edit"></i>
<p>编辑</p>
</a>
</span>
<span class="line"></span>
<span>
<a href="#">
<i class="icon-trash"></i>
<p>删除</p>
</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="pro">
<div class="product-attr">
<div class="product-name fl">
<div class="pic-thumb fl"><a href="detail.html" ><img class="middle" src="images/book.jpg"></a></div>
<div class="product-title fl">
<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
<span>传播学院</span>
<span>广告学</span>
<span>大三</span>
</div>
</div>
<div class="product-price fr">
<ul class="clearfix">
<li>¥150.00</li>
<li>2014-01-06</li>
<li class="edit" style="width: 110px">
<span class="sell">已出售...</span>
</li>
</ul>
</div>
</div>
</div>
<div class="pro">
<div class="product-attr">
<div class="product-name fl">
<div class="pic-thumb fl"><a href="detail.html" ><img class="middle" src="images/book.jpg"></a></div>
<div class="product-title fl">
<a href="detail.html" class="ellipsis">福尔摩斯探案全集</a><br>
<span>传播学院</span>
<span>广告学</span>
<span>大三</span>
</div>
</div>
<div class="product-price fr">
<ul class="clearfix">
<li>¥150.00</li>
<li>2014-01-06</li>
<li class="edit" style="width: 110px">
<span>
<a href="edit.html">
<i class="icon-edit"></i>
<p>编辑</p>
</a>
</span>
<span class="line"></span>
<span>
<a href="#">
<i class="icon-trash"></i>
<p>删除</p>
</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="page clearfix">
<a href="#">首页</a>
<a href="#">上一页</a>
<a class="bg-blue" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">下一页</a>
<a href="#">尾页</a>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="container">
<div class="zhinan">
<ul class="clearfix">
<li class="item-li">关于我们
<ul>
<li><a href="help.html">自我介绍</a></li>
<li><a href="help.html">联系我们</a></li>
<li><a href="help.html">网站公告</a></li>
</ul>
</li>
<li class="item-li">新手指南
<ul>
<li><a href="help.html">如何买书</a></li>
<li><a href="help.html">如何卖书</a></li>
<li><a href="help.html">修改密码</a></li>
</ul>
</li>
<li class="item-li">配送方式
<ul>
<li><a href="help.html">配送范围</a></li>
<li><a href="help.html">配送时间</a></li>
</ul>
</li>
<li class="item-li">售后服务
<ul>
<li><a href="help.html">退款申请</a></li>
<li><a href="help.html">退换货处理</a></li>
<li><a href="help.html">退换货政策</a></li>
</ul>
</li>
</ul>
</div>
<div class="line"></div>
<div class="bottom">
<p>友情链接：<a href="#">安工在线</a> <a href="#">万林强-前端在线简历</a></p>
<p>本站所有信息均为用户自由发布，本站不对信息的真实性负任何责任，交易时请注意识别信息的真假如有网站内容侵害了您的权益请联系我们删除，举报电话：15068718875</p>
<p>技术支持：万林强 商务QQ:584845663 邮箱：584845663@qq.com</p>
</div>
</div>
</div>
</body>
</html>
四、学习资料
~ 关注我，点赞博文~ 每天带你涨知识!
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
