选择器：CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括元素选择器（如div、p）、类选择器（如.class）、ID选择器（如#id）、属性选择器（如[attribute]）等。
盒模型：盒模型描述了HTML元素的布局。它由内容区域、内边距、边框和外边距组成。可以使用width和height属性来控制元素的尺寸，使用padding和margin属性来控制内边距和外边距。
定位：CSS提供了多种定位方式来控制元素的位置。常见的定位方式包括相对定位（position: relative）、绝对定位（position: absolute）和固定定位（position: fixed）。
布局：CSS提供了多种布局技术，如浮动（float）、弹性盒子布局（Flexbox）和网格布局（Grid）。这些布局技术可以用于创建响应式和灵活的布局。
文本样式：CSS可以用于控制文本的样式，如字体、大小、颜色、对齐方式、行高等。常见的文本样式属性包括font-family、font-size、color、text-align、line-height等。
背景和边框：CSS可以用于设置元素的背景颜色、背景图片和边框样式。常见的背景和边框属性包括background-color、background-image、border、border-radius等。
动画和过渡效果：CSS提供了动画和过渡效果来为元素添加动态效果。可以使用@keyframes规则定义动画，使用transition属性定义过渡效果。
响应式设计：响应式设计是一种使网页在不同设备和屏幕尺寸下自适应的设计方法。可以使用媒体查询（@media）来根据屏幕尺寸应用不同的样式。
伪类和伪元素：CSS提供了伪类和伪元素来选择元素的特定状态或位置。常见的伪类包括:hover、:active、:first-child等，常见的伪元素包括::before、::after等。
浏览器兼容性：不同的浏览器对CSS的支持可能有所差异。为了确保网页在不同浏览器中正确显示，需要进行浏览器兼容性测试，并使用CSS前缀（如-webkit-、-moz-、-ms-等）来适应不同的浏览器
/* index.css是用来美化首页的 */
*{
margin: 0;
padding: 0;
/* 内减模式 */
box-sizing: border-box;
}
/* li的小圆点清除 */
li{
list-style: none;
}
/* 超链接的下划线清楚 */
a{
text-decoration: none;
}
/* 有浮动影响清除 */
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
body{
background-color: white;
}
/* 版心 */
.wrapper{
width: 1200px;
margin: 0 auto;
}
.header{
height: 42px;
background-color: skyblue;
/* margin-top: 30px;
margin-bottom: 30px; */
margin: 30px auto;
}
h1{
float: left;
}
.nav{
float: left;
margin-left: 70px;
height: 42px;
}
.nav li{
float: left;
margin-right: 26px;
}
.nav li a{
display: block;
padding: 0 9px;
height: 42px;
line-height: 42px;
}
.nav li a:hover{
border-bottom: 2px solid #00a4ff;
}
/* 搜索 */
.search{
float: left;
margin-left: 59px;
width: 412px;
/* height: 40px; */
height: 42px;
border: 1px solid rgb(49,153,206);
}
.search input{
float: left;
padding-left: 20px;
width: 360px;
height: 40px;
border:0;
}
/* 控制placeholder的 */
.search input::placeholder{
font-size: 14px;
color: #bfbfbf;
}
.search button{
float: right;
width: 50px;
height: 40px;
background-image: url(../img/搜索.png);
border: 0;
}
.user{
float: right;
margin-right: 35px;
/* 45 */
height: 42px;
/* display: flex;
align-items: center; */
line-height: 42px;
}
/* 调节图片垂直对齐方式，middle居中,只是图片与字
垂直对齐，图片与前面并未垂直对齐 */
.user img{
vertical-align: middle;
}
/* 轮播图 */
.banner{
height: 420px;
background-color:#AFEEEE;
}
.banner .wrapper{
height: 420px;
background-image: url(../img/轮播图.png);
}
.banner .left{
float: left;
padding: 0 20px;
width: 190px;
height: 420px;
background-color: rgba(0,0,0,0.3);
/* 行高属于控制文字的属性，能继承 */
line-height: 44px;
}
.banner .left span{
float: right;
}
.banner .right{
float: right;
margin-top: 60px;
width: 228px;
height: 300px;
background-color:rgba(255, 255, 255, 0.7);
}
.banner .left a{
font-size: 14px;
color:white ;
}
.banner .left a:hover{
color:#00b4ff ;
}
.wrapper .right h2{
height: 48px;
background-color: #9bceea;
text-align: center;
line-height: 48px;
font-size: 18px;
color: white;
}
.banner .right .concent{
padding: 0 18px;
}
.banner .right .concent dl{
padding: 12px 0;
border-bottom: 2px solid #e5e5e5;
}
.banner .right .concent dt{
font-size: 16px;
color: #4e4e4e;
}
.banner .right .concent dd{
font-size: 14px;
color: #4e4e4e;
}
.banner .right .more{
display: block;
/* margin: 4px 14px 0; */
margin:4px auto 0;
width: 200px;
height: 40px;
border: 1px solid #00a4ff;
font-size: 16px;
color: #00a4ff;
font-weight: 700;
text-align: center;
line-height: 40px;
}
.goods{
margin-top: 8px;
height: 60px;
background-color: #f3f5f7;
/* 阴影 */
box-shadow: 0px 2px 3px 0px
rgba(118, 118, 118, 0.2);
line-height: 60px;
}
.goods h2{
float: left;
}
.goods ul{
float: left;
}
.goods .xing{
float: right;
}
.goods a{
border-left: 1px solid #494646;
}
