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
Show 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 @@ ...@@ -7,9 +7,23 @@
<script src="js/jquery-3.5.1.js"></script> <script src="js/jquery-3.5.1.js"></script>
<script src="js/jquery-ui.min.js"></script> <script src="js/jquery-ui.min.js"></script>
<style> <style>
#detail {
border: 2px solid red;
width: 55%;
}
img {
width: 100%;
}
video {
width: 60px;
height: 60px;
}
article { article {
margin-left: 400px; margin-left: 400px;
margin-top: -500px; margin-top: -520px;
} }
footer { footer {
...@@ -33,23 +47,23 @@ ...@@ -33,23 +47,23 @@
</style> </style>
</head> </head>
<body> <body>
<header> <div class="logo"><img src="img/logo.png" alt=""></div>
<div class="logo"><img src="img/logo.png"/></div> <form class="searchform">
<form class="searchform">
<input type="text" name="search" id="search"> <input type="text" name="search" id="search">
<input type="submit" value="搜索" id="button"> <input type="submit" value="搜索" id="button">
</form> </form>
<div class="navigation"> <div class="navigation">
<form class="navigation"><br> <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>&nbsp;&nbsp;|&nbsp;
<a href="#">旧书</a>&nbsp;&nbsp;|&nbsp; <a href="#">旧书</a>&nbsp;&nbsp;|&nbsp;
<a href="#">服装</a> <a href="#">服装</a>
</form> </form>
</div> </div>
<nav class="op"> <nav class="op">
<div class="nav"> <div class="nav">
<img src="img/tag.png"/> <img src="img/MENU.png" alt="">
<a href="#">商品分类</a> <a href="#">商品分类</a>
</div> </div>
<div class="tag"> <div class="tag">
...@@ -59,41 +73,47 @@ ...@@ -59,41 +73,47 @@
<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>
<li><a href="#">日用家居</a></li> <li><a href="#">日用家具</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
</header>
<aside> <aside>
<ul> <ul>
<li><a href="edit_pwd.html">修改密码</a></li> <li><a href="edit_pwd.html">修改密码</a></li>
<li><a href="edit_contact.html">修改联系方式</a></li> <li><a href="edit_contact.html">修改联系方式</a></li>
<li><a href="my_orders.html">我的订单</a></li> <li><a href="my_orders.html">我的订单</a></li>
<li><a href="my_product.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> </ul>
</aside> </aside>
<article>
<article><br>
<section id="detail"> <section id="detail">
<h3>商品信息</h3> <h3>商品信息</h3>
<img src="img/01.jpg" width="500" height="400"> <img src="img/01.jpg" width="500" height="400">
<img src="img/02.jpg" alt=""> <video controls="controls" width="640" height="360">
<img src="img/03.jpg" alt=""> <source src="movie/1.mp4"></source>
<img src="img/04.jpg" alt=""> </video>
<h1>iPad 4GB 16GB Wi-Fi版</h1> <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> 现价：200元<br>
编号：33313993<br> 编号：33313993<br>
<a href="#">立即购买</a> <a href="#">立即购买</a>
</section>
<section>
<h4>产品介绍</h4> <h4>产生介绍</h4>
<p> 1、沿用风靡百年的经典全棉牛津纺面料，运用领先的液氨整理技术，面料的抗皱性能会更好。延续简约、舒适、健康的设计理念，特推出免烫，易打理的精细免烫牛津纺长袖衬衫系列<br> <p>1.沿用风靡百年的经典全棉牛津面料，运用领先的液氮整理技术，
2、正品，质量优良<br> 面料的抗折皱性能会更好。延续健康的设计理念，推出免烫，
3、九成新
2.正品，质量优良
3.九成新
</p> </p>
<video controls="controls" width="640" height="360">
<source src="img/1.mp4">
</video>
</section> </section>
</article> </article>
<footer> <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