HTML5 页面设计
课程设计
登录页面
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title> 网站登录 </title>
<style>
a{
font-size: 11px;
font-weight: 400;
text-align: center;
}
a:link,a:visited{
color: black;
text-decoration: none;
}
a:hover,a:active{
color: #FF0000;
}
i{
margin-right: 5px;
}
.BG{
background: url(../../imag/BG/0.jpg) no-repeat center fixed;
background-size: cover;
overflow: hidden;
-webkit-background-size: cover;
}
.Box{
width: 350px;
height: 300px;
border-radius: 9px;
border-style: outset;
background: hsla(0,0%,100%,.4);
color: black;
text-align: center;
margin-left: 500px;
overflow: hidden;
margin-top: 70px;
position: relative;
}
.Box::before{
position: absolute;
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.form input{
width: 220px;
border-radius: 5px;
border-style: solid;
border-color: #A9A9A9;
outline: none;
}
.log{
border-radius: 10px;
margin-top: 8px;
background-color:cornsilk ;
width: 100px;
}
.text{
height: 20px;
width: 100px;
margin-left: 65px;
margin-top: 10px;
color: red;
text-align: left;
font-size: 10px;
border-width: 0px;
}
</style>
</head>
<body class="BG">
<img src="../../imag/BG/标题%20(1).png" style="width: 320px;height: 150px;" />
<div class="Box">
<h3 style="color: black;width: 350px;height: 30px;text-align: center;">登录</h3>
<form method="get" action="../shopping.html" class="form">
<input type="text" name="usrname" id="Count" placeholder="请输入用户名" required/>
<br />
<br />
<input type="password" name="password" id="Pwd" placeholder="请输入密码" required/>
<br />
<table class="text" id="warn"></table>
<input type="submit" value="登录" class="log" onclick="check()"></button>
</form>
<br />
<br />
<div style="padding-bottom: -10px;font-style:inherit">
<a style="padding-left: 200px;" href="CreatCount.html">免费注册</a>
</div>
<script type="text/javascript">
function check(){
var count = document.getElementById('Count').value;
var pwd = document.getElementById('Pwd').value;
var textPwd = localStorage.getItem(count);
if(textPwd== null){
document.getElementById('Count').value='';
document.getElementById('Pwd').value='';
document.getElementById('warn').innerHTML='*该账号不存在！';
}else{
if(textPwd!=pwd){
document.getElementById('Pwd').value='';
document.getElementById('warn').innerHTML='*密码输入错误！'
}
}
}
</script>
</div>
</body>
</html>
注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册账号</title>
<style>
.form{
margin-top: 20px;
margin-left:200px;
width: 570px;
}
.form fieldset{
font-weight: 400;
}
.form legend {
color: #0000FF;
font-weight: 600;
font-family: "bodoni mt";
}
.form label{
color:darkgray ;
font-size: 12px;
font-style: italic;
}
body{
background-image: url(../../imag/BG/true.jpg);
background-size: 100% 200%;
}
fieldset{
background-color: white;
}
</style>
</head>
<body>
<img src="../../imag/BG/标题%20(1).png" style="width: 320px;height: 150px;" />
<form method="get" action="../shopping.html" class="form" id="form" >
<fieldset >
<legend>注册账号</legend>
绑定手机号:
<input type="tel" name="tel" pattern="^1(3|5|8|7)[0-9]{9}" id="Tel" required />
<label style="color: #FF0000;">*</label>
<label >请输入十一位手机号</label>
<br /><br />
创建 账号:
<input type="text" name="count" pattern="([0-9a-zA-Z]|_){8,16}" id="Count" required />
<label style="color: #FF0000;">*</label>
<label >输入八到十六位账号</label><br /><br />
设置 密码:
<input type="password" name="password" pattern="([0-9A-Za-z]|_){6,8}" id="Pwd" required/>
<label style="color: #FF0000;">*</label>
<label >密码六到八位数，包含字母、数字、字符</label>
<br /><br />
请验证密码:
<input type="password" name="repasswd" id="RePwd" oninvalid="setCustomValidity('前后密码不一致')" oninput="setCustomValidity('')" required/>
<label style="color: #FF0000;">*</label>
<label >两次密码要一致</label>
<br /><br />
<input type="submit" name="注册" style="color: #0000FF;margin-left: 20px;" onclick="CreatCount()"/>
<input type="reset" name="取消" style="color: #0000FF;margin-left: 40px;"/>
</fieldset>
</form>
<script type="text/javascript">
function isrepeat(Count){
for (var i=0;i<localStorage.length;i++){
var count = localStorage.key(i);
if(Count == count){
return true;
}
}
return false;
}
function CreatCount(){
var pwd = document.getElementById("Pwd").value;
var repwd = document.getElementById("RePwd").value;
var count = document.getElementById('Count').value;
var tel = document.getElementById('Tel').value;
if(pwd != repwd){
document.getElementById("RePwd").value='';
}else{
if (isrepeat(count)){
document.getElementById('Count').value='';
alert("该账户名已存在，请重新设置");
}else{
localStorage.setItem(count,pwd);
localStorage.setItem(count+'Tel',tel);
}
}
}
</script>
</body>
</html>
首页
<!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="dePrice">￥55.00</span>
<span id="num">400</span>
</a>
</div>
<div style="margin-left: 517px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G2">
<img src="../imag/God/20191209111830_90532.webp.jpg" class="showImg1" id="img" />
<label class="showImgdetail" id="1">
【食物语】皮影戏系列明信片 预售 </label>
<span id="detail">食物语 皮影戏系列明信片 (预售商品预计1月初陆续安排发货，请耐心等候，谢谢！)</span>
<span id="dePrice">￥18.00</span>
<span id="num">90</span>
</a>
</div>
<div style="margin-left: 663px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G3">
<img src="../imag/God/20191025183606_87689.webp.jpg" class="showImg1" id="img"/>
<label class="showImgdetail" id="1">
【食物语】趴趴毛绒公仔 小挂件 佛跳墙</label>
<span id="detail">食物语 趴趴毛绒公仔小挂件 佛跳墙款(预售商品预计12月月底陆续安排发货，请耐心等候，谢谢！)</span>
<span id="dePrice">￥50.00</span>
<span id="num">88</span>
</a>
</div>
<div style="margin-left:371px ; margin-top: 83px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G4" >
<img src="../imag/God/20191209101004_26379.webp.jpg" class="showImg1" id="img"/>
<label class="showImgdetail" id="1">
【食物语】人形立牌 符离集烧鸡 </label>
<span id="detail">食物语 人形立牌 符离集烧鸡(预售商品预计12月月底陆续安排发货，请耐心等候，谢谢！)</span>
<span id="dePrice">￥50.00</span>
<span id="num">114</span>
</a>
</div>
<div style="margin-left: 517px;margin-top: 83px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G5" >
<img src="../imag/God/20191209102531_38322.webp.jpg" class="showImg1" id="img"/>
<label class="showImgdetail" id="1">
【食物语】飞龙汤立牌套装 预售 </label>
<span id="detail">食物语 飞龙汤立牌套装（套装内含Q版钥匙扣）预售商品预计12月中下旬陆续安排发货，请耐心等候，谢谢</span>
<span id="dePrice">￥78.00</span>
<span id="num">45</span>
</a>
</div>
<div style="margin-left: 663px;margin-top: 83px;">
<a class="topa" href="ShowGod.html" onclick="writeGod(this.id)" id="G6" >
<img src="../imag/God/20191209100845_17053.webp.jpg" class="showImg1" id="img"/>
<label class="showImgdetail" id="1">
【食物语】陆吾卡套 </label>
<span id="detail">食物语 陆吾卡套</span>
<span id="dePrice">￥45.00</span>
<span>115</span>
</a>
</div>
</div>
<div class="zhoubian">
<h3 class="cTitle">周边</h3>
<div class="display-board">
<a>
<img src="../imag/God/1565167837109.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【枫树息-画影】冰激凌 雪纺外套</p>
<p class="price">￥69.00</p>
</div>
</a>
<a>
<img src="../imag/God/1546585104008.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【6酱】现货雪绒花 JK制服水身白三本 秋冬季长袖正统水手</p>
<p class="price">￥168.00</p>
</div>
</a>
<a>
<img src="../imag/God/1544519706935.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【枫树息画影】百鬼夜行 骷髅头 改良羽织</p>
<p class="price">￥128.00</p>
</div>
</a>
<a>
<img src="../imag/God/1562835954312.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【枫树息画影】百鬼夜行 猫又 改良羽织</p>
<p class="price">￥128.00</p>
</div>
</a>
<a>
<img src="../imag/God/1546586950562.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【6酱】现货JK制服关西襟秋季长袖连衣裙刺绣 镶褶三色 牧晨</p>
<p class="price">￥189.00</p>
</div>
</a>
<a>
<img src="../imag/God/1554346376532.jpg" class="godImg" />
<div class="detailBox">
<p class="name"> 预售【官方正版】一人之下 人物角色 时装版 亚力克挂件 钥匙扣</p>
<p class="price">￥45.00</p>
</div>
</a>
<a>
<img src="../imag/God/1551169936428.jpg" class="godImg" />
<div class="detailBox">
<p class="name"> 预售【官方正版】我的英雄学院 泡面压盒蛋</p>
<p class="price">￥128.00</p>
</div>
</a>
<a>
<img src="../imag/God/1542789842367.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【非人哉】官方正版 Q版 发圈</p>
<p class="price">￥20.00</p>
</div>
</a>
</div>
</div>
<div class="shouban">
<h3 class="cTitle">手办</h3>
<div class="display-board">
<a>
<img src="../imag/God/1545212696178.jpg" class="godImg" />
<div class="detailBox">
<p class="name">bilibili哔哩哔哩 黏土人 22年33娘 BML 2016.Ver手办一对</p>
<p class="price">￥520.00</p>
</div>
</a>
<a>
<img src="../imag/God/1546852840637.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【卡漫星】正版 漫威蜘蛛侠玩具公仔英雄归来手办模型可动人偶车载摆件炫酷</p>
<p class="price">￥73.00</p>
</div>
</a>
<a>
<img src="../imag/God/1517823245326.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【卡星漫】正版 神偷奶爸小黄人 凯文小号野人系列玩具模型</p>
<p class="price">￥66.00</p>
</div>
</a>
<a>
<img src="../imag/God/1501660213179.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【猫受屋】FIEND 有妖气 镇魂街 迷你守护灵系列 于禁 Q版手办</p>
<p class="price">￥139.00</p>
</div>
</a>
<a>
<img src="../imag/God/1484641608589.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【猫受屋】GSC 火影忍者 旗木卡卡西 粘土人</p>
<p class="price">￥253.00</p>
</div>
</a>
<a>
<img src="../imag/God/1471838699916.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【猫受屋】GSC OR 文豪野犬 太宰治 粘土人 手办 全款预定</p>
<p class="price">￥248.00</p>
</div>
</a>
<a>
<img src="../imag/God/1467970572300.jpg" class="godImg" />
<div class="detailBox">
<p class="name"> 【小T宅品】DORA COS洛基Loki复仇者联盟手办</p>
<p class="price">￥78.00</p>
</div>
</a>
<a>
<img src="../imag/God/1460430653810.jpg" class="godImg" />
<div class="detailBox">
<p class="name">【猫受屋】Vulcanlog011 在下坂本，有何贵干？坂本 全款预定</p>
<p class="price">￥351.00</p>
</div>
</a>
</div>
</div>
<a href="gouwuche.html">
<img src="../imag/BG/购物车.png" class="Gcar" />
</a>
<script type="text/javascript">
function writeGod(id){
var contain=document.getElementById(id).children;
// localStorage.setItem("tempimg",contain[0].attributes);
localStorage.setItem("temptitle",contain[1].innerHTML);
localStorage.setItem("tempdetail",contain[2].innerHTML);
localStorage.setItem("tempprice",contain[3].innerHTML);
localStorage.setItem("tempnum",contain[4].innerHTML);
}
</script>
</body>
</html>
购买页面
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title> 网站登录 </title>
<style>
a{
font-size: 11px;
font-weight: 400;
text-align: center;
}
a:link,a:visited{
color: black;
text-decoration: none;
}
a:hover,a:active{
color: #FF0000;
}
i{
margin-right: 5px;
}
.BG{
background: url(../../imag/BG/0.jpg) no-repeat center fixed;
background-size: cover;
overflow: hidden;
-webkit-background-size: cover;
}
.Box{
width: 350px;
height: 300px;
border-radius: 9px;
border-style: outset;
background: hsla(0,0%,100%,.4);
color: black;
text-align: center;
margin-left: 500px;
overflow: hidden;
margin-top: 70px;
position: relative;
}
.Box::before{
position: absolute;
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.form input{
width: 220px;
border-radius: 5px;
border-style: solid;
border-color: #A9A9A9;
outline: none;
}
.log{
border-radius: 10px;
margin-top: 8px;
background-color:cornsilk ;
width: 100px;
}
.text{
height: 20px;
width: 100px;
margin-left: 65px;
margin-top: 10px;
color: red;
text-align: left;
font-size: 10px;
border-width: 0px;
}
</style>
</head>
<body class="BG">
<img src="../../imag/BG/标题%20(1).png" style="width: 320px;height: 150px;" />
<div class="Box">
<h3 style="color: black;width: 350px;height: 30px;text-align: center;">登录</h3>
<form method="get" action="../shopping.html" class="form">
<input type="text" name="usrname" id="Count" placeholder="请输入用户名" required/>
<br />
<br />
<input type="password" name="password" id="Pwd" placeholder="请输入密码" required/>
<br />
<table class="text" id="warn"></table>
<input type="submit" value="登录" class="log" onclick="check()"></button>
</form>
<br />
<br />
<div style="padding-bottom: -10px;font-style:inherit">
<a style="padding-left: 200px;" href="CreatCount.html">免费注册</a>
</div>
<script type="text/javascript">
function check(){
var count = document.getElementById('Count').value;
var pwd = document.getElementById('Pwd').value;
var textPwd = localStorage.getItem(count);
if(textPwd== null){
document.getElementById('Count').value='';
document.getElementById('Pwd').value='';
document.getElementById('warn').innerHTML='*该账号不存在！';
}else{
if(textPwd!=pwd){
document.getElementById('Pwd').value='';
document.getElementById('warn').innerHTML='*密码输入错误！'
}
}
}
</script>
</div>
</body>
</html>
之前上课的作业，现在整理了一下