<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品索引</title>
<style type="text/css">
*{padding: 0;margin: 0;}
header,nav{width: 500px;margin: 5px auto 5px;border: 1px solid #555;background: #999;font-family: "微软雅黑";color: white;height: 50px;line-height: 55px;}
header h2{text-align: center;}
ul li{list-style: none;float: left;padding-left: 80px;}
ul li a{text-decoration: none;}
main{width: 500px;border: 1px solid #555;background: #999;margin-left:510px;}
main h4{text-align: center;}
.activeNav{color: blue;}
footer{text-align: center;border: 1px solid #555;background: #999;width: 480px;height:20px; margin-left: 510px;margin-top: 5px;padding: 20px 10px;}
</style>
</head>
<body>
<header>
<h2>商品索引</h2>
</header>
<nav>
<ul>
<li class="activeNav"><a href="#">服饰</a></li>
<li><a href="#">书籍</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">食品</a></li>
</ul>
</nav>
<main>
<!-- 一-->
<form oninput="c.value=parseInt(a.value)-parseInt(b.value)" class="formActive">
<h4>服饰</h4>
原价：0 <input type="range" id="a" value="50" max="1000"/>1000元
<br/>折扣：<input type="number" id="b" value="20"/>元
<br/>现价：<output name="c" for="a b"></output>元
<br/>类别：<input list="bowsers" name="bowsers"/>
<datalist id="bowsers">
<option value="衣服"></option>
<option value="鞋子"></option>
<option value="包包"></option>
<option value="口红"></option>
</datalist>
<input type="submit" name="" id="" value="提交查找"/>
</form>
<!--二-->
<form oninput="c.value=parseInt(a.value)-parseInt(b.value)" >
<h4>书籍</h4>
原价：0 <input type="range" id="a" value="50" max="1000"/>1000元
<br/>折扣：<input type="number" id="b" value="20"/>元
<br/>现价：<output name="c" for="a b"></output>元
<br/>类别：<input list="bowsers" name="bowsers"/>
<datalist id="bowsers">
<option value="漫画"></option>
<option value="小说"></option>
<option value="动画"></option>
<option value="散文"></option>
</datalist>
<input type="submit" name="" id="" value="提交查找"/>
</form>
<!--三-->
<form oninput="c.value=parseInt(a.value)-parseInt(b.value)" >
<h4>手机</h4>
原价：0 <input type="range" id="a" value="50" max="1000"/>1000元
<br/>折扣：<input type="number" id="b" value="20"/>元
<br/>现价：<output name="c" for="a b"></output>元
<br/>类别：<input list="bowsers" name="bowsers"/>
<datalist id="bowsers">
<option value="华为"></option>
<option value="OPPO"></option>
<option value="VIVO"></option>
<option value="小米"></option>
</datalist>
<input type="submit" name="" id="" value="提交查找"/>
</form>
<!--四-->
<form oninput="c.value=parseInt(a.value)-parseInt(b.value)" >
<h4>食品</h4>
原价：0 <input type="range" id="a" value="50" max="1000"/>1000元
<br/>折扣：<input type="number" id="b" value="20"/>元
<br/>现价：<output name="c" for="a b"></output>元
<br/>类别：<input list="bowsers" name="bowsers"/>
<datalist id="bowsers">
<option value="米饭"></option>
<option value="面条"></option>
<option value="饺子"></option>
<option value="混沌"></option>
</datalist>
<input type="submit" name="" id="" value="提交查找"/>
</form>
</main>
<footer>版权所有：格莱科技</footer>
</body>
</html>
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
