靜态網頁制作
第一個月的學習基本結束，對于一些CSS樣式，html的基礎，我已經基本掌握，就這些基礎上去進行一個靜态網頁項目的規劃，雖然很簡單，但是是我學習html5的一個小裡程碑。
屁話不多，上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>國美線上</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/guomeishouye.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="css/resrt.css" target="_blank" rel="external nofollow" />
</head>
<body>
<a class="shouye" href="http://127.0.0.1:8848/Guo/guomeizaixian.html" target="_blank" rel="external nofollow" ></a>
<div class="warp">
<div class="top clearfix">
<img class="top_one" src="img/國美logo.png">
<img class="top_two" src="img/wap-suo.png">
<a href="denglu.html" target="_blank" rel="external nofollow" >登入</a>
<input type="text" placeholder="拉菲"/>
</div>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img class="warp_first" src="img/Wap-top.png">
</a>
<a class="sousouyemian" href="http://127.0.0.1:8848/Guo/sousuo.html" target="_blank" rel="external nofollow" ></a>
<div class="warp_daohang">
<div>
<a href="daily recommendation .html" target="_blank" rel="external nofollow" >
<img style="width: 1.5rem;" src="img/wap-1.png">
<span>每日推薦</span>
</a>
</div>
<div>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img style="width: 1.4rem;" src="img/wap-2.png">
<span>限時閃購</span>
</a>
</div>
<div>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img style="width: 1.8rem;" src="img/wap-3.png">
<span style="padding-top: 0.4rem;">新品上架</span>
</a>
</div>
<div>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<img style="width: 1.755rem;" src="img/wap-4.png">
<span style="padding-top: 0.3rem;">熱銷推薦</span>
</a>
</div>
</div>
<div class="warp_huodong clearfix">
<span></span>
活動精選
<span></span>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_huodong_meijiu">
<p>國美酒節</p>
<p>意大利名酒</p>
<p>19.9元秒</p>
<img src="img/jiuping.png" >
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_huodong_maotai">
<img src="img/wap-6.png" >
<p class="warp_huodong_maotai_p1">茅台紅色限量版</p>
<p class="warp_huodong_maotai_p2">799元</p>
</div>
</a>
</div>
<div class="warp_qingxin">
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_qingxin_fist">
<img src="img/wap-7.png" >
<div style="border: 0.05rem solid #FFFFFF;">
<p>LES</p>
<p>CLANS</p>
<p>清新 純淨</p>
</div>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_qingxin_fist">
<img src="img/wap-8.png" >
<div>
<p>LES</p>
<p>CLANS</p>
<p>清新 純淨</p>
</div>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_qingxin_fist">
<img src="img/wap-9.png" >
<div>
<p>LAREINA</p>
<p>藝術家最愛</p>
</div>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_qingxin_fist">
<img src="img/wap-10.png" >
<div>
<p>FRENCH</p>
<p>法蘭西之夜</p>
</div>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_qingxin_fist">
<img src="img/wap-7.png" >
<div>
<p>LES</p>
<p>CLANS</p>
<p>清新 純淨</p>
</div>
</div>
</a>
</div>
<div class="warp_weini clearfix">
<span></span>
為您推薦
<span></span>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_weini_four">
<img src="img/wap-11.png" >
<p>澳洲原瓶進口紅酒洛神山莊幹...</p>
<p>￥318.00</p>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_weini_four">
<img src="img/wap-12.png" >
<p>澳洲原裝進口紅酒整箱...</p>
<p>￥278.00</p>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_weini_four">
<img src="img/wap-11.png" >
<p>澳洲原瓶進口紅酒洛神山莊幹...</p>
<p>￥318.00</p>
</div>
</a>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<div class="warp_weini_four">
<img src="img/wap-12.png" >
<p>澳洲原裝進口紅酒整箱...</p>
<p>￥278.00</p>
</div>
</a>
</div>
</div>
<ul class="cellar_fixation">
<li class="cellar_fixation_1"><a href="guomeizaixian.html" target="_blank" rel="external nofollow" ><img src="img/shouyebai.png" ></a></li>
<li class="cellar_fixation_2"><a href="fenlei.html" target="_blank" rel="external nofollow" ><img src="img/分類.png" ></a></li>
<li class="cellar_fixation_3"><a href="gouwuche.html" target="_blank" rel="external nofollow" ><img src="img/購物車.png"></a></li>
<li class="cellar_fixation_4"><a href="wodejiujiao.html" target="_blank" rel="external nofollow" ><img src="img/wode.png" ></a></li>
</ul>
</body>
</html>
CSS樣式
html,body {
width: 100%;
height: 100%;
}
html {
font-size: 20px;
}
.warp {
background-color: rgb(249,249,249);
padding-bottom: 85px;
}
.top {
width: 18.75rem;
height: 3.175rem;
background-color: rgb(192,27,55);
position: relative;
z-index: 100;
}
.top_one {
width: 0.775rem;
position: absolute;
top: 0.975rem;
left: 0.65rem;
}
.top_two {
width: 13.5rem;
position: absolute;
top: 1.4rem;
left: 2.5rem;
}
.top>a {
color: #ffffff;
font-size: 0.6rem;
font-weight: normal;
font-family: SYXihei;
position: absolute;
top: 1.775rem;
left: 16.925rem;
display: inline-block;
width: 1.2rem;
height: 0.55rem;
line-height: 0.5rem;
}
.warp_first {
width: 18.75rem;
}
.warp_daohang {
width: 18.75rem;
height: 4rem;
position: relative;
}
.warp_daohang>div {
width: 2.9rem;
height: 2.9rem;
background-color: #FFFFFF;
border-radius: 1.45rem;
}
.warp_daohang>div:nth-child(1) {
position: absolute;
top: 0.85rem;
left: 1.425rem;
}
.warp_daohang>div:nth-child(2) {
position: absolute;
top: 0.85rem;
left: 5.775rem;
}
.warp_daohang>div:nth-child(3) {
position: absolute;
top: 0.85rem;
left: 10.175rem;
}
.top>input {
border: 0; /* // 去除未選中狀态邊框 */
outline: none;/* // 去除選中狀态邊框 */
background-color: rgba(0, 0, 0, 0);/* // 透明背景 */
position: absolute;
top: 1.775rem;
left: 4.35rem;
font-size: 0.75rem;
}
.warp_daohang>div:nth-child(4) {
position: absolute;
top: 0.85rem;
left: 14.55rem;
}
.warp_daohang img {
margin-top: 0.5rem;
width: 1.7rem;
}
.warp_daohang a span {
display: inline-block;
font-size: 0.5rem;
color: #333333;
font-family: SYXihei;
line-height: 0.6rem;
}
.warp_huodong {
margin-top: 0.5srem;
}
.warp_huodong>span {
display: inline-block;
width: 6.15rem;
border: 0.02rem solid #cccccc;
margin: 0.25rem 0.6rem;
}
.warp_huodong {
color: #666666;
font-size: 0.7rem;
margin-top: 1rem;
}
.warp_huodong_meijiu {
width: 9.825rem;
height: 5rem;
background-color: #ffffff;
margin-left:0.65rem;
position: relative;
margin-top: 1rem;
padding-left: 1.125rem;
float: left;
}
.warp_huodong_meijiu>p:nth-child(1) {
font-size: 1rem;
color: #000000;
padding-top: 1.15rem;
text-align: left;
}
.warp_huodong_meijiu>p:nth-child(2) {
height: 0.95rem;
font-size: 0.6rem;
line-height: 0.4rem;
color: #000000;
text-align: left;
font-family: PingFangSC-Light;
}
.warp_huodong_meijiu>p:nth-child(3) {
height: 0.95rem;
font-size: 0.764rem;
line-height: 0.5rem;
color: #e43643;
text-align: left;
font-family: PingFangSC-Light;
}
.warp_huodong_meijiu>img {
width: 6.4rem;
position: absolute;
top: -1rem;
right: 0;
}
.warp_huodong_maotai {
width: 6.275rem;
height: 5rem;
background-color: #FFFFFF;
float: right;
margin-right: 0.65rem;
position: relative;
margin-top: 1rem;
}
.warp_huodong_maotai>img {
width: 2.8rem;
height: 3.05rem;
}
.warp_huodong_maotai_p1 {
font-size: 0.45rem;
font-family: PingFangSC-Light;
color: #000000;
margin-top: 0.25rem;
}
.warp_huodong_maotai_p2 {
font-size: 0.5rem;
font-family: PingFangSC-Medium;
color: #E43643;
margin-top: 0.225rem;
}
.warp_qingxin img {
width: 17.5rem;
margin-top: 0.275rem;
}
.warp_qingxin_fist {
position: relative;
}
.warp_qingxin_fist>div {
width: 4.45rem;
height: 3rem;
background-color: rgba(0,0,0,0);
text-align: left;
position: absolute;
top: 0.8rem;
left: 1.8rem;
color: #FFFFFF;
padding-top: 0.55rem;
padding-left: 0.475rem;
}
.warp_weini {
margin-top: 1rem;
color: #666666;
font-size: 0.7rem;
}
.warp_weini>span {
display: inline-block;
width: 6.15rem;
border: 0.02rem solid #cccccc;
margin: 0.25rem 0.6rem;
}
.warp_weini_four {
width: 8.6rem;
height: 8.7rem;
float: left;
background-color: #FFFFFF;
margin-left: 0.6rem;
margin-top: 0.275rem;
}
.warp_weini_four>img {
width: 5.45rem;
}
.last {
width: 18.75rem;
background-color: #f9f9f9;
position: fixed;
bottom: 0;
left: 0;
border-top: 1xp solid red;
}
.last img {
padding: 0.35rem 1rem 0.3rem;
}
.sousouyemian {
width: 2rem;
height: 2rem;
display: inline-block;
position: absolute;
top: 1rem;
left: 2.3rem;
z-index: 1000;
}
.cellar_fixation {
width: 18.75rem;
background-color: #FFFFFF;
position: fixed;
bottom: 0;
z-index: 4;
}
.cellar_fixation>li {
float: left;
margin: 0.6rem 1.55rem;
}
.cellar_fixation_1 img {
width: 1.425rem;
}
.cellar_fixation_2 img {
width: 1.425rem;
}
.cellar_fixation_3 img {
width: 1.85rem;
}
.cellar_fixation_4 img {
width: 1.2rem;
}
@media screen and (min-width:411px) {
html {
font-size: 21.92px;
}
}
@media screen and (min-width:414px) {
html {
font-size: 22.08px;
}
}
@media screen and (min-width:414px) {
html {
font-size: 22.08px;
}
}
@media screen and (min-width:768px) {
html {
font-size: 40.96px;
}
}
@media screen and (min-width:1024px) {
html {
font-size: 54.61333px;
}
}
@media screen and (min-width:1025px) and (max-width:3500px) {
html {
font-size: 105px;
}
}
這個首頁是我項目中的一個初始頁面，其中跳轉都已經實作，具體項目就去這個網頁能直接看到我的全部項目
靜态購物網頁
在做項目之前我發現了一個很有用的reset，在做移動端的時候可以用上這裡我直接用代碼帶上去吧：
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
.shouye {
display: inline-block;
width: 3rem;
height: 3rem;
position: absolute;
top: 0;
left: 0;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
*{
margin: 0;
padding: 0;
}
/* 将a标簽去下劃線,顔色改為黑色 */
a {
text-decoration: none;
color: rgb(0,0,0);
}
/* 将無需表格黑點去掉 */
ul {
list-style: none;
}
/* 設定img上部對齊 */
img {
vertical-align: top;
}
h2 {
text-decoration: none;
color: rgb(0,0,0);
font-weight: normal;
padding-bottom: 20px;
}
.clearfix:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
input {
border: 0;
outline: none;
background-color: rgba(0, 0, 0, 0);
}
@media screen and (min-width:411px) {
html {
font-size: 21.92px;
}
}
@media screen and (min-width:414px) {
html {
font-size: 22.08px;
}
}
@media screen and (min-width:414px) {
html {
font-size: 22.08px;
}
}
@media screen and (min-width:768px) {
html {
font-size: 40.96px;
}
}
@media screen and (min-width:1024px) {
html {
font-size: 54.61333px;
}
}
@media screen and (min-width:1025px) and (max-width:3500px) {
html {
font-size: 105px;
}
}
這是我剛完成的一個項目，絕對不是最好的，我已經在路上，前往更廣泛的大陸，去學習我喜歡的東西，努力！奮鬥！
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)