一.PS 切片工具

2021-11-06_134345.jpg

  • 如何重新更改切片尺寸：按ctrl键 - 单击切片
  • 步骤：切片工具 - 开始切图 - 菜单栏文件 - 导出 - 存储为web所用格式 - 左下角选择6% - 进行框选 - 右上角选择存储格式 - 保存 - 命名改成英文(重要) - 最下方选择所有用户切片 - OK
  • psd格式文件，可以在对应图层上右键，直接保存为png格式图片

二.Pxcook 的使用

  • 量图

  • psd格式文件可以生成部分代码

    三.CSS Reset 清除所有元素默认样式

    1. /* 1.清除元素的内外边距 */
    2. body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input {
    3.   margin: 0;
    4.   padding: 0;
    5. }
    6. /* 2.去掉列表标识符 */
    7. li {
    8.   list-style: none;
    9. }
    10. /* 3.图片去掉基线对齐 
    11.   1.给所有的img设置vertical-align: middle;
    12.   **2.给所有的img设置display:block;
    13.       - 注意：img转成块之后,图片的水平居中就不能使用text-align了
    14.       需要使用margin:0 auto;方法水平居中
    15. */
    16. img {
    17.   vertical-align: middle;
    18. }
    19. /* 4.超链接去掉下划线 */
    20. a {
    21.   text-decoration: none;
    22. }
    23. /*5.万能清除浮动法*/
    24. .clear-fix::after {
    25.   content: "";
    26.   display: block;
    27.   clear: both;
    28. }
    29. /* 6.左浮动 */
    30. .fl {
    31.   float: left;
    32. }
    33. /* 7.右浮动 */
    34. .fr {
    35.   float: right;
    36. }
    37. /* 8.所有标题去掉加粗 */
    38. h1,h2,h3,h4,h5,h6 {
    39.   font-weight: normal;
    40. }

    四.版心的概念

  • 板块内部在浏览器中水平居中即为版心

  • 需要设置 margin:auto;水平方向居中，不可用一侧 margin 挤

    五.最小宽度在 PC 端页面的应用

    1. body {
    2.   min-width:1200px;
    3. }