部分设置并非最优化设置 有待后期学习并优化设置

  1. body{
  2.     background-color: #f5f5f5;
  3. }
  5. .all{
  6.       box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
  7.     width: 1000px;
  8.     margin: 100px auto;
  9.     border-radius: 10px;
  10.     background-color: white;
  11.     overflow: hidden;
  12.     border-bottom: 1px solid rgba(100,149,237,.5);
  13. }
  14. /*标题*/
  15. .head{
  16.     color: white;
  17.     background-color: #6495ED;
  18.     text-align: center;
  19.     font-size: 20px;
  20.     padding-top: 10px;
  21.     padding-bottom: 10px;
  22.     letter-spacing:8px
  23. }
  24. /*每一块部分*/
  25. .chence{
  26.     white-space:nowrap;/*超出该div的文本不会换行*/
  27.     position: relative;
  28.     font-size: 20px;
  29.     border-bottom: 1px solid rgba(100,149,237,1);
  30.     /*设置内容分类标签的下边框线*/
  31.     padding-top: 20px;
  32.     padding-bottom: 30px;
  33.     width:60%;
  34.     left: 20px;
  35. }
  36. .chence-1{
  37.     position: relative;
  38.     font-size: 20px;
  39.     margin-top: 20px;
  40.     padding-top: 20px;
  41.     padding-bottom: 30px;
  42.     text-align: center;
  43.     border-top: 1px solid black;
  44. }
  46. .xing{
  47.     color: #6495ED;
  48. }
  50. .kuang{
  51.     outline: none;/*当元素获得焦点的时候，焦点框为0.*/
  52.     width: 75%;
  53.     font-size: 20px;
  54.     height: 40px;
  55.     border-radius: 5px;
  56.     border:1px solid rgba(0,0,0,0.2);
  57.     transition: box-shadow .5s;/*给盒阴影添加过渡效果*/
  58. }
  60. .kuang:focus{
  61.         box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; /*盒子阴影效果设置*/
  62. }
  64. .kuang-1{
  65.     outline: none;/*当元素获得焦点的时候，焦点框为0.*/
  66.     width: 75%;
  67.     font-size: 20px;
  68.     height: 40px;
  69.     border-radius: 5px;
  70.     border:1px solid rgba(0,0,0,0.2);
  71.     margin-left: 20px;
  72.     transition: box-shadow .5s;/*添加效果*/
  73. }
  75. .kuang-1:focus{
  76.         box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; /*盒子阴影效果设置*/
  77. }
  78. .kuang-2{
  79.     outline: none;/*当元素获得焦点的时候，焦点框为0.*/
  80.     width: 75%;
  81.     font-size: 20px;
  82.     height: 40px;
  83.     border-radius: 5px;
  84.     border:1px solid rgba(0,0,0,0.2);
  85.     margin-left: 40px;
  86.     transition: box-shadow .5s;/*添加效果*/
  87. }
  89. .kuang-2:focus{
  90.         box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; /*盒子阴影效果设置*/
  91. }
  92. label{
  93.     font-weight:bold;/*定义粗体字符*/
  94.     cursor: pointer;
  95. }
  97. .cu{
  98.     font-weight:normal;/*默认值。定义标准的字符*/
  99.     letter-spacing:8px;/*文本字间距设置*/
  100.     cursor: pointer;/*手标志*/
  101. }
  103. button{
  104.     width: 130px;
  105.     height: 30px;
  106.     background-color: #6495ED;
  107.     color: white;
  108.     border-radius: 3px;/*圆角设置*/
  109.     margin-left: 10px;
  110.     border: none;
  111.     cursor: pointer;/*手*/
  112. }