Skip to content

web_flea_market_moble
web_flea_market_moble
Unverified Commit f881b5b5 authored by pig40's avatar pig40 Committed by GitHub
Browse files
Options

跳蚤市场更新

parent 15907db0
Hide whitespace changes
Inline Side-by-side
Showing with 378 additions and 0 deletions
add_product.html 0 → 100644
View file @ f881b5b5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发布商品</title>
<link href="css/common.css" type="text/css" rel="stylesheet"/>
<link href="css/add_product.css" type="text/css" rel="stylesheet"/>
</head>
<style>
@font-face {
font-family: myFont;
src: url('img/STFANGSO.TTF');
}
</style>
<script>
var goods = {
name:"",
price:"",
information:"",
};
function upload() {
goods.name = document.getElementById("name").value;
goods.price = document.getElementById("price").value;
goods.information = document.getElementById("information").value;
if(goods.name == ""||goods.price == ""||goods.information == ""){
alert("商品信息不完整");
return;
}
console.log(goods);
}
</script>
<body>
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="search">
<form><input type="search" placeholder="搜索" autocapitalize="on" accesskey="g"></form>
</div>
</header>
<article class="add">
<form action="#" method="get">
<div>商品名称:
<input id="name" type="text" spellcheck="true" required/>
</div>
<div>商品价格:
<span contenteditable="true"></span>
<input id="price" type="text" required/>
</div>
<div>描述信息:
<textarea id="information" cols="50" rows="5" spellcheck="true" required></textarea>
</div>
<input type="submit" class="submit" value="发布商品" onclick="upload()"/>
</form>
</article>
<footer>
<ul>
<li><a class="active" href="index.html">首页</a></li>
<li><a href="add_product.html">商品管理</a></li>
<li><a href="product_list.html">商品列表</a></li>
<li><a href="">个人中心</a></li>
</ul>
<div style="height: 50px;" hidden="hidden"></div>
</footer>
</body>
</html>
\ No newline at end of file
css/add_product.css 0 → 100644
View file @ f881b5b5
article{
margin: 30px 10px 0;
}
.add div{
border: 1px solid gainsboro;
padding: 5%;
}
.add div:after{content: "*";}
.add input,textarea{
width: 60%;
border: 1px solid gainsboro;
}
.add input[type=submit]{
width: 100%;
height: 2.5em;
margin-top: 10px;
background: linear-gradient(to right,#333,#c40000,#333);
color: white;
}
textarea{
width: 100%;
}
css/common.css 0 → 100644
View file @ f881b5b5
body{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
img{max-width: 100%;}
header{
margin-top: 5px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.logo{
width: 50%;
}
.search{
width: 50%;
}
.search input{
width: 98%;
height: 30px;
text-align: center;
border: 1px solid gainsboro;
border-radius: 25px;
}
footer ul{
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
font-family: "myFont";
font-size: 1.125rem;
}
footer li{
width: 25%;
float: left;
text-align: center;
}
footer li a{
display: block;
padding: 12px 5px;
color: white;
}
footer li a.active{
background-color: rgb(196, 0, 0);
}
footer li a:active,
footer li a:link,
footer li a:visited{
color: white;
}
\ No newline at end of file
css/index.css 0 → 100644
View file @ f881b5b5
article{
margin: 20px 0 10px 0;
}
figure{
margin: 0 10px;
}
.list_group{
display: flex;
flex-wrap: wrap;
}
.list_group li{
box-sizing: border-box;
width: 47%;
margin: 2% 2% 0 2%;
text-align: center;
border: 1px solid gainsboro;
}
ul li:nth-child(even){
margin-left: 0%;
}
.list_group p{
text-shadow: 0px 0px 1px #c40000;
}
\ No newline at end of file
css/product_list.css 0 → 100644
View file @ f881b5b5
.list_side{
width: 96%;
margin: 0 auto;
}
.list_side li{
height: 2em;
text-align: center;
display: inline-block;
width: 24%;
}
.list_side li.active{
background-color: #fff;
border-bottom: 4px solid rgb(196, 0, 0);
color: rgb(196, 0, 0);
font-weight: bold;
}
\ No newline at end of file
img/02.jpg 0 → 100644
View file @ f881b5b5
img/02.jpg

2.06 KB

img/03.jpg 0 → 100644
View file @ f881b5b5
img/03.jpg

1.94 KB

img/04.jpg 0 → 100644
View file @ f881b5b5
img/04.jpg

1.98 KB

img/1.jpg 0 → 100644
View file @ f881b5b5
img/1.jpg

3.33 KB

img/1.mp4 0 → 100644
View file @ f881b5b5
File added
img/MENU.png 0 → 100644
View file @ f881b5b5
img/MENU.png

319 Bytes

img/tag.png 0 → 100644
View file @ f881b5b5
img/tag.png

346 Bytes

index.html 0 → 100644
View file @ f881b5b5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="search">
<form><input type="search" placeholder="搜索" autocapitalize="on" accesskey="g"></form>
</div>
</header>
<footer>
<ul>
<li><a class="active" href="index.html">首页</a></li>
<li><a href="add_product.html">商品管理</a></li>
<li><a href="product_list.html">商品列表</a></li>
<li><a href="">个人中心</a></li>
</ul>
<div style="height: 50px;" hidden="hidden"></div>
</footer>
<article>
<figure>
<img src="img/index.png"/>
<section>
<ul class="list_group">
<li>
<img src="img/goods1.png"/>
<p><a href="#">手机</a></p>
</li>
<li>
<img src="img/goods2.png"/>
<p><a href="#">吸尘器</a></p>
</li>
<li>
<img src="img/goods3.png"/>
<p><a href="#">手机</a></p>
</li>
<li>
<img src="img/goods4.png"/>
<p><a href="#">洗衣机</a></p>
</li>
<li>
<img src="img/goods7.png"/>
<p><a href="#">镜头</a></p>
</li>
<li>
<img src="img/goods8.png"/>
<p><a href="#">相机</a></p>
</li>
</ul>
</section>
</figure>
</article>
</body>
</html>
\ No newline at end of file
product_info.html 0 → 100644
View file @ f881b5b5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/common.css" type="text/css" rel="stylesheet"/>
<link href="css/index.css" type="text/css" rel="stylesheet"/>
<link href="css/product_list.css" type="text/css" rel="stylesheet"/>
<title></title>
<style>
@font-face {
font-family: myFont;
src: url('img/STFANGSO.TTF');
}
video{
width: 98%;
margin: 2px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="search">
<form><input type="search" placeholder="搜索" autocapitalize="on" accesskey="g"></form>
</div>
</header>
<video controls="controls" src="img/1.mp4"></video>
<footer>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="add_product.html">商品管理</a></li>
<li><a class="active" href="product_list.html">商品列表</a></li>
<li><a href="#">个人中心</a></li>
</ul>
<div style="height: 50px" hidden="hidden"></div>
</footer>
</body>
</html>
\ No newline at end of file
product_list.html 0 → 100644
View file @ f881b5b5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="device-width,initial-scale=1.0"/>
<link href="css/common.css"/ type="text/css" rel="stylesheet">
<link href="css/index.css"/ type="text/css" rel="stylesheet">
<link href="css/product_list.css" type="text/css" rel="stylesheet"/>
<title>跳蚤市场</title>
</head>
<style>
@font-face {
font-family: myFont;
src: url('img/STFANGSO.TTF');
}
</style>
<body>
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="search">
<form><input type="search" placeholder="搜索" autocapitalize="on" accesskey="g"></form>
</div>
</header>
<article>
<nav id="category">
<ul class="list_side">
<li class="active">手机</li>
<li>家电</li>
<li>相机</li>
<li>电脑</li>
</ul>
</nav>
</article>
<div id="products">
<ul class="list_group">
<li>
<img src="img/goods1.png"/>
<p><a href="#">华为p30</a></p>
</li>
<li>
<img src="img/goods1.png"/>
<p><a href="#">OPPO Reno</a></p>
</li>
<li>
<img src="img/goods1.png">
<p><a href="product_info.html">OPPO Reno</a></p>
</li>
<li>
<img src="img/goods1.png">
<p><a href="product_info.html">vivo X23</a></p>
</li>
<li>
<img src="img/goods1.png">
<p><a href="product_info.html">iPhone 8</a></p>
</li>
<li>
<img src="img/goods1.png">
<p><a href="product_info.html">vivo X23</a></p>
</li>
<li>
<img src="img/goods1.png">
<p><a href="product_info.html">iPhone 8</a></p>
</li>
</ul>
</div>
<hr>
<footer>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="add_product.html">商品管理</a></li>
<li><a class="active" href="product_list.html">商品列表</a></li>
<li><a href="#">个人中心</a></li>
</ul>
<div style="height: 50px" hidden="hidden"></div>
</footer>
</body>
</html>
\ No newline at end of file
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