码迷,mamicode.com
首页 > 其他好文 > 详细

这是第二周了,继续总结一下

时间:2015-12-06 15:58:31      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

两周的学习时间眨眼就过,现在也能开始写一些简单的网页了,虽然代码写的很慢很吃力,但是看着在自己手中完成一个完整的网页还是挺有成就感的。

还是总结总结这周所学吧。

 

补充一下CSS选择器吧:

一.选择器

1.子元素选择器:

 选择作为某元素子元素的元素
          h1>strong{color:red}-----选择h1元素的子元素strong变为红色

2.相邻兄弟选择器:

 选择紧接在另一元素都的元素,且二者具有相同的父元素
          h1+p{color:red}--------选择h1元素后的p元素变为红色

3.伪类:

 向某些选择器添加特殊效果
       属性:  hover---鼠标悬浮在元素上方时为元素添加样式
             first chlid---向元素的第一个子元素添加样式

4.伪元素:

 向某些选择器设置特殊效果
       属性:first letter----向文本的首字母设置特殊样式
            first line-----向文本的首行设置特殊样式




接下来是一些其他的基础内容,都是一些自己掌握的不太好的:

CSS3转换


 浏览器支持:-webkit-transform  谷歌
           -moz-transform     火狐
           -o-transform      欧朋
           -ms-transform     IE9

2D转换


 transform{
        translate---元素从其当前位置移动     
            例:translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素

        rotate ----元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
            例: rotate(30deg) 把元素顺时针旋转 30 度

        scale----元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
            例:scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍

        skew-----元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
            例:skew(30deg,20deg) 围绕 X 轴把元素转动 30 度,围绕 Y 轴转动 20 度

3D转换


 transform{
       rotateX与rotateY----围绕X,y轴以给定的度数进行旋转



过渡

 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
 必须规定两项内容:
     1.规定您希望把效果添加到哪个 CSS 属性上 
     2.规定效果的时长

 向宽度、高度和转换添加过渡效果
       {transition: width 2s, height 2s, transform 2s;}



动画

 通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
                1.规定动画的名称 
                2.规定动画的时长 
 例
    div{width:200px;height:200px;background:black;position: relative}
    div{animation: a 6s;}
    @keyframes a
    {
      0%   {background: red ;left: 0;top: 0}
      25%  {background: blue ;  left: 200px;top: 200px}
      75% {background: red ;left: 300px;top: 300px}
      100%{background: yellow;left: 0;top:0 }
    }



权重值

 1.第一级:内嵌样式             1000
 2.第二级:ID选择器             0100
 3.第三级:类,伪类选择器        0010
 4.第四级:元素选择器           0001

    注:通配符选择器(*),子元素选择器(>)与相邻兄弟选择器(+)权重值为  0000



定位

 1.  display:block-------可以让行内元素(比如 <a> 元素)表现得像块级元素一样
     display:none -------让生成的元素没有框

 2.position 属性
      relative-----相对定位:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留
      absolute-----绝对定位:元素框从文档流完全删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块)
      fixed   -----固定定位:生成绝对定位的元素,相对于浏览器窗口进行定位




 











 

这是第二周了,继续总结一下

标签:

原文地址:http://www.cnblogs.com/lzh123456/p/5023610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!