第一个项目：静态购物网站项目制作
静态网页制作
第一个月的学习基本结束，对于一些CSS样式，html的基础，我已经基本掌握，就这些基础上去进行一个静态网页项目的规划，虽然很简单，但是是我学习html5的一个小里程碑。
屁话不多，上代码：
国美在线
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;
}
}
这是我刚完成的一个项目，绝对不是最好的，我已经在路上，前往更广泛的大陆，去学习我喜欢的东西，努力！奋斗！