博客列表 >Shopping Cart and User Registry

Shopping Cart and User Registry

徐一通
徐一通原创
2020年06月18日 22:10:01526浏览

URL of my assignment

http://45.76.187.50/assignmentregister.html
http://45.76.187.50/assignmentshoppingcart.html

Source code of Shopping Cart

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格实战: 购物车</title>
<style>
html {
font-size: 14px;
}
table {
/ 将单元格之间的间隙去掉 /
border-collapse: collapse;
width: 70%;
margin: auto;
color: #666;
font-weight: lighter;
text-align: center;
}
/ 表格线直接添加到单元格上面 /
table thead th,
table td {
border-bottom: 1px solid #ccc;
padding: 10px;
}

/ 标题样式 /
table caption {
font-size: 1.5rem;
margin-bottom: 15px;
color: lightgreen;
}

table th {
font-weight: lighter;
color: lightgreen;
}
table thead tr:first-of-type {
background-color: lightcyan;
}

/ 隔行变色 /
table tbody tr:nth-of-type(even) {
background-color: crimson;
}
/ 鼠标悬停效果 /
table tbody tr:hover {
background-color: pink;
}

/ 底部样式 /
table tfoot td {
border-bottom: none;
color: coral;
font-size: 1.2rem;
font-weight: bolder;
}

/ 结算按钮 /

body div:last-of-type {
width: 70%;
margin: 10px auto;
}

body div:first-of-type button {
/ 靠右 /
float: right;

width: 120px;
height: 32px;
background-color: seagreen;
color: white;
border: none;
/ 设置鼠标样式 /
cursor: pointer;
}

body div:first-of-type button:hover {
background-color: coral;
font-size: 1.1rem;
}
</style>
</head>
<body>
<table>
<caption>Shopping Cart</caption>
<thead>
<tr>
<th>Ref. No.</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>

<tbody>
<tr>
<td>114514</td>
<td>A Catholic Interlinear New Testament Polyglot: Volume I: The Four Gospels and the Acts of the Apostles in Latin, English and Greek</td>
<td>$17.35</td>
<td>1</td>
<td>$17.35</td>

</tr>

<tr>
<td>114515</td>
<td>A Catholic Interlinear Old Testament Polyglot: Volume II: Numbers and Deuteronomy in Latin, English, Greek and Hebrew (Volume 2)</td>
<td>$5.65</td>
<td>1</td>
<td>$5.65</td>
</tr>

<tr>
<td>114516</td>
<td>A Catholic Interlinear New Testament Polyglot: Vol III: The Catholic Epistles and The Apocalypse in Latin, English and Greek</td>
<td>$7.00</td>
<td>1</td>
<td>$7.00</td>
</tr>
</tbody>

### Source Code of User Registry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XTube User Registry</title>
<style>
input:invalid {
border: 2px dashed red;
}

input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
border: 2px solid black;

.body {display:table}
</style>

</head>

<body>
<h1>XTube User Register</h1>
<form action="" method="POST">
<fieldset>
<legend>Basic Info(required)</legend>
<span>
<label for="uuid">Account</label>
<input type:"text" id="uuid" name="uuid" placeholder="Minimum 12 Characters" minlength="12" autofocus required />
</span>
<span>
<label for="emailaddr">Email Address</label>
<input type="email" name="emailaddr" id="emailaddr" placeholder="example@register.com" required />
</span>
<span>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" required minlength="12" placeholder="No less than 12 characters"/>
</span>
<span>
<label for="pwdconfirm">Password Again</label>
<input type="password" name="pwdc" id="pwdc" required minlength="12" placeholder="Type your password again please" </span>
</fieldset>

<fieldset>
<legend>Supplementary Info</legend>
<div>
<label for="gay">Sexual Orientation</label>
<input type="radio" name="sexori" value="gay" id="gay" checked /><label for="gay">Homosexual</label>
<input type="radio" name="sexori" value="str" id="str" /><label for="str">Heterosexual</label>
<input type="radio" name="sexori" value="bi" id="bi" /><label for="bi">Bisexual</label>

</div>

<div>
<label for="favgen">Favourite Gender</label>
<input type="checkbox" name="favgen[]" id="fem" value="fem" />
<label for="fem">Female</label>
<input type="checkbox" name="favgen[]" id="male" value="male" />
<label for="male">Male</label>
</div>


</fieldset>

<fieldset>
<legend>Extra Info</legend>
<label for="project">Favourite Project</label>
<input type="search" list="project" name="project" id="project"/>
<datalist id="project">
<option value="Bondage" ></option>
<option value="Submissive"></option>
<option value="Dominance"></option>
</datalist>

<fieldset>
<legend>Biography</legend>
<label for="bio">Biography</label>
<textarea name="bio" id="bio" cols="80" rows="5" placeholder="Enter your biography here..." ></textarea>

</fieldset>



</fieldset>

<button class="btn">Submit</button>



</body>
</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议