CSS模型，常用操作，动画

CSS盒子模型

边距

css

td{padding-left:100px;padding-right: 100px;padding-top: 100px;
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边距</title><link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body><table border="1"><tr><td>内边距</td></tr></table>
</body>
</html>

边框

css文件

/*p{border-style: double;border-top-style: dotted;border-width: 5px;border-bottom-width: 10px;border-color:aquamarine;
}*/
p{border-radius: 10px;width:100px;height:50px;background-color: aquamarine;
}
.cssid{background-color: aqua;width:100px;height:100px;text-align: center;box-shadow: 10px 10px 5px red;
}

html5文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边距</title><link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body><p>css边框样式</p><div class="cssid">css阴影效果</div>
</body>
</html>

外边距

css文件

body{margin:0;
}
.mg{background-color: blue;width:100px;height:100px;margin-top:100px;
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边距</title><link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body><div class="mg">外边距</div>
</body>
</html>

盒子模型的应用

css模型

*{margin:0px;padding:0px;
}
.top{width:100%;height:50px;background-color: black;
}
.top_content{width:75%;height:50px;margin: 0px auto;background-color: blue;
}
.body{margin:0px auto;width:75%;height:1500px;background-color: aqua;
}
.body_img{width:100%;height:400px;background-color: darkgoldenrod;
}
.body_content{width:100%;height:1100px;background-color: bisque;
}
.body_no{width:100%;height:50px;background-color: pink;
}
.footing{width:75%;height:330px;background-color: indigo;margin:0px auto;
}
.footing_content{width: 100%;height:350px;background-color: aquamarine;
}
.footing_subnav{width:100%;height:50px;background-color: black;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型的应用</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><div class="top"><div class="top_content"></div></div><div class="body"><div class="body_img"></div><div class="body_content"><div class="body_no"></div></div></div><div class="footing"><div class="footing_content"></div><div class="footing_subnav"></div></div>
</body>
</html>

对齐

css文件

*{margin:0px;
}
.div{width:70%;height:1000px;background-color: red;/*position:absolute;right:0px*//*float:right;*/margin:0px auto;
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>对齐</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><div class="div"></div>
</body>
</html>

分类

css文件

/*.p1{width:400px;line-height:normal;max-width: 250px;
}
.p2{width:400px;line-height:200%;
}
.p3{width:400px;line-height:50%;
}*/
p{cursor:normal;
}
li{display: inline;visibility: hidden;
}

html文件

</head>
<body><!--<p class="p1">this is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web page</p><p class="p2">this is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web page</p><p class="p3">this is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web pagethis is my web page</p>--><ul><li>hello</li><li>hello</li><li>hello</li><li>hello</li></ul>
</body>
</html>

导航

css文件

ul{list-style-type:none;margin:0px;padding:0px;background-color: bisque;width:200px;text-align: center;
}
a:link,a:visited{text-decoration: none;/*display: block;*/background-color: aquamarine;color: red;width:50px;text-align: center;
}
a:active,a:hover{background-color: crimson;
}
li{display:inline;padding-left: 5px;
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><ul><a href="#">导航1</a></ul><ul><a href="#">导航2</a></ul><ul><a href="#">导航3</a></ul><ul><a href="#">导航4</a></ul>
</body>
</html>

图片

body{margin:10px auto;width:90%;height:auto;background-color: blueviolet;
}
.image{border:1px solid darkgray;width:auto;height:auto;float:left;text-align: center;margin:5px;
}
img{margin:5px;opacity: 0.5;
}
.text{font-size:12px;margin-bottom: 5px;
}
a:hover{background-color: burlywood;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>导航</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><div class="image"><a href="#" target="_self"><img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px"></a><div class="text">郑宇盛</div></div><div class="image"><a href="#" target="_self"><img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px"></a><div class="text">郑宇盛</div></div><div class="image"><a href="#" target="_self"><img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px"></a><div class="text">郑宇盛</div></div><div class="image"><a href="#" target="_self"><img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px"></a><div class="text">郑宇盛</div></div>
</body>
</html>

选择器

类选择器

css文件

.p1{color:blue;
}
.p2{font-size:30px;
}
.p1.p2{font-style: italic;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><p class="p1">this is my web page</p><p class="p2">this is my web page</p><p class="p1 p2">this is my web page</p>
</body>
</html>

后代选择器

css文件

.p1{color:blue;
}
.p2{font-size:30px;
}
.p1.p2{font-style: italic;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器</title><link href="Mycss.css" type="text/css" rel="stylesheet"><style>[title]{color:aqua;}[href ="http://www.jikexueyuan.com"]{font-size:30px;}[title~="title"]{font-size:50px;}</style>
</head>
<body><p title="tit">hello</p><p title="title">hello</p><p title="t">hello</p><p title="title hello">hello</p><a href="http://www.jikexueyuan.com">极客学院</a><p>this is my<strong>web<i>hello</i>hello</strong>page</p>
</body>
</html>

css动画

移动

css

div{width:100px;height:100px;background-color: blue;
}
.div2{transform: translate(200px,100px);-webkit-transform: translate(200px,100px);/*safari chrome*/
}

过渡

css文件

div{width:100px;height:100px;background-color: blue;-webkit-transition:width 2s,height 2s,-webkit-transform 2s ;transition:width 2s,height 2s,transform 2s ;transition-delay:2s;
}
div:hover{width:200px;height:200px;transform:rotate(360deg);-webkit-tranform:rotate(360deg);
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡</title><link href="Mycss.css" type="text/css" rel="stylesheet"></head>
<body><div>效果展示</div>
</body>
</html>

动画

css文件

div{width:100px;height:100px;background-color: red;position:relative;animation: anim 5s infinite alternate;-webkit-animation: anim 5s infinite alternate;
}
@keyframes  anim{0%{background: red;left:0px;top:0px}25%{background: blue;left:200px;top:0px}50%{background: aqua;left:200px;top:200px}75%{background: pink;left:0px;top:200px}100%{background: red;left:0px;top:0px}
}
@-webkit-keyframes anim{0%{background: red;left:0px;top:0px}25%{background: blue;left:200px;top:0px}50%{background: aqua;left:200px;top:200px}75%{background: pink;left:0px;top:200px}100%{background: red;left:0px;top:0px}}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡</title><link href="Mycss.css" type="text/css" rel="stylesheet"></head>
<body><div>动画效果</div>
</body>
</html>

分列

css文件

.div1{column-count: 3;-webkit-column-count: 3;-webkit-column-gap: 50px;column-gap: 50px;column-rule: 5px outset #FF0000;-webkit-column-rule:5px outset #FF0000;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡</title><link href="Mycss.css" type="text/css" rel="stylesheet"></head>
<body><div class="div1">大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。</div>
</body>
</html>

css瀑布流

css文件

.container{column-width:250px;-webkit-column-width:250px;-webkit-column-gap: 5px;column-gap: 5px;
}
.contanier div{width:250px;margin:5px;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>瀑布流</title><link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body><div class="contanier"><div><img src="data:image/1.jpg"></div><div><img src="data:image/2.jpg"></div><div><img src="data:image/3.jpg"></div><div><img src="data:image/4.jpg"></div><div><img src="data:image/5.jpg"></div><div><img src="data:image/6.jpg"></div><div><img src="data:image/7.jpg"></div><div><img src="data:image/8.jpg"></div><div><img src="data:image/9.jpg"></div><div><img src="data:image/1.jpg"></div><div><img src="data:image/2.jpg"></div><div><img src="data:image/3.jpg"></div><div><img src="data:image/4.jpg"></div><div><img src="data:image/5.jpg"></div><div><img src="data:image/6.jpg"></div><div><img src="data:image/7.jpg"></div><div><img src="data:image/8.jpg"></div><div><img src="data:image/9.jpg"></div></div>
</body>
</html>

CSS模型，常用操作，动画相关推荐

CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
Openlayers 图层的常用操作
Openlayers 图层的常用操作 OpenLayers 教程 Openlayers 图层的常用操作在线示例 OpenLayers 教程在 Openlayers 中,图层是非常基础的对象,这里汇 ...
菜鸟推荐！海量3D模型、轻松动画绑定。这个网站你要是不知道就亏了
前言菜鸟的最爱做的就是分享,有好东西必须分享那么今天菜鸟给大家分享一个超赞的网址,那么到底有多赞呢!看了下边的介绍你就清楚了正文 1.mixamo mixamo,他只是一个网站(www.mixa ...
3DMAX 1快捷键及常用操作
3DMAX 1快捷键及常用操作开启,关闭快捷键 ,使用快捷键时要按下这个按钮快捷键查看与修改自定义-自定义用户界面(cutomize user interface):设置和查看快捷键位置变换 ...
用《捕鱼达人3》讲解Cocos引擎3D技术（一）：加载鱼的模型和播放动画
大家好,相信许多朋友们都听过或玩过<捕鱼达人>这款游戏.今年7月中旬,<捕鱼达人3>正式发布,24小时就突破实现1千万下载,欢迎大家一起来下载试玩! 本次<捕鱼达人3&g ...
JavaWEB笔记13 jQuery介绍及常用操作
JavaWEB笔记13 jQuery介绍及常用操作文章目录 JavaWEB笔记13 jQuery介绍及常用操作一.jQuery简介: 1.jQuery介绍: 2.jQuery书写风格: 二.jQu ...
第一节：加载鱼的模型和播放动画
大家好,相信许多朋友们都听过或玩过<捕鱼达人>这款游戏.今年7月中旬,<捕鱼达人3>正式发布,24小时就突破实现1千万下载,欢迎大家一起来下载试玩! 本次<捕鱼达人3&g ...
用Python轻松搞定Excel中的20个常用操作
来源 |早起Python(ID: zaoqi-python) Excel与Python都是数据分析中常用的工具,本文将使用动态图(Excel)+代码(Python)的方式来演示这两种工具是如何实现数据 ...
css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码）
前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...

CSS模型，常用操作，动画

CSS模型，常用操作，动画相关推荐

最新文章

热门文章