• 我的学习总结


    1.设置图片边框:border-(粗细)    ;   border-color:(颜色)     ;  border-style:(线性)     ;
         不同的边框可以设置不同的样式,eg:border-left-style、      border-top-width    ....   solid实线
    2.图片的缩放: width   height  (百分比,像素)
    3.图文混排:
       文字环绕:float (浮动)   
        图片与文字对齐方式:水平对齐 text-align:             垂直对齐 vertical-align:
    4,。设置背景颜色与图像:background-color:         background-image:url(地址)
          可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。
                                                no-repeat:不平铺。
                                                repeat-x:只沿水平方向平铺。
                                                repeat-y:只沿垂直方向平铺。
    5.设置背景图像位置:background-position:( 可以设置两个值  eg:left top)
    6.设置背景图片固定位置  :background-attchment:fixed;          图片滚动: scroll
                                补充:去掉无序列表前的小圆点,list-style: none;
    7.设置图片边框:border-(粗细)    ;   border-color:(颜色)     ;  border-style:(线性)     ;
         不同的边框可以设置不同的样式,eg:border-left-style、      border-top-width    ....   solid实线
    8.图片的缩放: width   height  (百分比,像素)
    9.图文混排:
       文字环绕:float (浮动)   
        图片与文字对齐方式:水平对齐 text-align:             垂直对齐 vertical-align:
    10,。设置背景颜色与图像:background-color:         background-image:url(地址)
          可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。
                                                no-repeat:不平铺。
                                                repeat-x:只沿水平方向平铺。
                                                repeat-y:只沿垂直方向平铺。
    11.设置背景图像位置:background-position:( 可以设置两个值  eg:left top)
    12.设置背景图片固定位置  :background-attchment:fixed;          图片滚动: scroll
                                补充:去掉无序列表前的小圆点,list-style: none;
    13.绝对定位:(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)
                 position: absolute;
                 top:..px;
                 left:..px;
    14.相对定位:  ( 绝对定位的元素的位置相对于最近的已定位的元素,
                如果元素没有已定位的元素,那么它的位置相对于最初的包含块。)position:relative;
                                                                                                                      top:..px;
                                                                                                                      left:..px; 3.居中    margin:0 auto     要在div里设置的
     
     css基本属性—表格样式
    1.控制表格:cellspacing:列间距    cellpadding:列的内边距
               border:表格边框       bgcolor:表格颜色     border-collapse:合并相邻列的边框线
               border-spacing : 设置列的间距
       设置表格宽度:table-layout:fixed(固定)或者auto(自动)
         <thead>:表示表头       <tbody>:表示表内容        <tfoot>:表示表尾   (顺序可以不一样,但一般还是按顺序)
    2.设置鼠标经过时表格的样式:a:hover
    3.CSS与表单:a:制作像文字一样的按钮
       transparent(透明的) 设置背景透明
       border:0px;     eg:<button id="" type="button" style="background: transparent;border:0px /none">......</button>
        b:制作多彩下拉菜单   select  option  
        c:制作只有下划线的输入框   border:0px/none;
                                                     border-bottom:1px (粗细) dashed(线性) #000000(颜色);                                                                              补充:
                        1.display:black(行级元素换成块级元素)/ inline(块级元素换成行级元素)
                             2.CSS3的选择器:   :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
                                 n 可以是数字、关键词或公式。
     用CSS设置链接与导航菜单  (les9)
    1.设置超链接样式: 在HTML中<a>    在CSS中还可以用伪类选择器的四个样式     a:link(未访问)     a:visited(已访问)。     
                                                                          a:hover(鼠标移上去)     a:active(激活)
    2.创建按钮式超链接:text-decoration: none;               a:link{   }        a:active{   }
      (可以设置这些)    background:  ;
                       color:   ;
                       border-right:  px solid    ;
                       border-bottom: px solid    ;
                       border-left:    px solid   ;
                       border-top: px     。
    3.制作荧光菜单:  应用无序列表,<div>,a:hover,    ( 查  les9)。
    4.控制鼠标(cursor)指针  . {cursor:  }  (查 属性下的其他 CSS 2.0 中文手册)。
    5.设置项目列表格式: 可以用有序列表<ol>与无序列表<ul>     用  list-style   来设置。 
    6.创建简单的导航菜单:   
          a:垂直排列菜单
          很多时候会用上  list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。
          b:横向菜单
          实现横竖转换只需设置float:left即可,同时把宽度取消掉。
    7.设置图片翻转效果:(指网页中的一个图片,在鼠标指针经过时换成另外一个图片。)  可以用hover.
                                             
                                             补充CSS3的属性  rotate(角度) 
          效果:当鼠标移上去的时候,列表可以转动你设置的角度。(正为顺时针,负为逆时针,若是180度,可以看见字是倒立的。不能清楚的看见转动
                         ,但可以看见字的变化)
                    transform(转换):rotate( 旋转;循环 使旋转;使转动;使轮流)(-20deg) ;    deg:程度(degree)
      CSS的盒模型  
    1.盒子的概念:在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。
                  一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。
    2.设置边框,内边距,外边距:
        a 内边距(padding)  padding属性可以设置1、2、3、4个属性值,分别如下:
                            设置1个属性值时,表示上下左右4个padding均为该值。
                            设置2个属性值时,前者为上下padding的值,后者为左右padding的值。
                            设置3个属性值时,第1个位上padding的值,第2个为左右padding的值,第3个为下padding得值。
                            设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。
        
        b  外边距(margin)   margin指的是元素与元素之间的距离       margin and padding  的设置时一样的。
    3.盒子之间的关系:    
                      标准的文档流:
                       <div>标记与<span>标记:div简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,
                                                      可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。
                                            二者的区别在于div是块级元素,它包含的元素会自动换行。而span是内嵌元素,不会换行。
    4.盒子在标准流中的定位原则:                      
       行内元素之间的水平margin :当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
       块级元素之间的垂直margin :当两个块级元素是垂直排列,则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和, 而是两者中的较大者。
         {背景定位:background-position:center; 为 background-position 属性提供值有很多方法。首先,
      可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,
      不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。)
     CSS盒子的浮动与定位
    1.盒子的浮动(float):在标准流中,一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。
                 CSS中有一个float属性,默认为none,float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,
                使用clear清楚浮动的影响
                clear属性除了可以设置为了left和right之外,还可以设置为both,表示同时清除左右两边的影响。
                position属性可以设置4个值:
                                static:默认值
                                relative:相对定位  (会相对于它原本的位置,通过偏移指定的距离,到达新的位置。不影响其他盒子)
                                absolute:绝对定位(其父元素的相对位置  其会影响他后面的盒子  就好像这个盒子被拿走了,
                                                          其他排在后面的盒子将填补前面的位置。)
                                fixed:固定定位(当滚动条滑动式其不会改变位置,会一直在那里。)
    2.盒子的定位(static):
                盒子的定位(relative) ——left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。         
    3.z-index  :z-index属性用于调整定位时重叠块的上下位置,z-index值大的元素位于值小的上方。(默认的z-index值为0,当两个块的z-index值一样时,
                           将保持原有的高低覆盖关系。)
    4.盒子的display属性  :display属性的block和inline两个值,一个代表块级显示,一个代表内嵌显示。display还有个值为none,当设置为none时,
                                     表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。
    补充
    1.height:auto
          overflow:hidden        这是个组合件,其作用是:使自动变到与内部方框(或是最高的那个方框)一样高。必须一起使用。
    2.定位 (position)   这里的left是指:离左边多远。top是指离上边多远。
                     
          相对定位:(position:relative;)其参考点是:本身原来位置的左上角。移动后原来的那个位置会被占据。
          绝对定位:(position:absolute;)其参考点是:其父元素有position的左上角。移动后原来的那个位置会空出来。
    3.清除(clear)   只影响清除的本身。其意思是:想让哪块动,就在哪块上用clear。通常用clear:left;    clear:both;        
    4.display(显示):           display:none;  隐藏,空间留给他们用。
                                 visibility:hidden;   隐藏,位置空出来,仍在那里。
          display:inline;此元素会被显示为内联元素,元素前后没有换行符。
          display:block; 此元素将显示为块级元素,此元素前后会带有换行符。
    5.用iframe实现框架结构:
          <iframe  src=“URL”  width=“x”  height=“x” scrolling="[auto|yes|no]"  frameborder="0|1“ name="内部框架的名称”></iframe>
          <a href="地址" target="内部框架的名称">文字</a>
    6.opacity(不透明):值为0到1.
    7.a标签的提交方式默认为get.
    8.行级元素设置的width,height,是没有用的。
     
     
  • 相关阅读:
    Nodejs下载和第一个Nodejs示例
    永久关闭Win10工具栏的TaskbarSearch控件
    对称加密,非对称加密,散列算法,签名算法
    【转】TTL和RS232之间的详细对比
    zlg核心板linux系统中查看系统内存等使用信息
    Power BI后台自动刷新数据报错 The operation was throttled by Power BI Premium because there were too many datasets being processed concurrently.
    剪切板和上传文件内容获取
    CSS, LESS, SCSS, SASS总结
    文字程序
    electron 打包“ERR_ELECTRON_BUILDER_CANNOT_EXECUTE”
  • 原文地址:https://www.cnblogs.com/smile-ling/p/3946611.html
Copyright © 2020-2023  润新知