毕设学习

最新推荐文章于 2024-05-14 10:00:20 发布

原创最新推荐文章于 2024-05-14 10:00:20 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

水木专栏收录该内容

17 篇文章

订阅专栏

本文深入探讨CSS3中的阴影效果、变形与过渡动画及jQuery的选择器应用等高级技巧，帮助读者掌握网页布局与交互设计的精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  1，
 
 
  

 
 
  box-shado
 
 
  w： 
 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  

 
 
  <length> <length> <length>? <length>? || 
  <color>：
  
   
    
     
      
       阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
        
       
       
        -webkit-box-shadow:5px 2px 6px #000;

-webkit    /*Chrome/Safari*/
-moz   /*Firefox*/
-ms    /*IE*/
-o   /*Opera*/

ul li a  
{  
text-decoration: none;  
color: #000  ;  
background: #ffc  ;  
display: block;  
height: 350px;  
width: 200px;  
padding: 15px; /* Firefox */  
-moz-box-shadow: 5px 5px 7px rgba(33,33,33,1)  ; /* Safari+Chrome */  
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ; /* Opera */  
box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ;  
}

ul li a{  
-moz-transition:-moz-transform .15s linear;  
-o-transition:-o-transform .15s linear;  
-webkit-transition:-webkit-transform .15s linear;  
}

ul li:nth-child(even) a{  
-o-transform:rotate(4deg);  
-webkit-transform:rotate(4deg);  
-moz-transform:rotate(4deg);  
position:relative;  
top:5px;  
background:#cfc  ;  
}

ul li:nth-child(3n) a{  
-o-transform:rotate(-3deg);  
-webkit-transform:rotate(-3deg);  
-moz-transform:rotate(-3deg);  
position:relative;  
top:-5px;  
background:#ccf  ; 
}

ul li:nth-child(5n) a{  
-o-transform:rotate(5deg);  
-webkit-transform:rotate(5deg);  
-moz-transform:rotate(5deg);  
position:relative;  
top:-10px;  
}  

ul li a:hover,ul li a:focus{  
-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;  
-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)  ;  
-o-box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;  
-webkit-transform: scale(1.25);  
-moz-transform: scale(1.25);  
-o-transform: scale(1.25);  
position:relative;  
z-index:5;  
}

2，CSS3制作动画的几个属性：变形(transform)、转换即过渡(transition)和动画(animation)

transform——变形——主要包括：旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix——详细介绍：http://www.w3cplus.com/content/css3-transform/

transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，与独立于远房亲戚transition使用，但是，效果就是很干涩机械的旋转移动。要是配合transition属性，旋转啊什么的，就会很平滑。

transition——使变化平滑。

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

3，伪类选择器nth-child()

ul li:nth-child(3n+3) {
color: #ccc;
}

在无序列表里面选择是3倍数的列，n是大于0的值整数。 nth-child()圆括号里面支持两个关键词：even与odd。

4,margin padding：上右下左。

5，div居中显示：margin:0 auto；

6， em是相对单位，比如说一行文字使用12px大小的话，那么如果单独要定义其中几个文字使用2em的话， 它的显示效果为其他文字的2倍。

7，水平对齐 text-align

需要注意的是如果有padding这类的东西在，千万看清楚两边的padding值是否相同，当你看到文字不在中间的时候，可能就是因为两边的padding值不同。

垂直对齐

如果是一行文字，可以用line-height来控制，line-height的值和文字所在容器的高度一样。
垂直方向对齐有一个属性vertical-align，vertical-align:top;，vertical-align:middle;，vertical-align:bottom;，分别对应上对齐，中对齐，下对齐，但有时候会无效，不常用，本来垂直对齐就不常用。
最后就是用padding了，一般是padding-top。
8，$("td:eq(3)",$("tr")).hide();

jquery查询器,  在所有的 tr 中 代码: $("tr")   ,查找第4个td 元素 代码: "td:eq(3)"   并将查找到的td隐藏。
9,一个多个AJAX请求的情况下，如何利用jquery来处理几种case。
 多个ajax请求同时发送，相互无依赖。--并列
多个ajax请求相互依赖，必须有先后顺序。--嵌套
多个请求被同时发送，只需要最后一个请求。