<!DOCTYPE html>
<html>
<head>
<title>css-training</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" >
</head>
<body>
<header>
<img class="logo" alt="logo" src="img/logo.png">
<div class="top-nav">
<ul>
<li class="float-li li-rightb"><a id="main-page" href="#tag-hot"> 造型百货 </a></li>
<li class="float-li li-rightb"><a target="_blank" href="#forum"> 讨论区 </a></li>
<li class="float-li" id="disp-list"><a href="#"> TEST </a>
<ul id="li-list">
<li><a href="#" target="_blank">AAA</a></li>
<li><a href="#" target="_blank">BBB</a></li>
<li><a href="#" target="_blank">CCC</a></li>
</ul>
</li>
</ul>
</div>
</header>
<div class="main-shop">
<div class="left-preview">
<span>冒险者小屋</span>
<img alt="佐助" src="img/left.jpg">
<span>Welcome ~ </span>
</div>
<div class="right-box">
<div id="tag-hot">
<br />
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>原谅帽</span>
<hr /><br />
<span class='detail-info'>当然是选择原谅他(她)啦 ~ </span>
</div>
<img class="content-img" alt="商品图片" src="img/green_hat.png">
<div class="content-info">
<span class="content-name">原谅帽</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥99.99</span>
<span class='content-priceo'>￥199.99</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>女巫帽</span>
<hr /><br />
<span class='detail-info'>恶毒的女巫留下的帽子</span>
</div>
<img class="content-img" alt="商品图片" src="img/witch_hat.png">
<div class="content-info">
<span class="content-name">女巫帽</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥77.77</span>
<span class='content-priceo'>￥123.45</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>食铁兽</span>
<hr /><br />
<span class='detail-info'>当年黄帝大战蚩尤时，蚩尤的坐骑。</span>
</div>
<img class="content-img" alt="商品图片" src="img/panda.png">
<div class="content-info">
<span class="content-name">食铁兽</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥0.01</span>
<span class='content-priceo'>￥9.99</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>绿蛇蛇</span>
<hr /><br />
<span class='detail-info'>史前生物，超级凶猛！</span>
</div>
<img class="content-img" alt="商品图片" src="img/green_snake.png">
<div class="content-info">
<span class="content-name">绿蛇蛇</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥99999</span>
<span class='content-priceo'>￥100000</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
</div>
<div id="tag-model">
<br />
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>侦探帽</span>
<hr /><br />
<span class='detail-info'>戴上这顶帽子，你就是福尔摩斯！</span>
</div>
<img class="content-img" alt="商品图片" src="img/detective_hat.png">
<div class="content-info">
<span class="content-name">侦探帽</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥79.99</span>
<span class='content-priceo'>￥149.99</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>背心</span>
<hr /><br />
<span class='detail-info'>当年火云邪神的同款背心</span>
</div>
<img class="content-img" alt="商品图片" src="img/vest.png">
<div class="content-info">
<span class="content-name">背心</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥9.99<sup>包邮</sup></span>
<span class='content-priceo'>￥99.99</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
</div>
<div id="tag-decoration">
<br />
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>钻戒</span>
<hr /><br />
<span class='detail-info'>哄女朋友的必备神器，只要998，给你送到家。</span>
</div>
<img class="content-img" alt="商品图片" src="img/diamond_ring.png">
<div class="content-info">
<span class="content-name">钻戒</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥998.00</span>
<span class='content-priceo'>￥9999.99</span>
</p>
<div class="content-btn">
<button class="preview-now">试用</button>
<button class="buy-now">购买</button>
</div>
</div>
</div>
</div>
<div id="tag-pet">
<br />
<div class="all-content">
<div class='content-detail'>
<span class='detail-name'>招财猫</span>
<hr /><br />
<span class='detail-info'>招财进宝</span>
</div>
<img class="content-img" alt="商品图片" src="img/cat.png">
<div class="content-info">
<span class="content-name">招财猫</span>
<hr />
<p class="content-price">
<span class='content-pricen'>￥1799.99</span>
<span class='content-price
html-css练习网页.zip
需积分: 1 19 浏览量
2023-12-14
00:53:39
上传
评论
收藏 369KB ZIP 举报
html-css练习网页.zip （29个子文件） 
code_21212 html_form img 
xin.ico 14KB
index.html 12KB css_training img 
hzw.png 18KB green_hat.png 9KB green_snake.png 12KB witch_hat.png 5KB whale.png 15KB crutches.png 4KB logo.png 16KB king_hat.png 8KB detective_hat.png 11KB vest.png 5KB cat.png 8KB highheels.png 8KB mask.png 14KB fan_hat.png 8KB dog.png 9KB panda.png 20KB diamond_ring.png 10KB trousers.png 5KB beads.png 9KB ambulance.png 8KB
left.jpg 148KB wheelchair.png 9KB css style.css 5KB index.html 14KB css_animation css style.css 1KB index.html 372B html_table index.html 3KB资源评论
