first commit
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#bread_crumb{
|
||||
height: 44px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#bread_crumb .bread_center{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
#bread_crumb .bread_center a{
|
||||
color: black;
|
||||
}
|
||||
#detail{
|
||||
width: 1200px;
|
||||
height: 400px;
|
||||
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#detail .detail_image{
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
flex: 1;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
#detail .detail_image img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#detail .detail_price{
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
flex: 2;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
#detail .detail_price h3{
|
||||
font-size: 30px;
|
||||
color: #005aa0;
|
||||
}
|
||||
#detail .detail_price .goods_price{
|
||||
width: 80%;
|
||||
height: 80px;
|
||||
background: #f5f5f5;
|
||||
margin:10px 0;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
#detail .detail_price .goods_price .ori_price{
|
||||
font-size: 15px;
|
||||
color:gray;
|
||||
position: relative;
|
||||
}
|
||||
em{
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top:10px;
|
||||
}
|
||||
.yuan{
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
margin-left: 3px;
|
||||
}
|
||||
#detail .goods_count{
|
||||
margin-top: 20px;
|
||||
margin-left: 5px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#detail .goods_count input{
|
||||
border: 1px solid gray;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#detail .goods_buy{
|
||||
margin-top: 50px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
#detail .goods_buy input{
|
||||
padding: 5px 10px;
|
||||
color: whitesmoke;
|
||||
background: #f40;
|
||||
border: none;
|
||||
}
|
||||
#introduce{
|
||||
width: 1200px;
|
||||
min-height: 300px;
|
||||
background: red;
|
||||
margin: 20px auto;
|
||||
}
|
||||
#introduce h3{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background: whitesmoke;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
#footer{
|
||||
text-align: center;
|
||||
height: 300px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#footer .copyright{
|
||||
margin-top: 20px;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header{
|
||||
height: 210px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#header .header_top{
|
||||
height: 36px;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
|
||||
#header .header_top_center{
|
||||
width: 1200px;
|
||||
height: 36px;
|
||||
margin: 0 auto;
|
||||
line-height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_left{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: left;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center .h_top_right{
|
||||
color: gray;
|
||||
font-size: 13px;
|
||||
float: right;
|
||||
height: 36px;
|
||||
}
|
||||
#header .header_top_center.h_top_right a{
|
||||
color: #6c6c6c;
|
||||
margin: 0 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#header .header_center{
|
||||
height: 124px;
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_logo{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_search{
|
||||
width: 815px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .header_center .h_c_code{
|
||||
width: 190px;
|
||||
height: 124px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header .h_c_logo img{
|
||||
width: 200px;
|
||||
height:120px;
|
||||
margin-top:4px ;
|
||||
}
|
||||
|
||||
#header .h_c_search form{
|
||||
width: 650px;
|
||||
height: 40px;
|
||||
margin-top: 40px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
#header .h_c_search form .t_input{
|
||||
width: 555px;
|
||||
height: 40px;
|
||||
border: 2px solid black;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#header .h_c_search form .t_button{
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
border: 1px solid gray;
|
||||
float: right;
|
||||
color: orange;
|
||||
margin-left: 5px;
|
||||
|
||||
|
||||
}
|
||||
#header .h_c_search .hot{
|
||||
margin-left: 80px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#header .h_c_search .hot a{
|
||||
color: #6c6c6c;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#header .h_c_search .hot a:hover{
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
#header .h_c_code img{
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
width: 140px;
|
||||
height: 110px;
|
||||
}
|
||||
#header .nav{
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
margin: 0 auto;
|
||||
background: darkslategrey;
|
||||
line-height: 44px;
|
||||
border-radius:8px 8px 8px 8px ;
|
||||
}
|
||||
#header .nav ul{
|
||||
list-style: none;
|
||||
width: 1200px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
}
|
||||
#header .nav ul li{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header .nav ul li a{
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#header .nav ul li a:hover{
|
||||
font-size: 25px;
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
background: #f5f5f5;
|
||||
}
|
||||
a{
|
||||
text-decoration:none ;
|
||||
}
|
||||
|
||||
/*Banner*/
|
||||
#ad{
|
||||
width:1060px;
|
||||
height:600px;
|
||||
position:relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/*取消小圆点*/
|
||||
#ad li{
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#ad_img li{
|
||||
display:none;
|
||||
}
|
||||
|
||||
/*角落显示数字的ul*/
|
||||
#ad_num{
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
bottom:100px;
|
||||
right:10px;
|
||||
color:#FFF;
|
||||
}
|
||||
/*数字的浮动*/
|
||||
#ad_num li{
|
||||
border:#FFF solid 1px;
|
||||
float:left;
|
||||
margin:0px 5px;
|
||||
padding:3px 10px;
|
||||
}
|
||||
.numsover{
|
||||
background-color:#F08080;
|
||||
color:#F00;
|
||||
}
|
||||
|
||||
/*精选图片*/
|
||||
#ms{
|
||||
width: 1920px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
#ms .ms_top{
|
||||
width: 500px;
|
||||
height: 55px;
|
||||
/*-webkit-background-size: 1200px 55px;*/
|
||||
background-size: 1200px 55px;
|
||||
line-height: 55px;
|
||||
margin-left: 2px;
|
||||
border-top-right-radius: 20px;
|
||||
margin-top: 20px;
|
||||
background: gray;
|
||||
|
||||
}
|
||||
#ms .ms_top span{
|
||||
color: whitesmoke ;
|
||||
|
||||
}
|
||||
|
||||
#ms .ms_top span:first-child{
|
||||
font-weight: bold;
|
||||
margin: 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
#ms .ms_body{
|
||||
|
||||
width: 1900px;
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#ms .ms_body li{
|
||||
margin: 10px auto;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid darkgray;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
}
|
||||
#ms .ms_body li p.name{
|
||||
padding-left: 10px;
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
}
|
||||
#ms .ms_body li .photoby{
|
||||
padding-left: 400px;
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
#ms .ms_body img{
|
||||
width: 500px;
|
||||
height: 350px;
|
||||
cursor: pointer;
|
||||
transition: all 0.6s;
|
||||
}
|
||||
#ms .ms_body img:hover{
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
#ms .ms_body li .photoby img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/*设置图片左边*/
|
||||
|
||||
#ms .ms_body_left ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*设置图片中间*/
|
||||
|
||||
#ms .ms_body_center ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*设置页面右边*/
|
||||
|
||||
#ms .ms_body_right ul{
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
padding-left: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#header{
|
||||
height: 88px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#header .h_center{
|
||||
width: 1200px;
|
||||
height: 88px;
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
#header .h_center img{
|
||||
float: left;
|
||||
height: 80px;
|
||||
width: 120px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#header .h_center p{
|
||||
float: left;
|
||||
text-align: center;
|
||||
width: 880px;
|
||||
font-size: 10px;
|
||||
border: 1px solid yellow;
|
||||
margin-top: 20px;
|
||||
margin-left: 80px;
|
||||
color: blue;
|
||||
background: pink;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#login_body{
|
||||
height: 600px;
|
||||
background-attachment: scroll;
|
||||
background-image: url("../images/banner/2.jpg");
|
||||
background-position: center;
|
||||
background-size: 1000px 600px;
|
||||
}
|
||||
#login_body .login_b_center{
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
#login_body .login_bg{
|
||||
width: 350px;
|
||||
height: 351px;
|
||||
background: rgba(255,255,255,0.9);
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 80px;
|
||||
padding: 30px;
|
||||
|
||||
}
|
||||
|
||||
#login div{
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#login span{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
background: red;
|
||||
float: left;
|
||||
border: 1px gray;
|
||||
}
|
||||
#login .userName span{
|
||||
background-image: url("../images/商城素材/userName_Icon.png");
|
||||
}
|
||||
#login .password span{
|
||||
background-image: url("../images/商城素材/password_Icon.png");
|
||||
}
|
||||
|
||||
#login input{
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
#login .login_btn input{
|
||||
background-color: coral;
|
||||
width: 100px;
|
||||
border: none;
|
||||
color: whitesmoke;
|
||||
float: left;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#reset{
|
||||
/*注册按钮*/
|
||||
margin-left: 40px;
|
||||
background: coral;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
#login .login_btn a:hover{
|
||||
color: blue;
|
||||
float: left;
|
||||
|
||||
}
|
||||
#login .forgot_password{
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
a{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/*设置div样式的整体布局*/
|
||||
.page-icon{
|
||||
margin:20px 0 0 0;/*设置距离顶部20像素*/
|
||||
font-size:0;/*修复行内元素之间空隙间隔*/
|
||||
text-align:center;/*设置内容居中显示*/
|
||||
}
|
||||
|
||||
/*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
|
||||
.page-icon a,.page-disabled,.page-next{
|
||||
border:1px solid #ccc;
|
||||
border-radius:3px;
|
||||
padding:4px 10px 5px;
|
||||
font-size:14PX;/*修复行内元素之间空隙间隔*/
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
/*对 a 标签进行样式布局 */
|
||||
.page-icon a{
|
||||
text-decoration:none;/*取消链接的下划线*/
|
||||
color:#005aa0;
|
||||
}
|
||||
|
||||
.page-current{
|
||||
color:#ff6600;
|
||||
padding:4px 10px 5px;
|
||||
font-size:14PX;/*修复行内元素之间空隙间隔*/
|
||||
}
|
||||
|
||||
.page-disabled{
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.page-next i,.page-disabled i{
|
||||
cursor:pointer;/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
|
||||
display:inline-block;/*设置显示的方式为行内块元素*/
|
||||
width:5px;
|
||||
height:9px;
|
||||
background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/
|
||||
}
|
||||
.page-disabled i{
|
||||
background-position:-80px -608px;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
.page-next i{
|
||||
background-position:-62px -608px;
|
||||
margin-left:3px;
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#reg_header{
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 10px orange;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_center{
|
||||
width: 1200px;
|
||||
height: 110px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
#reg_header .reg_h_left{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#reg_header .reg_h_left img{
|
||||
height: 100px;
|
||||
width: 120px;
|
||||
float: left;
|
||||
}
|
||||
#reg_header .reg_h_left h3{
|
||||
float: left;
|
||||
margin-top: 80px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#reg_header .reg_h_right{
|
||||
height: 110px;
|
||||
flex: 1;
|
||||
padding-top: 50px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
|
||||
.reg_back {
|
||||
/*设置整体的尺寸、背景色、边距等*/
|
||||
width: 950px;
|
||||
height: 550px;
|
||||
border: 8px solid #eeeeee;
|
||||
background: white;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.reg_left {
|
||||
/*设置左浮动和外边距*/
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.reg_left > p:first-child {
|
||||
/*设置段落（新用户注册）颜色和字体大小*/
|
||||
color: gray;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_left > p:last-child {
|
||||
/*设置段落（USER REGISTER）颜色和字体大小*/
|
||||
color: #A6A6A6;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.reg_center {
|
||||
/*设置中间的各种输入框等*/
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.reg_right {
|
||||
/*设置右边段落浮动和外间距*/
|
||||
float: right;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.reg_right > p:first-child {
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.reg_right p a {
|
||||
/*设置超链接（立即登录）颜色*/
|
||||
color: crimson;
|
||||
}
|
||||
|
||||
.td_left {
|
||||
/*设置表单中字体对齐方式和宽度、高度*/
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.td_right {
|
||||
/*设置输入框内边距*/
|
||||
width: 450px;
|
||||
height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#username ,#password,#Email, #rename ,#Telphone,#Birthday,#checkcode,#repassword{
|
||||
/*设置输入框大小和边框*/
|
||||
width: 250px;
|
||||
height: 30px;
|
||||
border: 1px solid #A4A4A4;
|
||||
/* 设置边框为圆角 */
|
||||
border-radius: 8px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#checkcode{
|
||||
/*验证码宽度*/
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
/*不设成inline-block无法旋转*/
|
||||
display: inline-block;
|
||||
}
|
||||
/*=========================设置 验证码===============================*/
|
||||
|
||||
.code {
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
float: left;
|
||||
background:url("../images/code_bg.png");
|
||||
}
|
||||
.change{
|
||||
/*margin-bottom: 0;*/
|
||||
padding-top: 500px;
|
||||
}
|
||||
.confirm{
|
||||
width: 150px;
|
||||
height: 25px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*==================================================================*/
|
||||
|
||||
#btn_sub{
|
||||
/*注册按钮*/
|
||||
margin-left: 100px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid gray ;
|
||||
}
|
||||
|
||||
#reset{
|
||||
/*注册按钮*/
|
||||
margin-left: 40px;
|
||||
background: orangered;
|
||||
color: whitesmoke;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid gray ;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.error{
|
||||
color:red;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
|
||||
}
|
||||
#td_sub{
|
||||
padding-left: 150px;
|
||||
}
|
||||
Reference in New Issue
Block a user