web前端学习第十四~十八天

最新推荐文章于 2022-09-12 15:09:25 发布

StarAh

最新推荐文章于 2022-09-12 15:09:25 发布

阅读量701

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/StarAh/article/details/123884097

版权

本文记录了在前端开发中布置电商平台的五天学习经历，强调了项目目录结构、图片管理以及SEO优化的重要性。介绍了SEO的三大标签：title、description和keyword，并详细解释了它们的设置和作用。同时，讲解了首页命名规范、模块化开发以及LOGO的SEO优化技巧。此外，还提及了注册页因隐私考虑无需进行SEO优化。

摘要由CSDN通过智能技术生成

这五天学习了如何布置一个电商的平台，花了一些时间，前面在磋磨的怎么布局，后面顺手就快了点，但还是花了很多时间。

项目的注意事项：
项目准备好目录文件，样式与结构相分离。
产品的图片，项目的固定的图片，分好文件夹，后期好更换
第一个首页页面都以index命名。

1，网站TDK三大标签SEO优化

项目开始前准备好三大标签SEO。

SEO（Search Engune Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合SEO优化。
title，description，keyword

1,title 网站标题

title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）

列如:
京东（JD.COM）-综合网购首选-正品低价，品质保障，配色及时，轻松购物！

2，description 网站说明
简要说明我们网站主要是做什么的

我们提倡，description 作为网站的总体业务和主题概括，多采用 “我们是…” “我们提供…”

列如：

3，keywords关键字
keywords 是页面关键词，是搜索引擎的关注点之一。

keywords最好限制为6-8个关键词，关键词之间用英文逗号隔开，采用关键词1，关键词2的形式。

列如：

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的SEO人员准备。

2，网站的首页一般都是使用index命名，比如index.html
我们开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面

3，LOGO SEO 优化

1，logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎。这个地方很重要。

2，h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可

3，为了搜索引擎收留我们，我们链接里面要放文字（网站名称），但文字不要显示出来

方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow：hidden，淘宝的做法。

方法2：直接给font-size：0，就看不到文字了，京东的做法

4，最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

4，注册页
注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

CSS样式如下：
初始化样式：


/* 把我们内外边距都清零 */
* {
   
    margin:0;
    padding:0;
    box-sizing: border-box;
}

/* em和i 斜体里面的字体不倾斜 */
em,i{
   font-style:normal}

/* 去掉li的小圆点 */
li{
   list-style:none}

img{
   
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border:0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align:middle}

/* 当我们鼠标经过button 按钮的时候  鼠标变成小手   */
button{
   cursor:pointer}


a{
     
    /* 指定链接的颜色 */
    color:#666;
    /* 取消链接的下划线 */
    text-decoration:none}

/* 鼠标经过链接时候的颜色    */
a:hover{
   color:#c81623}


button,input{
   
    font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    border: 0;
    outline: none;

}


body{
   
     /* css3 抗锯齿形  让文字显示的更加清晰 */
    -webkit-font-smoothing:antialiased;
    background-color:#fff;

    /* \5B8B\4F53 就是宋体的意思，这样浏览器兼容性比较好 */
    font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}

/* 把我们元素隐藏起来 */
.hide,.none{
   display:none}

/* 清除浮动， 伪元素 */
.clearfix:after{
   visibility:hidden;clear:both;display:block;content:".";height:0}

.clearfix{
   *zoom:1}

公共区域样式：如头部，底部，导航栏等

/* 声明字体图标 */
@font-face {
   
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?x1qd5m');
    src:  url('../fonts/icomoon.eot?x1qd5m#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?x1qd5m') format('truetype'),
      url('../fonts/icomoon.woff?x1qd5m') format('woff'),
      url('../fonts/icomoon.svg?x1qd5m#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }

/* 版心 */
.w {
   
    width: 1200px;
    margin: 0 auto;
}


.style_red {
   
    color: #c81623;
}

/* 快捷导航模块 */
.shortcut {
   
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.shortcut ul li {
   
    float: left;
}

.fl {
   
    float: left;
    
}

.fr {
   
    float: right;
    
}

.shortcut .fr ul li:nth-child(even) {
   
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}

.shortcut .fr ul li.arrow-icon::after {
   
    font-family: 'icomoon';
    margin-left: 6px;
    content: "\e913";
}

/* header头部制作 */
.header {
   
    position: relative;
    height: 105px;

}

.logo {
   
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    
}

.logo h1 a {
   
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* 淘宝隐藏文字做法 */
    overflow: hidden;
    text-indent: -9999px;
    
    /* 京东隐藏文字的做法 */
    /* font-size: 0; */
}

.search {
   
    position: absolute;
    top: 25px;
    left: 347px;
    width: 539px;
    height: 36px;
    border: 2px solid #b1191a;
}

.search input {
   
    float: left;
    width: 455px;
    height: 32px;
    padding-left: 10px;
}
.search .btn {
   
    float: left;
    width: 80px;
    height: 32px;
    background-color: #b1191a;
    color: #fff;
    font-size: 16px;
}

.hotwrods ul {
   
    position: absolute;
    top: 65px;
    left: 347px;

}

.hotwrods ul li {
   
    float: left;
}

.hotwrods ul li a {
   
    font-size: 12px;
    margin: 0 10px;
}

.hotwrods ul li a:hover {
   
    color: #b1191a;
}


.shopcar {
   
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 36px;
    line-height: 36px;
    background-color: #f7f7f7;
    border: 1px solid #dfdfdf;
    text-align: center;
}



.shopcar::after {
   
    position: absolute;
    right: 15px;
    font-family: 'icomoon';
    content: "\e915";
}

.shopcar::before {
   
    display: block;
    content: "";
    position: absolute;
    top:11px;
    left: 13px;
    width: 18px;
    height: 13px;
    background: url(../images/shopcar.png) no-repeat;
}

.count {
   
    position: absolute;
    top: -5px;
    left: 105px;
    height: 14px;
    line-height: 14px;
    padding: 0 5px;
    color: #fff;
    background-color: #e60012;
    border-radius: 7px 7px 7px  0;
}

.nav {
   
    height: 47px;
    line-height: 47px;

    border-bottom: 2px solid #b1191a;
}

.nav .dropdown {
   
    float: left;
    width: 210px;
    height: 45px;
    background-color: #b1191a;
}

.nav .dropdown .dt {
   
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}



.dropdown .dd {
   
    /* display: none; */
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}

 .dropdown .dd ul li {
   
    position: relative;
    height: 30px;
    line-height: 30px;
    margin-left: 2px;
    padding-left: 10px;
    color: #fff;
}

.dropdown .dd ul li:hover {
   
    background-color: #fff;
    color: #b1191a;
}

.dropdown .dd ul li:hover  a{
   
    color: #b1191a;
}

 .dropdown .dd ul li::after {
   
    position: absolute;
    top: 0;
    right: 13px;
    font-family: 'icomoon';
    content: "\e915";

}
 .dropdown .dd ul li a {
   
    font-size: 14px;
    color: #fff;
}


.nav .navitems {
   
    float: left;
}
.nav .navitems ul li {
   
    float: left;
    
}
.nav .navitems ul li a {
   
    display: block;
    height: 45px;
    line-height: 45px;
    padding:  0 25px;
}

/* 底部制作 */
.footer {
   
    height: 415px;
    background-color: #f5f5f5;
    padding-top: 30px;
}

.mod_service {
   
    height: 80px;
    border-bottom: 1px solid #ccc
}

.mod_service ul li {
   
    float: left;
    width: 240px;
    height: 50px;
    padding-left: 35px;
}

.mod_service ul li h5 {
   
    float: left;
    width: 50px;
    height: 50px;
    background: url(../images/icons.png) no-repeat -253px -3px;
    margin-right: 8px;
}

.mod_service ul li .img2 {
   
    background: url(../images/icons.png) no-repeat -255px -54px;
}

.mod_service ul li .img3 {
   
    background: url(../images/icons.png) no-repeat -257px -106px;
}

.mod_service ul li .img4 {
   
    background: url(../images/icons.png) no-repeat -258px -157px;
}

.mod_service ul li .img5 {
   
    background: url(../images/icons.png) no-repeat -258px -209px;
}

.service_text h4 {
   
    font-size: 14px;
    color: #333;
    padding: 3px 0;

}


.mod_help {
   
    height: 188px;
    border-bottom: 1px solid #ccc;
}

.mod_help dl {
   
    float: left;
    width: 200px;
    height: 144px;
    padding: 20px 50px;
}

.mod_help dl dt {
   
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
}

.mod_help dl:last-child {
   
    text-align: center;
}

.mod_copyright {
   
    text-align: center;
}

.mod_copyright ul {
   
    margin: 20px 115px 15px;
}
.mod_copyright ul li {
   
    float: left;
    
}

.mod_copyright ul li:nth-child(even) {
   
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 3px 12px 0;
}

.copyright {
   
    line-height: 20px;

}

首页样式

.main {
   
    width: 980px;
    height: 455px;
    margin-left: 220px;
    margin-top: 10px;
}
.focus {
   
    position: relative;
    float: left;
    width: 720px;
    height: 100%;
    /* background-color: bisque; */
}

.left a::after ,
.right a::after {
   
    font-family: "icomoon";
    position: absolute;
    top: -250px;
    width: 30px;
    height: 50px;
    background-color: rgba(0,0,0,.3);
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
   
}

.left a::after {
   
    content: "\e914";
    left: 0;
    border-radius: 0 25px 25px 0;
}

.right a::after{
   
    content: "\e915";
    right: 0;
    border-radius: 25px 0px 0px 25px;
}

.focus_dot ul {
   
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -40px;
    width: 90px;
    height: 10px;
    text-align: center;
    line-height: 10px;
    background-color: rgba(0,0,0,.3);
    border-radius: 5px;
}

.focus_dot ul li a{
   
    float: left;
    margin: 0 4px;
    width: 10px;
    height: 10px;
    background-color: rgba(0,0,0,.5);
    border-radius: 5px;
}

.focus_dot ul li a:active {
   
    background-color: #fff;
}

.newsflash {
   
    float: right;
    width: 250px;
    height: 100%;
}

.news {
   
    height: 165px;
    border: 1px solid #e4e4e4; 
}

.news_hd {
   
    height: 33px;
    line-height: 33px;
    padding: 0 15px;
    border-bottom: 1px dotted #e4e4e4;
}

.news_hd h5 {
   
    float: left;
    font-size: 14px;
}

.news_hd .mero {
   
    float: right;
}
.news_hd .mero::after {
   
    font-family: "icomoon";
    content: "\e915";
    margin-left: 5px;
}

.news_bd {
   
    padding-top: 5px;
    padding-left: 15px;
}

.news_bd ul li {
   
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.lifeservice {
   
    overflow: hidden;
    height: 209px;
    border: 1px solid #e4e4e4;
    border-top: 0;

}

.lifeservice ul {
   
    width: 252px;
}

.lifeservice ul li {
   
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}

.lifeservice ul li i {
   
    display: inline-block;
    width: 24px;
    height: 28px;
    background: url(../images/icons.png)no-repeat -19px -16px;
    margin-top: 12px;
}

.lifeservice ul li .i_img2 {
   
    background: url(../images/icons.png)no-repeat -80px -16px;
}

.lifeservice ul li .i_img3 {
   
    background: url(../images/icons.png)no-repeat -142px -16px;
}

.lifeservice ul li .i_img4 {
   
    background: url(../images/icons.png)no-repeat -206px -16px;
}

.lifeservice ul li .i_img5 {
   
    background: url(../images/icons.png)no-repeat -17px -87px;
}

.lifeservice ul li .i_img6 {
   
    background: url(../images/icons.png)no-repeat -80px -87px;
}

.lifeservice ul li .i_img7 {
   
    background: url(../images/icons.png)no-repeat -144px -88px;
}

.lifeservice ul li .i_img8 {
   
    background: url(../images/icons.png)no-repeat -206px -88px;
}

.lifeservice ul li .i_img9 {
   
    background: url(../images/icons.png)no-repeat -16px -159px;
}

.lifeservice ul li .i_img10 {
   
    background: url(../images/icons.png)no-repeat -79px -159px;
}

.lifeservice ul li .i_img11 {
   
    background: url(../images/icons.png)no-repeat -142px -156px;
}

.lifeservice ul li .i_img12 {
   
    background: url(../images/icons.png)no-repeat -206px -159px;
}
.bargain {
   
    margin-top: 5px;
}

/* 推荐模块 */
.recom {
   
    position: relative;
    height: 163px;
    background-color:#ebebeb;
    margin-top: 11px;
}
.recom_hd {
   
    position: relative;
    float: left;
    width: 205px;
    height: 163px;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}
.recom_hd h4 {
   
    position: absolute;
    left: 61px;
    font-size: 18px;
    color: #fff;
    margin-top: 10px;
    font-weight: 400;
}

.recom_bd ul li {
   
    float: left;
}

.recom_bd ul li:nth-child(-n+3)::after {
   
    position: absolute;
    top: 10px;
    content: '';
    height: 143px;
    width: 1px;
    background-color: #dddddd;
}


/* 猜你喜欢模块 */
.like {
   
    overflow: hidden;
    height: 262px;
    margin-top: 30px;
    background-color: #f9f9f9;
}
.like_hd {
   
    height: 30px;
   
}

.like_hd h4{
   
    float: left;
    font-size: 18px;
}
.like_hd span {
   
    float: right;
    margin-right: 20px;
}
.like_hd span a::after {
   
    font-family: "icomoon";
    content: "\e918";
    margin-left: 10px;
    font-size: 18px;
    vertical-align: middle;
}
.like_bd {
   
    height: 232px;
    border: 1px solid #ccc;
}

.like_bd ul {
   
    width: 1210px;
}

.like_bd ul li {
   
    float: left;
    width: 200px;
    height: 231px;
    margin-top: 20px;
}
.like_bd ul li p ,
.like_bd ul li span {
   
    margin-left: 30px;
    
}
.img {
   
    display: inline-block;
    width: 150px;
    height: 140px;
    margin-left: 20px;
    text-align: center;
    line-height: 140px;
}

.like_bd ul li a span {
   
    font-size: 14px;
    font-weight: 700;
    color: #df3033;
    margin-bottom: 10px;
}

.like_bd ul li a span i {
   
    font-size: 18px;
}

.like_bd ul li:nth-child(2n) {
   
    width: 1px;
    height: 62px;
    background-color: #ccc;
    margin-top: 160px;
}

/* 有趣区制作 */
.interesting {
   
    overflow: hidden;
    height: 432px;
    margin-top: 30px;
}
.interesting_hd {
   
    height: 30px;
    font-size: 18px;
}
.interesting_bd {
   
    height: 402px;
    border: 1px solid #ccc;
}
.bd_402 {
   
    position: relative;
    float: left;
    width: 402px;
    height: 401px;
    background-color: #b8bddd;
}
.bd_402 p {
   
    margin-top: 25px;
    margin-left: 46px;
    font-size: 16px;
    font-weight: 700;
    color: #3b468d;
}
/* .h5_img1 {
    position: absolute;
    top: 112px;
    right: 50px;
} */

.bd_227 {
   
    float: left;
    width: 227px;
    height: 401px;
    border-right: 1px solid #ccc;
}
.bd_227_top {
   
    position: relative;
    height: 246px;
    padding: 0 18px;
}
.bd_227_hd {
   
    height: 40px;
    border-bottom: 1px dashed #ccc;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}
.bd_227 .bd_227_font {
   
    height: 207px;
    padding-top: 68px;
}
.bd_227_font h4 {
   
    font-size: 16px;
    margin-bottom: 15px;
}
.bd_227top_img {
   
    position: absolute;
    top: 68px;
    right: 0;
}
.bd_227 a:hover:not(.notHover) {
   
    color: #333;
}
.bd_227_bottom {
   
    position: relative;
    height: 160px;
    border-top: 1px solid #ccc;
    padding: 0 18px;
}
.bd_227_font2 h4 {
   
    margin: 49px 0 15px 0px;
    font-size: 16px;
}
.bd_227bot_img {
   
    position: absolute;
    bottom: 8px;
    right: 0;
}
.bd_406 {
   
    float: left;
    width: 406px;
    height: 401px;
    border-right: 1px solid #ccc;
}
.bd_406_top {
   
    position: relative;
    height: 246px; 
}
.bd_406_hd {
   
    height: 40px;
    border-bottom: 1px dashed #ccc;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    margin: 0 18px;
}

.bd_406 .bd_406_font {
   
    height: 207px;
    padding-top: 68px;
    margin-left: 52px;
}
.bd_406_font h4 {
   
    font-size: 16px;
    margin-bottom: 15px;
}
.bd_406top_img {
   
    position: absolute;
    top: 68px;
    right: 0;
}
.bd_406 a:hover {
   
    color: #333;
}

.bd_406_bot {
   
    position: relative;
    overflow: hidden;
    width: 405px;
    height: 160px;
    border-top: 1px solid #ccc;
}
.bd_406_bot ul {
   
    width: 410px;
}
.bd_406_bot ul li {
   
    position: relative;
    float: left;
    height: 160px;
    width: 203px;
    border-right: 1px solid #ccc;
    padding-top: 50px;
    padding-left: 13px;
}
.bd_406_font1 h4 {
   
    font-size: 16px;
    padding-bottom: 15px;
}
.bd_406img1 {
   
    position: absolute;
    bottom: 0;
    right: 0;
}

.bd_162 {
    
    float: left;
    width: 162px;
    height: 401px;
    
}
.bd_162img {
   
    width: 162px;
    height: 400px;
}

/* 楼层区制作 */
.floor .box_hd {
   
    height: 30px;
    line-height: 30px;
    border-bottom: 2px solid #c81623;  
}

.box_hd h4 {
   
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #c81623;
}

.box_hd .box_right ul {
   
    float: right;
}
.box_hd .box_right ul li {
   
    float: left;
}
.box_hd .box_right ul li a {
   
    margin: 0 15px; 
}

.floor .w {
   
    margin-top: 30px;
}

.tab_contert {
   
    height: 360px;
    background-color: #f9f9f9;
}

.tab_list_item>div {
   
    float: left;
    
}

.col_209 {
   
    width: 209px;
    text-align: center;
}
.col_209 ul li {
   
    float: left;
    width: 86px;
    height: 33px;
    line-height: 33px;
    border-bottom: 1px solid #ededed;
    margin-right: 11px;
}

.col_209 ul {
   
    padding-left: 13px;
    padding-bottom: 25px;
}

.col_209 i img {
   
    margin-top: 25px;
}

.col_329 {
   
    width: 329px;
}

.col_220 {
   
    width: 220px;
    border-right: 1px solid #ccc;
}


.col_219 {
   
    width: 219px;
}

.bb {
   
    display: block;
    border-bottom: 1px solid #ccc;
}

.box-nva {
   
    padding-left: 15px;
    margin-top: 20px;
    height: 65px;
    background-color: #f7f7f7;
}



.box-nva ul li {
   
    float: left;
    margin-top: 13px;
    width: 94px;
    height: 40px;
    background-color: #f7f7f7;
    
}

.box-nva ul li:nth-child(even) {
   
    margin: 13px 12px;
    width: 1px;
    height: 40px;
    border-right: 1px dotted #ccc;
}

.box-nva ul li a {
   
    float: left;
    margin-top: 10px;
    width: 94px;
    height: 40px;
    background: url(../upload/logojinglingtu.png) no-repeat -2px -8px ;
}
.box-nva ul li .logo2 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -122px -9px;
}
.box-nva ul li .logo3 {
   
    margin-top: 0;
    background: url(../upload/logojinglingtu.png) no-repeat -245px -0px;
}
.box-nva ul li .logo4 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -361px -9px;
}
.box-nva ul li .logo5 {
   
    margin-left: 20px;
    background: url(../upload/logojinglingtu.png) no-repeat -506px -3px ;
}
.box-nva ul li .logo6 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -607px -9px ;
}
.box-nva ul li .logo7 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -727px -9px ;
}
.box-nva ul li .logo8 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -848px -9px ;
}
.box-nva ul li .logo9 {
   
    background: url(../upload/logojinglingtu.png) no-repeat -972px -9px ;
}
.box-nva ul li .logo10 {
   
    margin-left: 10px;
    background: url(../upload/logojinglingtu.png) no-repeat -1097px -9px ;
}

.box-nva2 {
   
    padding-left: 15px;
    margin-top: 20px;
    height: 65px;
    background-color: #f7f7f7;
}



.box-nva2 ul li {
   
    position: relative;
    float: left;
    margin-top: 13px;
    width: 94px;
    height: 40px;
    background-color: #f7f7f7;
    
}

.box-nva2 ul li:nth-child(even) {
   
    margin: 13px 12px;
    width: 1px;
    height: 40px;
    border-right: 1px dotted #ccc;
}

.box-nva2 ul li a {
   
    position: absolute;
    
    margin-top: 10px;
    width: 94px;
    height: 40px;
    background: url(../upload/logojinglingtu2.png) no-repeat -1px 0px ;
}
.box-nva2 ul li .shojilogo1 {
   
    left: 10px;
    bottom: 2px;
}
.box-nva2 ul li .shojilogo2 {
   
    left: 12px;
    bottom: 2px;
    background: url(../upload/logojinglingtu2.png) no-repeat -116px 0px;
}
.box-nva2 ul li .shojilogo3 {
   
    bottom: -3px;
    left: 8px;
    background: url(../upload/logojinglingtu2.png) no-repeat -236px -4px;
}
.box-nva2 ul li .shojilogo4 {
   
    bottom: -3px;
    left: 8px;
    background: url(../upload/logojinglingtu2.png) no-repeat -359px 0px;
}

.box-nva2 ul li .shojilogo5 {
   
    bottom: -3px;
    
    background: url(../upload/logojinglingtu2.png) no-repeat -469px 0px;
}

.box-nva2 ul li .shojilogo6 {
   
    bottom: -3px;
    
    background: url(../upload/logojinglingtu2.png) no-repeat -590px 0px;
}

.box-nva2 ul li .shojilogo7 {
   
    bottom: -3px;
  
    background: url(../upload/logojinglingtu2.png) no-repeat -707px 0px;
}

.box-nva2 ul li .shojilogo8 {
   
    bottom: -3px;
    
    background: url(../upload/logojinglingtu2.png) no-repeat -827px 0px;
}
.box-nva2 ul li .shojilogo9 {
   
    bottom: -3px;
    background: url(../upload/logojinglingtu2.png) no-repeat -948px 0px;
}
.box-nva2 ul li .shojilogo10 {
   
    bottom: -3px;
    background: url(../upload/logojinglingtu2.png) no-repeat -1070px 0px;
}

产品列表模块

/* 列表页样式 */
.nav {
   
    overflow: hidden;
}
.sk {
   
    position: absolute;
    top: 40px;
    left: 185px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px;
}
.sk_list {
   
    float: left;
}

.sk_list ul li {
   
    float: left;
    padding: 0 25px;
    font-size: 16px;
    line-height: 47px;
    font-weight: 700;
    color: #000;
}
.sk_con {
   
    float: left;
}
.sk_con ul li {
   
    float: left;
    padding: 0 25px;
    font-size: 14px;
    line-height: 49px;
}
.sk_con ul li:last-child::after {
   
    font-family: "icomoon";
    content: "\e913";
}

.sk_bd ul {
   
    float: left;
    margin-right: 13px;
}

.sk_bd ul:nth-child(4n) {
   
    margin-right: 0;
}
.sk_bd ul li {
   
    position: relative;
    width: 290px;
    height: 460px;
    border: 1px solid transparent;  
}
.sk_bd ul li:hover {
   
    border: 1px solid #b1191a;
}
.sk_bd ul li img {
   
    width: 100%;
    text-align: center;
}
.sk_bd ul li p {
   
    margin: 0 10px;
    font-size: 14px;
   
}
.sk_bd ul li .price {
   
    margin-left: 10px;
    font-size: 14px;
}
.sk_bd ul li .price i {
   
    font-size: 22px;
    color: #e60012;
}
.sk_bd ul li .price em {
   
    color: #b8b8b8;
    text-decoration: line-through;
}
.stock p {
   
    float: left;
}

.stock_in {
   
    float: left;
    margin-top: 5px;
    width: 132px;
    height: 12px;
    border: 1px solid #ed282e;
    border-radius: 6px;
} 

.stock_in .stock_in2 {
   
    width: 100px;
    height: 12px;
    background-color: #ed282e;
    border-radius: 6px;
    transition: all 1s;
}

.stock_in:hover .stock_in2 {
   
    width: 100%;
    background-color: #b1191a;
}

.fonter {
   
    position: absolute;
    bottom: 0;
    width:100%;
    height: 50px;
    line-height: 50px;
    background-color: #c81523;
    text-align: center;
    font-size: 22px;
    color: #fff;
}

.fonter:hover:active {
   
    padding-top: 4px;
    padding-bottom: 3px;
    background-color: #e60012;
}

.box_fixed {
   
    position: fixed;
    overflow: hidden;
    top: 700px;
    right: 260px;
    width: 68px;
    height: 137px;
    text-align: center;
    line-height: 68px;
    
}
.fixed_top::after {
   
    position: absolute;
    top: -13px;
    left: 41%;
    font-family: "icomoon";
    content: "\e916";
    color: #fff;
}
.fixed_top,
.fixed_list {
   
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    background-color: #b1191a;
    cursor: pointer;
    color: #fff;
}

.fixed_top {
   
    margin-bottom: 1px;
}

.fixed_top:hover {
   
    color: #fff;
    
}

.fixed_top:active ,
.fixed_list:active {
   
    background-color: brown;
}

注册页样式

.w {
   
    width: 1200px;
    margin: 0 auto;
}
header {
   
    height: 84px;
    border-bottom: 2px solid #b31610;
}
.logo {
   
    padding-top: 15px;
}
.registerarea {
   
    height: 522px;
    border: 1px solid #dddddd;
    margin-top: 20px;
    line-height: 40px;
}
.registerarea h3 {
   
    height: 40px;
    padding:  0 10px;
    border-bottom: 1px solid #dfdfdf;
    background-color: #ececec;
    font-size: 18px;
    font-weight: 400;
}
.logoi {
   
    float: right; 
    font-size: 14px;
}
.logoi a {
   
    color: #b31610;
}
.reg_form {
   
    width: 600px;
    margin: 52px auto 0;

}
.reg_form ul li