部分位置设置用的调试工具进行调整并非最完美的设置再页面缩放上会存在bug

最优化设置有待改进

页眉部分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. /*banner区域设置*/
  2. .banner{
  3.     width: 1200px;
  4.     margin: 0 auto;
  5.     margin-bottom: 80px;/*将footer部分和banner部分隔开*/
  6. }
  8. .banner ul li{
  9.     list-style:none; /*消除列表前面点的样式*/
  10. }
  12. .banner .left{
  13.     width: 600px;
  14.     height: 536px;
  15.     position: relative;
  16. }
  18. .banner .right{
  19.     width: 600px;
  20.     height: 536px;
  21.     float:right;
  22.     top: -485px; /*调整位置此处时调试工具数据设置并非最优化设置有待改进*/
  23.     background-color: white;
  24.     position: relative;
  25. }
  26. /*注册表格区域*/
  27. .right-big{
  28.     width: 400px;
  29.     height: 450px;
  30.     background-color: white;
  31.     position: absolute;
  32.     top: 40px;
  33.     left: 100px;
  34.     right: 0;
  35.     bottom: 0; 
  36. }
  37. /*用户注册标题*/
  38. .btn{
  39.     width: 350px;
  40.     font-size: 40px;
  41.     color: red;
  42.     margin-top: 40px;
  43.     margin-left: 15px;/*调整位置*/
  44.     border-bottom: 1px solid rgba(0,0,0,.2);/*设置下边框线*/
  45.     padding-bottom: 40px;
  46.     font-weight: bold;/*标题字体加粗*/
  47. }
  49. /*输入界面*/
  50. .ider{
  51.     font-size: 20px;
  52.     margin-top: 40px;
  53.     margin-left: 25px;
  54. }
  56. .ider td{
  57.     height: 50px;
  58. }
  60. .yonghu{
  61.     width: 200px;
  62.     height: 30px;
  63.     border:1.5px solid rgba(0,0,0,0.3);/*设置输入框样式*/
  64.        -webkit-border-radius: 5px;/*设置圆角*/
  65.     border-radius: 5px;
  66.     margin-left: 20px;
  67. }
  68. /*注册按钮*/
  69. input[type="submit"]{
  70.     background-color: red;/*注册按钮红色背景色*/
  71.     padding: 10px 20px 10px 20px;/*将注册按钮撑开放大显示*/
  72.     cursor: pointer;/*设置当鼠标放在登录按钮上时鼠标突变变成小手的设置*/
  73.     font-size: 20px;/*设置注册按钮内的字体大小*/
  74.     border-radius: 5px;/*设置注册按钮的边框圆角*/
  75.     color: white;
  76.     margin-top: 30px;
  77.     margin-left: 65px;
  78. }
  81. input[type="text"]:focus{
  82. background: #F0F8FF;/*给输入框设置获取焦点时的背景色*/
  83. }
  84. input[type="password"]:focus{
  85. background: #F0F8FF;
  86. }

页尾部分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. }