练习

  1. body {
  2.   margin: 40px;
  3. }
  5. .title{
  6.   margin: 30px 130px;
  7. }
  9. .box {
  11.   height: 235px;
  12. }
  13. .box .content {
  14.   display: grid;
  15.   background-color: #ffffff;
  16.   border-radius: 5px;
  17. }
  19. .box .content .bottom {
  21.     display: flex;
  22.     flex-direction: column;
  23.     place-items: center;
  24.     padding: 20px 5px;
  25.     gap: 30px;
  26.   }
  27.   .box .content .bottom .up span{
  28.       font-size: 13px;
  29.       background-color: rgb(156, 155, 155);
  30.       padding: 0 4px;
  31.       border-radius: 2px;
  32.       color: white;
  33. }
  34. .box .content .bottom .up h5{
  35.     padding-left: 5px;
  36. }
  37. .box .content .bottom .up h5:hover{
  38.     color: red;
  39.     cursor: pointer;
  40. }
  41. .box .content .bottom .down{
  42.     font-size: 12px;
  43.     color: #c2c4c4;
  44. }
  45. .box .content .bottom .down .sc{
  46.     font-size: 16px;
  47. }
  48. .box .content .bottom .down .sc:hover{
  49.     color: red;
  50.     cursor: pointer;
  51. }
  53. .box .content .bottom .down span{
  54.     margin-left: 70px;
  55.     margin-right: 10px;
  56. }
  57.   .box .content .bottom .up,.down{
  58.       display: flex;
  59.       flex-direction: row;
  60.       place-items: center;
  61.   }
  62.   .content img {
  63.   width: 100%;
  64.   border-radius: 5px 5px 0 0;
  65. }
  67. .wrapper {
  68.   display: grid;
  69.   grid-gap: 30px 20px;
  70.   grid-template-columns: repeat(5, 224px);
  71.   place-content: center;
  72. }

更多相关文章

  1. 练习PHP中文网首页
  2. 模态框练习
  3. 选择器权重及伪类选择器练习
  4. 想躺平的第二天
  5. 表单、内联框架及css练习
  6. html基础-表格合并练习
  7. HTML入门学习之表格制作课程表实战练习
  8. HTML基础标签练习作业
  9. markdown语法练习

随机推荐

  1. Python 疑难问题：[] 与 list() 哪个快？为什
  2. AWS上传证书-添加负载均衡
  3. 给你的Excel增加正则处理函数，简直如虎添
  4. 数据分析都有哪些岗位？
  5. 什么是好的数据指标：精益数据分析
  6. 为什么说 Python 内置函数并不是万能的？
  7. 如何处理偏态数据？
  8. SQL今日一题（6）：count
  9. Python有序字典的两个小“惊喜”~~
  10. 学习SQL：MySQL必知必会