网页项目制作收获2

  1.如下图所示,背景用到了CSS3里面的一个渐变效果,自上而下的渐变,同时用到了3D嵌入边框的效果,还有阴影效果

 

  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.lan6{
                                width:770px;
                                height:286px;
                                 background: -webkit-linear-gradient(#FFF0CE
                    ,#FBF3E2); /* Safari 5.1 - 6.0 */
   background: -o-linear-gradient(#FFF0CE
                    ,#FBF3E2); /* Opera 11.1 - 12.0 */         /*CSS3渐变效果*/
   background: -moz-linear-gradient(#FFF0CE
                    ,#FBF3E2); /* Firefox 3.6 - 15 */
   background: linear-gradient(#FFF0CE
                    ,#FBF3E2);
                    float:left;
                    border-color:#FFF0CE;
                    border-style:inset;        /*3D嵌入边框*/
                    box-shadow: 10px 10px 5px #888888;        
                    border-radius:20px;
                   /* display:none;*/
                     
                    }

   2.如下图所示的内容,每隔1.5秒换内容

  

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
     
    <div id="a03"><h3>阅读   我们要思考不要盲从</h3></div>
</body>
 
 
 
<script type="text/javascript" src="../JS语言/好书特效.js">
 
                window.setInterval("Huan()",1500);     /*间隔1.5秒*/
    var c =0;    /*添加了一个属性,用来使其文字来回变换的作用*/
function Huan()
{
     
    var x = document.getElementById("a03");
    x.innerHTML = "<h3>你需要有深度的阅读</h3>";     /*把内容换掉*/
     
    c = c + 1;
    if(c==1)
    {  
        x.innerHTML = "<h3>阅读   我们要思考不要盲从</h3>";
    }
    else{
        c=0;
         
        }
}
 
 
 
</script>

     总结:用到if判断的这个过程是,一开始,c= 0,c=1,内容换成一开始的阅读   ,c = 2时,走else这里面的, c= 0,c= 1,又走了if,这样就可以实现来回变换.

 

    3.把下图换一个角度

 

        

    

1
2
3
4
5
6
7
8
#ti2{
                                width:1024px;
                                height:120px;
                                margin-top:5px;
                                transform:skew(2deg,2deg);
    -ms-transform:skew(2deg,2deg); /* IE 9 */
    -webkit-transform:skew(2deg,2deg);
                                }

     用到了CSS3里面的2D转换,绕x轴水平方向,绕y轴水平方向倾斜.

 

posted on   左剃头  阅读(294)  评论(0编辑  收藏  举报

(评论功能已被禁用)
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· Tinyfox 简易教程-1:Hello World!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示