部分定位设置还有位置关系非最优化写法有待改进

页眉部分CSS代码

  1. *{/*去除白色边框距离*/
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. body{/*设置body样式*/
  7.     font-size: 14px;
  8.     background-color: #F5F5F5;
  9. }
  11. .header{/*设置header标签的位置*/
  12.     margin: 25px auto;
  13.     width: 1200px;
  14.     margin-bottom: 20px;
  15. }
  17. /*页眉logo图*/
  18. .header .logo{/*设置logo图片还有内容分类标签对齐*/
  19.     float: left;
  20.     position: relative;
  21. }
  23. /*内容分类菜单*/
  24. .header .menu{/*设置logo图片还有内容分类标签对齐*/
  25.     float: left;
  26.     position: relative;
  27.     margin-top: 12px;/*调整内容分类标签位置*/
  28.     margin-left: 20px; 
  29. }
  31. .header .menu ul{/*设置header标签下的menu标签下的ul列表不显示*/
  32.     display: none;
  33.     list-style:none;/*消除列表前面点的样式*/
  34.     width: 80px;/*不设置影响不会太大*/
  35.     position: absolute;/*设置绝对定位 破坏文档流 是得当列表显示是列表不会吧图片挤下去*/
  36.     opacity: 0.5;/*设置下拉弹出列表的透明度*/
  37.     background: white;/*背景色*/
  38. }
  40. .header .menu ul li{
  41.     font-weight: bold;
  42.     margin-top: 20px;
  43.     text-align: center; 
  44.     padding-bottom: 10px;
  45. }
  47. .header .menu .menu_title a{
  48.     text-decoration: none;
  49.     /*删除a标签内原有文本的下划线*/
  50. }
  52. .header .menu .menu_title{
  53.     border-bottom: 1px solid rgba(0,0,0,.2);
  54.     /*设置内容分类标签的下边框线*/
  55.     padding-bottom: 20px;
  56.     /*设置内容下边框线的距离*/
  57.     width:80px;
  58.     /*设置边框宽度控制下边框线的长度*/
  59.     text-align: center;
  60.     /*使下边框先和文本居中显示 更加美观*/
  61. }
  63. .header .auth{
  64.     float: right;/*浮动使得注册登录选项右边排放*/
  65. }
  67. .header .auth ul li a{
  68.     text-decoration: none;
  69. }
  71. .header .auth ul li{
  72.     float: left;/*浮动使得并行*/
  73.     margin-right: 70px;
  74.     margin-top: 12px;/*调整位置 为了美观*/
  75.     list-style:none; /*删除序号标点*/
  76. }

主体内容部分CSS代码

  1. /*主图片部分*/
  2. .content{
  3.     width:1200px;/*设置图片盒子宽度*/
  4.     margin: 25px auto;/*设置位置和上面的盒子位子设置相同*/
  5. }
  7. .content .banner .banner_img{
  8.     margin-top: 20px;/*调整图片和页眉的距离*/
  9. }
  11. .content .goods{
  12.     margin-top: 10px;
  13. }
  16. .content .goods ul{/*设置列表长度之后等于并排显示列表的综合*/
  17.     width: 1280px;
  18. }
  20. .content .goods ul li{
  21.     width: 360px;/*设置盒子宽度*/
  22.     float: left;/*浮动并排*/
  23.     margin:0 60px 60px 0;/*361*3+40*3=1203>1200 并排的第三个li会被挤下去*/
  24.     /*每个li的边框右边空开60px的距离*/
  25.     list-style:none;
  26.     background-color: white;
  27.     -webkit-box-shadow: 0 0 5px 3px #ccc; /*水平阴影,垂直阴影,阴影渐变程度,阴影尺寸,阴影颜色*/
  28.        -moz-box-shadow: 0 0 5px 3px #ccc;
  29.             box-shadow: 0 0 5px 3px #ccc;
  30. }
  32. h1{
  33.     color: red;
  34.     margin-top: 15px;
  35.     margin-bottom: 20px;
  36. }
  38. .goods .info{
  39.     line-height: 25px;
  40.     width: 300px;/*给商品说明区域添加宽度*/
  41.     margin-left: 30px;/*设置商品区域和banner区域相隔的间距为了美观*/
  42. }
  44. /*商品说明下的部分*/
  45. .goods .info .img-btn{
  46.     width: 300px;/*给商品价格部分设置宽度*/
  47.     margin-top: 10px;/*给价格设置与说明之间的距离*/
  48.     font-size: 20px;
  49.     color: red;
  50.     font-weight: bold;/*给价格字体加粗显示*/
  51. }
  54. .goods .info .img-btn .price{
  55.     float:left; /*使价格靠左浮动*/
  56. }
  58. /*购物车设置*/
  59. .goods .info .img-btn .btn{
  60.     width: 50px;/*给购物车外div边框设置尺寸*/
  61.     height: 40px;
  62.     background-color: red;/*个购物车设置背景色使其明显显示*/
  63.     text-align: center;/*使购物车设置居中显示*/
  64.     border-radius: 5px;/*设置圆角*/
  65.     float: right;/*浮动想右*/
  66.     margin-bottom: 20px;/*包裹购物车的div向下边距20px*/
  67. }
  69. .goods .info .img-btn .cart img{
  70.     width: 26px;/*设置购物车的大小*/
  71.     height: 22px;
  72.     margin-top: 10px;/*设置购物车在div的位置*/
  73. }
  75. /*翻页部分设置*/
  76. .fanye{
  77.     width: 1200px;
  78.     height: 60px;
  79.     line-height: 60px;
  80.     margin: 0 auto;
  81.     margin-top: 30px;
  82.     margin-bottom: 30px;
  83.     overflow: hidden;
  84. }
  86. .fanye ul{
  87.     list-style:none;/*删除列表前面的点*/
  88.     width: 600px;
  89.     margin:0 auto;
  90.     padding-left: 40px;
  91. }
  93. .fanye ul li{
  94.     float: left; /*设置浮动使得li标签并排*/
  95.     margin-left:30px; /*调整分页标签之间的间距*/
  96. }
  98. .fanye ul li a{
  99.     text-decoration: none;/*删除a标签下的下划线*/
  100. }
  102. .page{
  103.     border-radius: 50%;
  104.     background: #c5c5c5;
  105.     padding: 3px 9px;
  106. }

页尾部分CSS代码

  1. /*footer部分*/
  2. .footer{
  3.     width: 1200px;
  4.     margin: 0 auto;
  5.     border-top: 1px solid #ccc; /*因为尝试hr标签没用所以尝试设置上边框*/
  6.     position: relative;
  7. }
  9. .fuhao{
  10.     margin-left: 440px;/*将特殊符号调整位置*/
  11.     position: absolute;
  12. }
  14. .fuhao p{
  15.     float:left; /*设置浮动并排显示*/
  16.     margin-top: 30px;/*设置特殊符号的上边距*/
  17. }
  19. .hongse{
  20.     color: red;
  21. }