Skip to content

web_flea_market
web_flea_market
Commit 4d139997 authored by HuangJunbo's avatar HuangJunbo 💻
Browse files
Options

优化样式 

Signed-off-by: HuangJunbo's avataruuo00_n <uuo00_n@outlook.com>
parent 9bcb4fd5
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 45 deletions
flea_market/product_detail.html
View file @ 4d139997
......@@ -7,9 +7,23 @@
<script src="js/jquery-3.5.1.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
#detail {
border: 2px solid red;
width: 55%;
}
img {
width: 100%;
}
video {
width: 60px;
height: 60px;
}
article {
margin-left: 400px;
margin-top: -500px;
margin-top: -520px;
}
footer {
......@@ -33,67 +47,73 @@
</style>
</head>
<body>
<header>
<div class="logo"><img src="img/logo.png"/></div>
<form class="searchform">
<input type="text" name="search" id="search">
<input type="submit" value="搜索" id="button">
<div class="logo"><img src="img/logo.png" alt=""></div>
<form class="searchform">
<input type="text" name="search" id="search">
<input type="submit" value="搜索" id="button">
</form>
<div class="navigation">
<form class="navigation">
<br>
<a href="#">手机</a>&nbsp;&nbsp;|&nbsp;
<a href="#">电脑</a>&nbsp;&nbsp;|&nbsp;
<a href="#">旧书</a>&nbsp;&nbsp;|&nbsp;
<a href="#">服装</a>
</form>
<div class="navigation">
<form class="navigation"><br>
<a href="#">手机</a>&nbsp;&nbsp;|&nbsp;
<a href="#">电脑</a>&nbsp;&nbsp;|&nbsp;
<a href="#">旧书</a>&nbsp;&nbsp;|&nbsp;
<a href="#">服装</a>
</form>
</div>
<nav class="op">
<div class="nav">
<img src="img/MENU.png" alt="">
<a href="#">商品分类</a>
</div>
<nav class="op">
<div class="nav">
<img src="img/tag.png"/>
<a href="#">商品分类</a>
</div>
<div class="tag">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">闲置数码</a></li>
<li><a href="#">教材书籍</a></li>
<li><a href="#">运动装备</a></li>
<li><a href="#">鞋服配饰</a></li>
<li><a href="#">日用家居</a></li>
</ul>
</div>
</nav>
</header>
<div class="tag">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">闲置数码</a></li>
<li><a href="#">教材书籍</a></li>
<li><a href="#">运动装备</a></li>
<li><a href="#">鞋服配饰</a></li>
<li><a href="#">日用家具</a></li>
</ul>
</div>
</nav>
<aside>
<ul>
<li><a href="edit_pwd.html">修改密码</a></li>
<li><a href="edit_contact.html">修改联系方式</a></li>
<li><a href="my_orders.html">我的订单</a></li>
<li><a href="my_product.html">我的商品</a></li>
<li><a href="purchase_history.html">消费记录</a></li>
<li><a href="putchase_history.html">消费记录</a></li>
</ul>
</aside>
<article>
<article><br>
<section id="detail">
<h3>商品信息</h3>
<img src="img/01.jpg" width="500" height="400">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<h1>iPad 4GB 16GB Wi-Fi版</h1>
<video controls="controls" width="640" height="360">
<source src="movie/1.mp4"></source>
</video>
<video src="视频文件路径" controls="controls"></video>
<video controls="controls" width="320" height="240">
<source src="img/1.mp4" type="video/ogg"/>
<source src="img/1.mp4" type="video/mp4"/>
</video>
<h1>ipad 4GB 16GB Wi-Fi版</h1>
现价：200元<br>
编号：33313993<br>
<a href="#">立即购买</a>
</section>
<section>
<h4>产品介绍</h4>
<p> 1、沿用风靡百年的经典全棉牛津纺面料，运用领先的液氨整理技术，面料的抗皱性能会更好。延续简约、舒适、健康的设计理念，特推出免烫，易打理的精细免烫牛津纺长袖衬衫系列<br>
2、正品，质量优良<br>
3、九成新
<h4>产生介绍</h4>
<p>1.沿用风靡百年的经典全棉牛津面料，运用领先的液氮整理技术，
面料的抗折皱性能会更好。延续健康的设计理念，推出免烫，
2.正品，质量优良
3.九成新
</p>
<video controls="controls" width="640" height="360">
<source src="img/1.mp4">
</video>
</section>
</article>
<footer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment