HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>badminton-精选好货</title>
<link rel="stylesheet" href="sale.css">
</head>
<body>
<div class="pos">
<i style="font-family: KaiTi;font-size: 200%">好货</i>
<i style="font-family: KaiTi;font-size: 200%;color:#00DB00">精选</i>
<i style="font-family: KaiTi;font-size: 200%">♦为您</i>
<i style="font-family: KaiTi;font-size: 200%;color:#00DB00">推荐</i>
</div>
<div class="log">
<a href="file://D:/Sublime Text 3/my work/badminton/firstPage.html" target="_blank">登录</a>
<a href="file://D:/Sublime Text 3/my work/badminton/firstPage.html" target="_blank">注册</a>
</div>
<input type="text" class="color" placeholder="请输入搜索内容" size="50" style=" 500px;height: 30px;">
<button class="color1">搜索</button>
<br><br><br><br><br>
<hr size="31px" color="#00A600">
<div class="guide">网站导航→→</div>
<a href="https://www.taobao.com/" target="_blank"><button class="style1" id="one">淘宝</button></a>
<a href="https://www.jd.com/" target="_blank"><button class="style1" id="two">京东</button></a>
<a href="https://www.amazon.cn/" target="_blank"><button class="style1" id="three">亚马逊中国</button></a>
<a href="https://www.suning.com/" target="_blank"><button class="style1" id="four">苏宁易购</button></a>
</body>
</html>
CSS代码：
.pos {
position: absolute;
top: 30px;
left: 200px;
}
.color {
position: absolute;
top: 30px;
left: 600px;
}
.log {
position: absolute;
top: 8px;
left: 1200px;
}
.color1 {
position: absolute;
top: 28px;
left: 1100px;
background-color: #00DB00;
font-size: 1rem;
text-align: center;
text-shadow: 1px 1px 1px #000;
100px;
height: 39px;
color: #DFFFDF;
border-radius: 10px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px,
inset -2px -2px 6px rgba(0, 0, 0, .6);
}
.guide {
border:thick double #73BF00;
position: absolute;
top: 120px;
left: 210px;
color: #DEFFAC;
}
.style1 {
text-shadow: 1px 1px 1px #000;
background-color: #00A600;
color: white;
font-size: 19px;
border-radius: 10px;
box-shadow: 2px 2px 2px #64A600;
}
#one {
position: absolute;
top: 120px;
left: 400px;
}
#two {
position: absolute;
top: 120px;
left: 520px;
}
#three {
position: absolute;
top: 120px;
left: 640px;
}
#four {
position: absolute;
top: 120px;
left: 810px;
}