<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的购物网站</title>
<link rel="stylesheet" href="../CSS/pageshuxing.css" />
<style type="text/css">
li {
list-style-type: none;
}
.TiTle{
width: 200px;
height: 70px;
margin-left: 50px;
margin-top: -200px;
}
.cTitle {
font-family: "AR DELANEY";
font-size: 20px;
}
.Gcar {
width: 50px;
height: 50px;
position: fixed;
right: 3px;
top: 300px;
}
.div1 {
position: relative;
width: 100%;
height: 180px;
background-size: 100%;
background-image: url(../imag/BG/0.jpg);
}
.div1 .div2{
position: relative;
width: 100%;
height: 30px;
margin-left: 0px;
margin-top: 0px;
/* opacity: 0.5; */
background-image: url(../imag/BG/0.jpg);
-webkit-filter: blur(1px);
box-shadow: 10px 20px 100px black
}
.loding {
width: 40%;
height: 30px;
float: right;
position: relative;
margin-left: 0px;
margin-top: -30px;
}
.logimg {
position: relative;
margin-left: 200px;
width: 22px;
height: 22px;
border-radius: 11px;
top: 5px;
}
a {
text-decoration: none;
text-align: center;
}
.loding a {
position: relative;
display: inline-block;
height: 30px;
width: 50x;
font-size: 10px;
line-height: 30px;
left: 30px;
color: #FFFFFF;
font-weight: solid;
}
.lodingF{
width: 22px;
height: 22px;
position: absolute;
margin-top: 5px;
}
.loding .log1 {
margin-left: 3px;
}
.lodingR{
position: relative;
width: 22px;
height: 22px;
}
.lodF{
width: 200px;
height: 30px;
position: relative;
margin-top: -30px;
margin-right: 200px;
}
.lodF a:hover{
background-color: #A9A9A9;
}
.lodF a{
width: 22px;
height: 22px;
margin-top: 5px;
display: inline-block;
margin-left: 10px;
}
.serachDiv{
width: 30%;
height: 30px;
margin: 100px 0 0 auto;
opacity: 0.8;
}
.searchBox {
width: 180px;
height: 30px;
border-radius: 12px;
outline: none;
border-style: solid;
border: 1px ;
padding-left: 20px;
padding-right: 30px;
position: absolute;
}
.searchbtn {
height: 20px;
width: 20px;
position: absolute;
background-image: url(../imag/BG/搜索小.png);
top: 5px;
left: 203px;
background-repeat: no-repeat;
border-style: none;
outline: none;
cursor: pointer;
background-color: none;
}
.div3 {
width: 900px;
margin-left: 200px;
height: 190px;
margin-top: 40px;
position: relative;
/* background-color: #F47D31; */
}
.div3 div{
position: absolute;
border-radius: 5px;
}
.rollImg{
width: 365px;
height: 160px;
border-radius: 5px;
}
.topa{
width: 140px;
height: 77px;
border-radius: 5px;
position:absolute ;
overflow: hidden;
}
.showImg1{
width: 140px;
height: 77px;
border-radius: 5px;
background-color: #0000FF;
}
.showImgdetail{
width: 140px;
height: 200px;
display: block;
overflow: hidden;
margin-top: -80px;
padding-top: 60px;
color: darkolivegreen;
font-size: 12px;
text-align: left;
transition: 0.4s;
}
.topa label:hover{
transform: translateY(-60px);
background-color:#000000;
opacity: 0.7;
color: white;
}
.zhoubian {
/* border-width: 10px; */
border-color: #FF0000;
width: 900px;
height: 528px;
/* border-style: solid; */
margin-top: 60px;
margin-left: 200px;
}
.shouban {
/* border-width: 10px; */
width: 900px;
height: 528px;
margin-top: 70px;
margin-left: 200px;
}
.display-board
{
width:818px ;
height: 528px;
grid-gap:8px;
display: grid;
position: relative;
grid-template: repeat(2, 1fr) / repeat(4, 1fr);
}
.display-board a{
width: 198.5px;
height: 260px;
border-style: solid;
border-width: 1px;
border-color: gainsboro;
background-color: #DCDCDC;
/* background-color: #FF0000; */
}
.display-board a:hover{
/* border-width: 1px; */
border-color: #FF0000;
box-shadow: 2px 3px 2px darkgray
}
.godImg{
margin-left: 1px;
margin-top: 1px;
width: 196.5px;
height: 196.5px;
}
.detailBox{
margin-left: 1px;
width: 196.5px;
height: 40px;
margin-top: -12.5px;
/* background-color: #0000FF; */
position: relative;
color: #000000;
}
.name{
width: 100%;
height: 2em;
font-size: 11px;
color: #000000;
font-weight:bold;
text-align: left;
/* background-color: #A9A9A9; */
}
.price{
display: block;
width: 100%;
margin-top: 10px;
font-size: 15px;
text-align: -moz-left;
color: red;
font-weight:bolder;
/* background-color: #A9A9A9; */
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
<div class="lodF">
<a>
<img src="../imag/BG/历史.png" class="lodingR" />
</a>
<a>
<img src="../imag/BG/设置.png" class="lodingR" />
</a>
<a>
<img src="../imag/BG/收藏.png" class="lodingR" />
</a>
</div>
<div class="loding">
<!-- <input type="image" name="img" accept="image/jpeg" class="chose" /> -->
<img src="../imag/BG/登录头像jpg.jpg" class="logimg" />
<a href="Login/Loging.html" class="log">登录 /</a>
<a href="Login/CreatCount.html" class="log1">注册</a>
</div>
<div class="serachDiv">
<form action="#" style="position: relative;">
<input type="text" placeholder="搜索" id="searchBox" class="searchBox" autocomplete="off" />
<input type="button" id="searchButton" class="searchbtn" />
</form>
</div>
<div>
<img src="../imag/BG/标题%20(1).png" class="TiTle" />
</div>
</div>
<div id="container" style="color: white;">
<nav style="text-align:-webkit-center ;">
<a href="shopping.html">首页</a>
<a href="#/">衣服</a>
<a href="#">家电</a>
<a href="#">食品</a>
<a href="#">美妆</a>
<a href="#">鞋子</a>
</nav>
</div>
<div class="div3">
<div class="tv">
<div class="screen">
<img src="../imag/BG/1YM1WAAJF2HF2NBSB43BPSTTK.jpg" class="rollImg"/>
<img src="../imag/BG/CCGXETMQYKN5P9QQB5DE4P83P.jpg" class="rollImg" />
<img src="../imag/BG/XKPK26XHTGH1QQY1B4J8HPCHS.jpg" class="rollImg" />
<img src="../imag/BG/bgtqq6c4tx7ksjjuvm28s9a1mwm5sr62.webp.jpg" class="rollImg"/>
</div>
<!-- 按钮部分 -->
<!-- <div style="margin-top:0px;width: 100px;height: 15px;">
<input type="radio" name="r" id="r1" />
<input type="radio" name="r" id="r1" />
<input type="radio" name="r" id="r1" />
<input type="radio" name="r" id="r1" />
</div>
-->
</div>
<div style="margin-left: 371px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G1">
<img src="../imag/God/20191209112714_71221.webp.jpg" class="showImg1" id="img" />
<label class="showImgdetail" id="1">
【食物语】徽章第二弹 月上琢心 </label>
<span id="detail">食物语微章第二弹 月上琢心 (预售商品预计12月月底陆续安排发货，请耐心等候，谢谢！)</span>
<span id="deP
html5静态网页课程设计
需积分: 29 38 浏览量
2022-02-03
17:02:01
上传
评论 1
收藏 9.41MB ZIP 举报
静态网页.zip （87个子文件） 
WyWeb page 
shopping.html 16KB Login Loging.html 3KB CreatCount.html 3KB ShowGod.html 7KB CSS 
test.css 419B pageshuxing.css 1KB music video imag BG 
timg.jpg 37KB
搜索小.png 632B BG.jpg 515KB
BG.gif 821KB bgtqq6c4tx7ksjjuvm28s9a1mwm5sr62.webp.jpg 956KB 登录头像jpg.jpg 15KB 默认头像.png 110KB 标题.png 33KB true (1).jpg 49KB XKPK26XHTGH1QQY1B4J8HPCHS.jpg 169KB 购物车.png 77KB 设置.png 16KB true (2).jpg 60KB CCGXETMQYKN5P9QQB5DE4P83P.jpg 220KB 1480302247472.jpg 17KB true.jpg 45KB 1527842202152.jpg 18KB 1YM1WAAJF2HF2NBSB43BPSTTK.jpg 136KB 历史.png 12KB u=1989670040,2190704846&fm=26&gp=0.jpg 12KB true (3).jpg 31KB 4db781c21fc1f97e4f7ae830297c487a.jpg 34KB 标题 (1).png 34KB 搜索.png 13KB 2.gif 1.9MB 收藏.png 4KB 无标题.glb 638KB 0.jpg 265KB God 1467970572300.jpg 37KB 20191209100845_17053.webp.jpg 113KB FFFFFFFF (4).png 18KB 1542635865491.jpg 16KB 683c4233b1180b71.jpg 205KB 1546585104008.jpg 26KB 13887f0efc95e35b.png!q90.png 43KB 1460430653810.jpg 24KB b2dbaaa00050f912.jpg 21KB bgtqq6c4tx7ksjjuvm28s9a1mwm5sr62.webp.jpg 956KB 1501660213179.jpg 22KB 1554346376532.jpg 27KB 1484641608589.jpg 22KB 1517823245326.jpg 27KB FFFFFFFF (3).png 14KB bacdc270d23212f5.jpg 93KB 20171009060718990.jpg 55KB 4ba63dace0fb0bb4.jpg 219KB 1551169936428.jpg 22KB ef3cf4f20d2dd200.jpg 30KB 1546586533187.jpg 22KB 1511956793371.jpg 31KB 1544519706935.jpg 36KB 1545212696178.jpg 21KB FFFFFFFF.jpg 56KB FFFFFFFF (2).png 20KB 20191209112714_71221.webp.jpg 132KB 1542635737027.jpg 23KB 20191209102531_38322.webp.jpg 91KB FFFFFFFF (1).png 13KB 47a2927d7aa2a857.jpg 72KB 5bf6799aN660e6acd.jpg 76KB FFFFFFFF.png 24KB 1542789842367.jpg 25KB 5ae12e5bN70fe7724.jpg 266KB 6cc7be59f2654089b47b239d4cb9a6e5_th.jpg 43KB 1542634913229.jpg 14KB 1546586950562.jpg 31KB 61ad088cbf35aabc.png 40KB 20180318121142224.jpg 31KB FFFFFFFF (5).png 15KB 20191209101004_26379.webp.jpg 87KB 20191209111830_90532.webp.jpg 105KB 1471838699916.jpg 26KB 20180318121248528.jpg 36KB 1562835954312.jpg 27KB 1542635982214.jpg 22KB favicon.ico 33KB 1546852840637.jpg 15KB 20191025183606_87689.webp.jpg 122KB 20180318125121954.jpg 61KB 1539854951844.jpg 19KB 1565167837109.jpg 17KB
评论0