知识点记录
1.添加网页页签图标，在 head内使用 link标签，语法格式：
2.clear属性，定义元素的左侧或右侧不允许浮动的元素
属性值：left（左侧不与允许浮动元素）、right（右侧不允许浮动元素）、both（两侧均不允许浮动元素）、none（默认值，允许浮动元素出现在两侧）
3.background语法，background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit；
bg-position属性，设置背景图像的起始位置，雪碧图定位时的常用方式，语法格式 background-position: horizontal vertical
水平值（horizontal）：percentage | length | left | center | right
垂直值（vertical）：percentage | length | top | center | bottom
左上角是0% 0%，右下角是100% 100%，默认是0% 0%，如果只设置一个值，则另一个值默认为50%
bg-size属性，设置背景图片的大小，语法格式 background-size: percentage | length percentage | length 或者 cover 或者contain
第一个值设置宽度，第二个值设置高度，只设置一个值时，另一个值默认自动（auto）
cover属性值，表示保持图片的纵横比例，并缩放成适合背景定位区域的最小尺寸
contain属性值，表示保持图片的纵横比例，并缩放成适合背景定位区域的最大尺寸
bg-origin属性，指定background-position属性应该是相对位置，如果background-attachment属性值为“fixed”，则这个属性没有任何效果
padding-box，背景图像填充框的相对位置
border-box，背景图像边界框的相对位置
content-box，背景图像内容框的相对位置
background-attachment属性，设置背景图像是否固定或随页面其余部分滚动，语法格式 background-attachment: scroll | fixed | local
scroll，默认值，表示随页面其他部分滚动
fixed，位置固定不动
local，图像随滚动元素滚动
4.outline（轮廓）属性，绘制于元素边框外围的一条线，可以起到突出元素的作用，outline不是元素的一部分，元素的大小尺寸不包括outline
包括属性：outline-color（轮廓颜色）、outline-style（轮廓样式）、outline-width（轮廓宽度）
简写outline属性可以在一个声明中设置全部属性值，按顺序设置
outline-style属性值，none（默认，无）、dotted（点状）、dashed（虚线）、solid（实线）、double（双实线）
outline-width属性值，thin（细轮廓）、medium（默认，中等轮廓）、thick（粗轮廓），或设置具体的 length值
outline-offset属性，规定轮廓与边框的距离，属性值为 length
5.box-sizing属性，规定元素的高度和宽度是否包含边框和内边距，属性值：
content-box，元素的宽度和高度只应用于元素的内容，即不包括内边距和外边框
border-box，元素的宽度和高度包含了内边距和外边框的尺寸，将设定的宽度和高度减去内边距和外边框才能得到元素内容的尺寸
/*##########CSS代码########*/
body{
margin: 0px;
padding: 0px;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>top导航栏设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.mi_nav{
width: 100%;
height: 40px;
font-size: 12px;
background: #333;
position: relative;
}
/*top导航栏左菜单div设置*/
.nav_left{
width: 705px;
margin-left: 178.5px;
float: left;
}
/*top导航栏菜单ul设置*/
.nav_left ul,.nav_right ul{
margin: 0px;
padding: 0px;
}
/*top导航栏菜单li设置*/
.nav_left ul>li,.nav_right ul>li{
line-height: 40px; /*属性不能继承*/
float: left; /*属性不能继承*/
list-style-type: none;
}
/*top导航栏菜单a标签设置*/
.nav_left ul>li>a,.nav_right ul>li>a{
display: inline-block;
color: #b0b0b0;
text-decoration: none;
/*font-size: 12px;*/
}
/*top导航栏菜单span设置*/
.nav_left ul>li>span,.nav_right ul>li>span{
display: inline-block;
margin:0 7.5px;
color: #424242;
}
/*top导航栏右菜单div设置*/
.nav_right{
width: 271px;
margin-right: 178.5px;
float: right;
}
/*top导航栏菜单鼠标悬停公共事件设置，要排在特定事件之前*/
.mi_nav a:hover{
color: #ffffff;
}
/*top导航栏右菜单购物车设置*/
.cart{
width: 120px;
height: 40px;
background-color:#424242;
text-align: center;
margin-left: 20px;
position: relative;
}
/*top导航栏右菜单购物车a标签设置*/
.cart a{
width: 120px;
line-height: 40px;
z-index: 10;
}
/*top导航栏右菜单购物车iconfont设置*/
.cart i{
margin-right: 5px;
}
/*top导航栏右菜单cart_hidden设置*/
.cart_hidden{
width: 316px;
height: 100px;
line-height: 100px;
margin-top: 0;
color: #424242;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.15); /*四周都有阴影？*/
position: absolute;
right: 178.5px;
top: 40px;
display: none;
transition: all 0.5s; /*没有过渡效果？？？*/
}
/*top导航栏右菜单购物车鼠标悬停事件设置*/
.cart:hover .cart_hidden{
display: block;
}
.cart:hover{
background-color: #ffffff;
}
.cart:hover a{
color: #ff6700;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>第二层导航菜单设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*sub菜单栏整体设置*/
.sub_nav{
width: 100%;
height: 100px;
font-size: 16px;
background-color: #ffffff;
}
/*logo div元素设置*/
.logo{
width: 55px;
height: 55px;
background-color: #ff6700;
margin: 22.5px 0px 22.5px 178.5px;
float: left;
background-image: url("../images/mipic/mi-logo.png");
transition: all 1s; /*过渡属性未生效！！！*/
}
.logo:hover {
background-image: url("../images/mipic/mi-home.png");
}
/*menu div设置*/
.menu{
width: 861px;
height: 100px;
line-height: 100px;
float: left;
}
.menu ul{
width: 861px;
margin: 0;
padding: 0;
float: left;
}
.menu li{
list-style-type: none;
padding: 0 10px;
float: left;
}
.menu li>a{
font-size: 16px;
color: #333333;
text-decoration: none;
}
.menu li:hover>a{
color: #ff6700;
}
.doodle{
width: 165px;
height: 100px;
line-height: 100px;
/*在HTML中通过 img标签也可以引用gif图像*/
background-image: url("../Images/mipic/b06819007feedbea62aedaa3089633d2.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
/*search div设置*/
.search{
width: 300px;
height: 50px;
margin-top: 25px;
float: left;
}
.search input{
width: 225px; /*宽度不包含边框border和内边距padding*/
height: 48px;
font-size: 14px;
line-height: 50px;
padding: 0px 10.5px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
float: left;
border-right: none;
transition: all .3s;
}
.search button{
width: 52px; /*宽度包含边框border和内边距padding*/
height: 50px;
font-size: 24px;
color: #616161;
padding: 0px;
border: 1px solid #e0e0e0;
background-color: #ffffff;
float: left;
transition: all .3s;
}
/*search鼠标悬停事件设置*/
.search input:hover{
border: 1px solid #b0b0b0;
border-right: none;
}
.search input:hover+button{
border: 1px solid #b0b0b0;
}
.search button:hover{
background-color: #ff6700;
color: #ffffff;
font-weight: bold;
cursor: pointer;
}
/*search input下拉隐藏搜索推荐设置*/
.search_hidden{
width: 246px;
height: 240px;
background-color: #ffffff;
border: 1px solid #ff6700;
border-top: none;
float: left;
display: none;
}
.search_hidden ul{
margin: 0;
padding: 0 0 0 15px;
}
.search_hidden li{
list-style-type: none;
padding: 5px 0;
}
.search_hidden li>a,.search_hidden li>a>pre{
font-family: sans-serif;
font-size: 14px;
font-weight: lighter;
text-decoration: none;
color: #333333;
margin: 0;
padding: 0;
}
/*search鼠标聚焦事件设置*/
.search input:focus{
border: 1px solid #ff6700;
border-right: none; /*如何在光标聚焦时清空placeholder内容？*/
}
.search input:focus+.iconfont{
border: 1px solid #ff6700;
}
.search input:focus+.search_hidden{
display: block; /*鼠标事件没有生效？*/
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>第二层导航菜单鼠标悬停事件设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.product_hidden{
width: 100%;
height: 233px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 3px rgba(0,0,0,.15);
position: absolute;
left: 0px;
display: none;
transition: all .5s; /*过渡属性未生效！！！*/
z-index: 8;
}
.menu_product:hover>.product_hidden{
display: block;
}
.product_hidden>div{
width: 207px;
height: 233px;
text-align: center;
float: left;
}
.product_hidden>div .img_div{
width: 207px;
height: 110px;
float: left;
margin: 30px 0;
border-right: 1px solid #e0e0e0;
}
.product_hidden>div>h3,.product_hidden>div>span{
display: inline-block;
width: 207px;
height: 15px;
font-size: 14px;
line-height: 15px;
text-align: center;
color: #666666;
margin: 5px 0;
font-weight: normal;
float: left;
}
.product_hidden>div>span{
color: #ff6700;
}
.product_hidden>div:first-child{
margin-left: 175px;
}
.product_hidden>div:last-child .img_div{
border-right: none;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>轮播图和分类列表设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*轮播图carousel设置*/
.carousel{
width: 1226px;
height: 460px;
margin: 0 178.5px;
background-image: url("../Images/mipic/carousel01.jpg");
background-size: cover;
animation: carousel 20s infinite alternate; /*轮播图切换很生硬？？*/
position: relative;
}
@-webkit-keyframes carousel {
0%{
background-image: url("../Images/mipic/carousel01.jpg");
}
25%{
background-image: url("../Images/mipic/carousel02.jpg");
}
50%{
background-image: url("../Images/mipic/carousel03.jpg");
}
75%{
background-image: url("../Images/mipic/carousel04.jpg");
}
100%{
background-image: url("../Images/mipic/carousel05.jpg");
}
}
/*商品类别列表categorylist设置*/
.categorylist{
width: 234px;
height: 460px;
background-color: rgba(105,101,101,.6);
padding: 20px 0;
box-sizing: border-box;
position: relative;
}
.categorylist>ul{
padding: 0;
margin: 0;
}
.categorylist li{
width: 234px;
height: 42px;
line-height: 42px;
list-style-type: none;
padding-left: 30px;
box-sizing: border-box;
cursor: pointer;
}
.categorylist li>a{
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
float: left;
}
.categorylist li>i{
color: #ffffff;
font-size: 12px;
font-weight: bolder;
float: right;
position: absolute;
right: 20px;
}
/*商品类别菜单鼠标悬停事件设置*/
.categorylist_hidden{
width: 992px;
height: 460px;
background-color: #ffffff;
box-shadow: 3px 5px 10px rgba(0,0,0,.2);
float: right;
position: absolute;
left: 234px;
top: 0;
display: none;
z-index: 7;
transition: all .5s; /*过渡属性未生效！！！*/
}
.categorylist li:hover{
background-color: #ff6700;
}
.categorylist li:hover>.categorylist_hidden{
display: block;
}
/*轮播图手动切换图片设置*/
.backward,.forward{
width: 41px;
height: 69px;
background-image: url("../Images/mipic/icon-slides.png");
position: absolute;
top: 195.5px;
cursor: pointer;
}
.backward{
left: 234px;
background-position: -83px 0;
}
.forward{
right: 0;
background-position: -124px 0;
}
.backward:hover{
background-position: 0 0;
}
.forward:hover{
background-position: -42px 0;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米advert广告位设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.advert{
width: 1226px;
height: 170px;
margin: 14px 178.5px;
}
.advert>div{
width: 234px;
height: 170px;
background-color: #665e57;
float: left;
padding: 0;
}
.advert ul{
width: 234px;
height: 170px;
margin: 0;
padding: 0;
}
.advert ul>li{
width: 77px;
height: 84px;
list-style-type: none;
float: left;
}
.advert ul>li:nth-child(1),.advert ul>li:nth-child(2),.advert ul>li:nth-child(3){
border-bottom: 1px solid #666066;
}
.advert ul>li:nth-child(2),.advert ul>li:nth-child(5){
border-right: 1px solid #666066;
border-left: 1px solid #666066;
}
.advert ul>li>a{
display: inline-block;
width: 77px;
height: 36px;
font-size: 12px;
text-decoration: none;
text-align: center;
color: rgba(255,255,255,.7);
padding: 24px 0;
transition: all .5s;
}
.advert ul>li>a>img{
width: 24px;
height: 24px;
opacity: 0.7;
transition: all .5s;
}
.advert>img{
width: 316px;
height: 170px;
float: left;
margin-left: 14.66px;
cursor: pointer;
}
/*advert图标广告位鼠标悬停效果设置*/
.advert ul>li>a:hover{
color: rgba(255,255,255,1);
}
.advert ul>li>a:hover>img{
opacity: 1;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米闪购专区flashSale设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.page_down{
width: 100%;
background-color: #f5f5f5;
margin-top: 30px;
overflow: hidden;
}
/*小米闪购头标题设置*/
.flashsale{
width: 1226px;
height: 545px;
margin: 0 178.5px;
padding: 0;
}
.flashsale_head{
width: 100%;
height: 58px;
}
.flashsale_head>h2{
margin: 0;
line-height: 58px;
font-weight: lighter;
float: left;
}
.flashsale_head>div{
width: 72px;
height: 24px;
float: right;
margin: 24px 0 10px;
}
.flashsale_head button{
display: inline-block;
width: 36px;
height: 24px;
font-size: 14px;
font-weight: bolder;
color: #9f9f9f;
background-color: rgba(0,0,0,0);
margin: 0;
padding: 0;
border: 1px solid #e0e0e0;
float: left;
cursor: pointer;
}
.flashsale_head button:first-child{
border-right: none;
}
.flashsale_head button:hover{
color: #ff6700;
}
/* 小米闪购中间内容部分设置 */
.flashsale_mkt{
width: 1226px;
height: 340px;
}
.flashsale_mkt>div{
width: 234px;
height: 339px;
background-color: rgba(255,255,255,1);
margin-left: 14px;
float: left;
cursor: pointer;
}
.flashsale_mkt>div:first-child{
margin-left: 0;
border-top: 1px solid rgba(255,0,0,0.6);
}
.flashsale_mkt>div:nth-child(2){
border-top: 1px solid rgba(0,128,0,.6);
}
.flashsale_mkt>div:nth-child(3){
border-top: 1px solid rgba(255,165,0,.7);
}
.flashsale_mkt>div:nth-child(4){
border-top: 1px solid rgba(34,139,34,.3);
}
.flashsale_mkt>div:nth-child(5){
border-top: 1px solid rgba(0,0,255,.5);
}
.flashsale_product{
width: 168px;
height: 168px;
margin: 25px 33px;
}
.flashsale_product+h4,.items_right h4{
text-align: center;
color: #333333;
font-weight: normal;
font-size: 14px;
margin: 10px 0 5px;
}
.flashsale_product~p,.items_right p{
text-align: center;
color: #9f9f9f;
font-size: 12px;
font-weight: normal;
margin: 0 0 10px;
}
.flashsale_product~span,.items_right span{
display: inline-block;
width: 234px;
text-align: center;
color: #ff6700;
font-size: 14px;
font-weight: normal;
}
.flashsale_product~span>s,,.items_right span>s{
color: #9f9f9f;
}
.flashsale_foot,.phoneregion_foot{
margin: 20px 0;
cursor: pointer;
}
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>小米手机专区phoneregion设置<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*手机专区head部分设置*/
.phoneregion{
width: 1226px;
height: 812px;
margin: 15px 178.5px;
}
.phoneregion_head{
width: 1226px;
height: 58px;
margin: 0;
}
.phoneregion_head>h2{
line-height: 58px;
font-size: 22px;
color: #333333;
font-weight: lighter;
margin: 0;
float: left;
}
.phoneregion_head>div{
width: 92px;
height: 58px;
float: right;
}
.phoneregion_head>div>a{
display: inline-block;
line-height: 58px;
text-decoration: none;
font-size: 16px;
color: #333333;
float: left;
padding-left: 2px;
transition: all .3s;
}
.phoneregion_head>div i{
font-size: 20px;
font-weight: bolder;
color: rgba(51,51,51,.5);
margin-top: 20px;
transition: all .3s;
}
.phoneregion_head>div:hover a,.phoneregion_head>div:hover i{
color: #ff6700;
}
/*手机专区items内容设置*/
.phone_items{
width: 1226px;
height: 614px;
margin: 0;
}
.items_left{
width: 234px;
height: 614px;
float: left;
transition: all .5s;
}
.items_right{
width: 992px;
height: 614px;
float: left;
}
.items_right>div{
width: 234px;
height: 300px;
background-color: #ffffff;
margin-left: 14px;
margin-bottom: 14px;
float: left;
transition: all .5s;
}
.items_right>div>img{
margin: 0 17px;
}
.items_left:hover,.items_right>div:hover{
box-shadow: 3px 10px 10px rgba(0,0,0,.3);
transform: translate(0,-3px);
}
/*##########HTML代码########*/
小米商城 - 小米10 Pro、Redmi 10X、小米MIX Alpha，小米电视官方网站
-
小米手机
小米10 Pro
4999元起
小米10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元起
-
Redmi红米
RedmiK30 Pro系列
2699元起
RedmiK30 系列
1399元起
Redmi 10X 5G
1599元起
Redmi Note8
899元起
Redmi 9
799元起
Redmi 9A
499元起
-
电视
小米电视 65英寸OLED
12999元
Redmi智能电视 MAX98"
19999元
小米电视 60英寸
1899元
Redmi智能电视 X55
2166元
Redmi红米电视 70英寸R70A
2729元
小米壁画电视 65英寸
6999元
-
笔记本
小米10 Pro
4999元起
小米10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元起
小米游戏本
6499元起
-
家电
小米10 Pro
4999元起
小米10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元起
米家风冷对开门冰箱 483L
2288元
-
路由器
小米10 Pro
4999元起
小米10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元起
小米路由器 AC2100
229元
-
智能硬件
小米10 Pro
4999元起
小米10
3699元起
小米10 青春版 5G
1899元起
小米MIX Alpha
19999元起
小米小爱 触屏音响
199元起
- 服务
- 社区
小米闪购
小米多看电纸书 深灰
16G大内存 多看海量阅读资源
569元 599元
小米路由器4C 白色
300M单品 高增益4天线
59元 99元
RedmiBook14 i5 16G
全面实力 全“芯”超越
4699元 4999元
最生活浴巾 Air（4条装）
享用一条洁净好浴巾
169元 269元
手机
腾讯黑鲨3S
骁龙865处理器，122Hz刷新率
3999元起
Redmi 9A
5000MAh长循环大电量 6.53“英寸
499元起
小米10 青春版 5G
50倍潜望式变焦/轻薄5G手机
1899元起 2099元
小米10
骁龙865处理器/1亿像素相机
3699元起 3999元
Redmi K30 Pro
双模5G 骁龙865 弹出全面屏
2699元起
Redmi K30 Pro 变焦版
双模5G 骁龙865 弹出全面屏
3799元
小米10 Pro
骁龙865处理器/50倍变焦
4999元
Redmi K30
120Hz流速屏 全速热爱
1399元起 1699元
