body { padding: 0; margin: 0; } /*头部样式*/ .header { background-color: lightblue; } /*头部内容区*/ .header .content { width: 90%; background-color: lightblue; margin: 0 auto; height: 60px; } /*头部中的导航*/ .header .content .nav { /*清空ul默认样式*/ margin: 0; padding: 0; } /*去掉头部中的导航子项样式*/ .header .content .nav .item { list-style: none; } /*设置头部中的导航自相中包含的超链接*/ .header .content .nav .item a { float: left;/*设置为向左浮动*/ min-width: 80px; min-height: 60px; /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; /*导航前景色*/ color: white; padding: 0 15px;/*上下为0，左右为15*/ /*去掉a标签的默认下划线*/ text-decoration: none; } .header .content .nav .item a:hover { background-color: red; font-size: 1.1rem; } /*设置轮播图*/ .slider { width: 90%; margin: 0 auto; } /*轮播css设置*/ #flash { width:900%; height: 535px; margin: 0 auto; } #flash #play { width:100%; height: 535px; list-style: none; position:relative; top:0; left:0; } #flash #play li { display: none; position:absolute; top:0; left:0; } #flash #play li img { float: left; } #button { position: relative; bottom:20px; left:40%; list-style: none; padding: 0 0; } #button li { margin-left: 10px; float: left; } #button li div { width:12px; height: 12px; background:#DDDDDD; border-radius: 6px; cursor: pointer; } #prev { width:40px; height:63px; background:url(images/beijing.png) 0 0; position: absolute; top:50%; left:10px; z-index: 1000; } #next { width:40px; height:63px; background:url(images/beijing.png) -40px 0; position: absolute; top:50%; right:10px; z-index: 1000; } #prev:hover { background:url(images/beijing.png) 0 -62px; } #next:hover { background:url(images/beijing.png) -40px -62px; } /*设置商品列表样式*/ .left { box-sizing: border-box; padding: 10px; border: 1px solid #555555; } .left h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555; } .left ul { margin-top: 20px; padding: 0; } .left ul li { list-style: none; padding: 10px 20px; } .left ul li a { text-decoration: none; color: #555555; } .left ul li a:hover { color: coral; text-decoration: underline; cursor: pointer; } /*主体使用圣杯来实现*/ /*第一步: 设置主体的宽度*/ .container { width: 90%; background-color: lightgray; margin: 5px auto; /*border: 5px dashed black;*/ } /*第二步: 将中间内容区, 左侧和右侧的宽高进行设置*/ .left { width: 200px; min-height: 500px; /*background-color: lightgreen;*/ } .right { width: 200px; min-height: 500px; /*background-color: lightcoral;*/ } .main { width: 100%; /*background-color: lightblue;*/ min-height: 500px; } /*第三步: 将主体,左, 右全部浮动*/ .main, .left, .right { float: left; } .container { overflow: hidden; } /*第四步: 将左右区块移动到正确的位置上*/ .main { /*设置一个盒模型的大小的计算方式, 默认大小由内容决定*/ box-sizing: border-box; padding-left: 200px; padding-right: 200px; } .left { margin-left: -100%; } .right { box-sizing: border-box; padding: 10px; border: 1px solid #555555; margin-left: -200px; } .right h1 { color: #555; font-size: 1.3rem; border-bottom: 1px solid #555555; } .right ul { margin-top: 20px; padding: 0; } .right ul li { list-style: none; padding: 10px 20px; } .right ul li a { text-decoration: none; color: #555555; } .right ul li a:hover { color: coral; text-decoration: underline; cursor: pointer; } /*页面的底部样式开始*/ .footer { background-color: #777777; } .footer .content { width: 90%; background-color: #777777; height: 60px; margin: 0 auto; } .footer .content p { /*水平居中*/ text-align: center; /*垂直居中*/ line-height: 60px; } .footer .content p a { color: #999999; text-decoration: none; } .footer .content p a:hover { color: white; }