6.25 学习笔记

18、标签嵌套规范

       ul、li

       dl、dt、dd

       table、tr、td

 块标签可以嵌套内联标签

块标签不一定能嵌套块标签

<div>

  <div></div>

</div>

   特殊:错误写法

   <p>

       <div></div>

   </p>

内联不能嵌套块

        特殊:

         正确写法:

         <a href="#">

            <div></div>

         </a>

19、溢出隐藏

overflow:

    visible:默认

    hidden:溢出部分直接隐藏

    scroll:滚动条拖拽显示溢出内容

    auto:根据是否溢出自动选择是否出现滚动条

    x轴，y轴

        overflow-x、overflow-y针对两轴分别设置

20、透明度与手势

透明度

          opacity:0(透明、占空间）～1(不透明)   0.5半透明   所有子内容也会半透明

          rgba():0～1   可以让指定的样式透明，而不影响其他样式

        手势:cursor

          default:默认是剪头

          要实现自定义手势:

               准备图片: .cur  .ico

               cursor:url(./img/cursor.ico)，auto；

21、最大、最小宽高

    min-width、min-height

    max-width、max-height

    %单位: 换算 -> 以父容器的大小进行换算

    一个容器怎么适应屏幕的高: 容器加 height:100%   body:100%  html:100%

    html，body{height:100%}

    .container{height:100%}   

22、css的默认样式      

     没有默认样式:div、span

     有默认样式:

        body -> margin: 8px      

        h1   -> margin:上下21.440px

                font-weight:bold

        p    ->margin:上下16px

        ul    ->margin:上下16px  padding: 左  40px      

                默认点:list-style:disc

        a    ->text-decoration:underline

 23、CSS reset

      *{margin:0；padding:0；}

         优点:不考虑哪些标签有默认值的margin和padding

         缺点:稍微的影响性能

       body,p,h1,ul{margin:0；padding:0；}

       ul{ list-style : none；}

       a{ text-decoration:none；color:#666；}

       img{display:block}

         问题现象:图片跟容器底部有一些空隙。内联元素的对齐方式是按照基线对齐，而不是文字底线对齐。

         解决方法:img{vertical-align:bottom；}

      写具体页面的时候或一个布局效果的时候:

         1.写结构

         2.css重置样式

         3.写具体样式

    Photoshop工具

1. Photoshop的使用

组成:菜单项，工具栏，辅助面板

 快捷键:

   ctrl＋r : 显示隐藏标尺

   alt＋滚轮:放大缩小

   在标尺上可以拖拽参考线，可以通过移动工具拖拽回去，也可以在试图菜单中选择清除所有的参考线。

   图片的格式:jpg(色彩丰富)   png(半透明图)   gif(动图)

   图层中的小眼睛可以对当前图层进行显示隐藏

1. Photoshop的切图流程

       1.通过矩形选框工具选择指定的区域

微调:Alt减少区域  Shift增加区域  上下左右键进行微调

利用参考记录领取的位置，以便以后测量其他的值

       2.ctrl＋c:复制图层

       3.ctrl＋n:新建图层

       4. ctrl＋v:粘贴图层

       5.存储为web格式

    利用切片工具也可以

  psd图片切片流程

   PS版本:cc

     自动切图-> 启动生成器->图像资源

   企业切图流程

        利用工具快速获取样式  eg:蓝湖:https://lanhuapp.com