java写的小米商城_开发”小米商城官网首页”（静态页面）

最新推荐文章于 2023-12-19 12:57:46 发布

梦猫人读书

最新推荐文章于 2023-12-19 12:57:46 发布

阅读量383

点赞数

文章标签： java写的小米商城

本文链接：https://blog.csdn.net/weixin_31359991/article/details/114708192

版权

padding:0;

margin:0;

}

.wrap{

width:100%;

overflow: hidden;/*有父子关系的margin 防止外边距合并*/background-color: rgba(245,245,245,0.98); /*设置透明度*/}

a{text-decoration: none;}

ul>li{ list-style: none;} /*儿子选择器*/.topheader{

height: 40px;

line-height:40px;/*行高*/font-size:12px;

background-color: #333;

}

.topheader a{

color:#b0b0b0;/*字体颜色*/}

.topheader a:hover{/*伪类选择器 hover鼠标悬停时超链接状态*/color: white;

}

.topheader .sep{

color: #424242;

margin:0 2px; /*外边距*/}

.container{

width: 1225px; overflow: hidden;margin:0auto;

}

.topheader-navi{float: left;

}

.topheader-cart,.topheader-info{float: right

}

.topheader-cart .icon{ /*给购物车添加背景图片*/background: url("../images/shop1.png") 3px 24px;

width: 35px;

height: 22px;

display: inline-block;/*行内块元素同时具有行内和和块级元素，和其他元素在一行，距离都可以设置*/position: relative;

top:6px;

}

.topheader-cart a{/*display: block; !*块级元素,每个块级元素都从新的一行开始，距离都可设置*!*/margin-left: 15px;

padding:015px;

}

.topheader-cart a:hover{

background-color: white;

color: rgba(255,103,0,0.98);

}

.header{

height: 100px;

line-height: 100px;

overflow: hidden;

}

.header-logo,.header-navi{float: left;

height: 100px;

}

.header-logo .logo{

margin-right: 10px;

margin-top: 20px;}

.header-search{float: right;

position: relative;

}

.header-navi ul li{float: left;

margin:0auto;

padding:010px;

color: black

}

.header-navi ul li a{

color: #333;

font-size: 16px;

}

.header-navi ul li a:hover{

color: rgba(255,103,0,0.98);

}

.header-search input[type="text"]{

height: 44px;

width: 243px;

border: 1px solid #e0e0e0;

margin-right: -1px;

}

.header-search input[type="text"]:hover{

border: 1px solid #b0b0b0;

}

.header-search input[type="text"]:focus{ /*获取焦点时的样式*/outline:none;/*轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用*/}

.hot-words{

font-size: 12px;

position: absolute;

right: 40px;}

.hot-words a{

background-color: #eee;

color: #757575;

padding: 3px 6px;

position: relative;

top: 2px;

right: 16px;

}

.hot-words a:hover{

background-color: rgba(255,103,0,0.98);

color: white;

}

.header-search input[type="submit"]{

height: 45px; width: 45px;

background: url("../images/search1.png") no-repeat 3px 6px;

border: 1px solid #e0e0e0;

position: relative;

top: 17px;

cursor: pointer;/*设置鼠标形状, 变成小手了*/left:-5px;

}

.header-search input[type="submit"]:hover{

background: url("../images/search2.png") no-repeat 8px 8px;

background-color: rgba(255,107,0,0.98);

}

.content .con-up .up-l{

background-color: rgba(89,89,89,0.9);

width: 240px;

position: absolute;

}

.con-up ul:before,.con-up ul:after{ /*用子盒子来填充父盒子解决浮动产生的问题*/content:"";

height: 26px;

display: block;

}

.con-up ul li{

padding: 10px 25px;

}

.con-up ul li:hover{

background-color: rgba(255,103,0,0.98);

}

.con-up ul li a{

color: white;}

.con-up ul li span{ /*设置空格*/

float: right;

color: white;}

.con-down{

overflow: hidden;

padding-top: 10px;

}

.con-down .down-l{

width: 240px;

overflow: hidden;

background-color: rgba(95,87,80,1);float: left;

}

.con-down ul{

overflow: hidden;

}

.con-down .down-l ul li{float: left;

width: 78px;

height: 83px;

border: 1px solid #665e57;

text-align: center; /*两端居中*/}

.down-l ul li p{

color: #b0b0b0;

position: relative;

font-size: 15px;

}

.down-l ul li p:hover{

color: white;

}

.down-l .p-1{

background: url("../images/手机.png") no-repeat center;