首页 > 代码库 > 我的学习总结

我的学习总结

2024-07-20 07:50:39   222人阅读

1.设置图片边框：border-width:(粗细）    ;   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-width:(粗细）    ;   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=http://www.mamicode.com/“URL” width=“x” height=“x” scrolling="[auto|yes|no]"  frameborder="0|1“ name="内部框架的名称”></iframe>
      <a href="http://www.mamicode.com/地址" target="内部框架的名称">文字</a>
6.opacity(不透明)：值为0到1.
7.a标签的提交方式默认为get.
8.行级元素设置的width，height，是没有用的。
 
 

我的学习总结


联系
我们