博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
动态网页的建立
阅读量:5759 次
发布时间:2019-06-18

本文共 3040 字,大约阅读时间需要 10 分钟。

hot3.png

使用css样式实现动态网页

html:

1  2 
3 4 5
6 7 8 9
43 44

css:

1 body,ul,h2,h3 {  2     margin:0px;  3     padding:0px;  4 }  5 ul{  6     list-style:none;  7 }  8 a{  9     text-decoration:none; 10 } 11 body{ 12     background-image:url(http://localhost:2491/EX_Asp_Net/image/20.png) ; 13 } 14 .list{ 15     height:auto; 16     width:100%; 17     margin-top:50px; 18 } 19 .list li{ 20     height:100px; 21     width:500px; 22     margin-left:100px; 23      24     background-color:#fff; 25     margin-bottom:10px; 26     box-shadow:0px 5px 5px #ddd; 27     position:relative; 28    -webkit-transition:all 0.5s ease; 29 } 30 .list .icon{ 31     display:block; 32     width:90px; 33     width:90px; 34     font-size:45px; 35     line-height:90px; 36     text-align:center; 37     float:left; 38     margin-left:20px; 39     text-shadow:0 0 5px red; 40     -webkit-transition:all 0.5s ease; 41 } 42 .list .text{ 43     height:70px; 44     width:300px; 45     float:left; 46     margin-top:25px; 47     -webkit-animation:0.5s 0.2s ease; 48 } 49 .text h2, .text a{ 50     color:#333; 51     font-size:30px; 52     text-shadow:1px 2px 4px #999; 53     -webkit-transition:all 0.5s ease; 54 } 55 .text h3{ 56     font-size:16px; 57     color:#666; 58     margin-top:5px; 59     -webkit-transition:all 0.5s ease; 60 } 61 .list .border{ 62     height:100px; 63     width:10px; 64     background-color:#f90; 65     position:absolute; 66     left:0px;top:0px; 67     visibility:hidden ; 68     -webkit-transition:all 0.5s ease; 69 } 70 .list li:hover{ 71     background-color:#000; 72  73 } 74 .list li:hover h2, .list li:hover a{ 75     color:#fff; 76     font-size:20px; 77 } 78 .list li:hover h3{ 79    font-size:29px; 80    color:#f60; 81  82 } 83 .list li:hover .icon{ 84     color:#f90; 85     font-size:70px; 86 } 87 .list li:hover .border{ 88     visibility:visible ; 89     left:490px; 90 } 91 .list li:hover  .text{ 92     -webkit-animation-name:shake; 93 } 94 @-webkit-keyframes shake{/*创建动画*/ 95     0%,100%{ 96         -webkit-transform:translate(0) ; 97     } 98     20%,60%{ 99          -webkit-transform:translateX(-10px) ;100     }101     40%,80%{102         -webkit-transform:translateX(10px) ;103     }104 }

转载于:https://my.oschina.net/dongteng/blog/684430

你可能感兴趣的文章
用JDBC操作MySQL——获取表的大小
查看>>
hibernate crud
查看>>
视觉slam学习之路(一)看高翔十四讲所遇到的问题
查看>>
isdigit函数
查看>>
option等为空的选择
查看>>
IOS学习笔记--Objective-C之Foundation框架
查看>>
windows phone ListBox 的 bug
查看>>
装甲车团队介绍(别急,在做了)
查看>>
C#图书资源【更新中...】喜欢的就转存吧
查看>>
阻止长按复制页面中的内容;zepto中touch中的应用必须先加载event模块之后;
查看>>
Java基础-编写问候语-“Hello World”
查看>>
《老梁四大名著情商课》笔记- 刚上班,别做林黛玉,也别做孙悟空
查看>>
一个前端入门后需要看看的
查看>>
Springboot如何优雅的解决ajax+自定义headers的跨域请求[转]
查看>>
《口算大作战 2》标准版
查看>>
实验0 了解和熟悉操作系统
查看>>
Canvas rontate(旋转) 使用误区
查看>>
使用C#调用金诚信71x系列读卡器的DLL
查看>>
EL有11个隐含对象
查看>>
后缀自己主动机(SAM)学习指南
查看>>