学习链接是:

https://www.runoob.com/css3/css3-tutorial.html

####################################################################

css3教程

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:rotate(50deg);-ms-transform:rotate(50deg); /* IE 9 */-webkit-transform:rotate(50deg); /* Safari and Chrome */
}
</style>
</head>
<body><div>你好。这是一个 DIV 元素。</div><div id="div2">你好。这是一个 DIV 元素。</div></body>
</html>

效果如下:

#############################################################################################

CSS3边框-CSS3 盒阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{width:300px;height:100px;background-color:green;box-shadow: 10px 20px 5px #888888;
}
</style>
</head>
<body><div></div></body>
</html>

#############################################################################################

CSS3圆角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px; width: 200px;height: 150px;
}#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px; width: 200px;height: 150px;
}#rcorners3 {border-radius: 25px;background: url(/images/paper.gif);background-position: left top;background-repeat: repeat;padding: 20px; width: 200px;height: 150px;
}
</style>
</head>
<body><p> border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角:</p>
<p id="rcorners1">圆角</p>
<p>指定边框元素的圆角:</p>
<p id="rcorners2">圆角</p>
<p>指定背景图片元素的圆角:</p>
<p id="rcorners3">圆角</p></body>
</html>

#############################################################################################

CSS3 背景

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#example1 {background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;padding: 15px;
}
</style>
</head>
<body><div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div></body>
</html>

效果：

#############################################################################################

CSS3 渐变（Gradients）

线性渐变 - 对角

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {height: 200px;background-color: red; /* 不支持线性的时候显示 */background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body><h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p></body>
</html>

代码大意是div中的id调用了上面style中调用的css代码

#############################################################################################

css3 文本效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1
{text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body><h1>Text-shadow effect!</h1><p><b>注意:</b> Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.</p></body>
</html>

#############################################################################################

CSS3 字体

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
@font-face
{font-family: myFirstFont;src: url('Serif.ttf'),url('Serif.eot'); /* IE9 */
}div
{font-family:myFirstFont;
}
</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p><div>
使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体
</div></body>
</html>

#############################################################################################

CSS3 2D 转换

rotate() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{width:100px;height:75px;background-color:red;border:1px solid black;
}
div#div2
{transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body><div>你好。这是一个 DIV 元素。</div><div id="div2">你好。这是一个 DIV 元素。</div></body>
</html>

#############################################################################################

CSS3 3D 转换

给的例子效果不是太好。(跳过)

#############################################################################################

CSS3 过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;
}
/*    transition-duration:1s;的意思是鼠标离开后，保持"延长效果"的 时间*/
/*    transition-delay:2s:1s;的意思是鼠标放到上面以后，触发"延长效果"的所需要的等待时间*/
div:hover
{width:200px;
}
</style>
</head>
<body><p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p></body>
</html>

效果是鼠标移动到红色方块上，红色方块会延长。

#############################################################################################

css3动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */
}@keyframes myfirst
{from {background:red;}to {background:yellow;}
}@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:red;}to {background:yellow;}
}
</style>
</head>
<body><p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p><div></div></body>
</html>

效果是鼠标移动上去，红色会变成柠檬黄色。

和鼠标操作相关的效果，都称为"响应式"，一定会在代码中出现和"@"相关的css代码。

#############################################################################################

CSS3 多列

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.newspaper
{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;
}
</style>
</head>
<body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p><div class="newspaper">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div></body>
</html>

效果就是把一篇文章分三列

######################################################################################

CSS3 用户界面

外形修饰

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px;
}
</style>
</head>
<body><p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p><div>这个 div有一个轮廓边界15 px边境外的边缘。</div></body>
</html>

######################################################################################

CSS3图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img {max-width: 100%;height: auto;
}
</style>
</head>
<body><h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p><img src="//www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"></body>
</html>

######################################################################################

CSS3 按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center;   text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;box-shadow: 0 9px #999;
}.button:hover {background-color: #3e8e41}.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);
}
</style>
</head>
<body><h2>按钮动画 - "按压效果"</h2><button class="button">Click Me</button></body>
</html>

代码上方是定义"鼠标不在按钮上面"，“鼠标在按钮上面”以及"鼠标点击按钮"时的效果。

######################################################################################

CSS分页实例

他这个意思其实就是你看小说或者看漫画的时候的第几页的标签选择

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}/*这个意思是，页码是只在一行显示，还是一行只显示一个页码*//*设置页码的字体*/
ul.pagination li a {color: red;float: left;padding: 8px 16px;text-decoration: none;
}/*设置标签被选中后页码的颜色*/
ul.pagination li a.active {background-color: #4CAF50;color: white;
}/*设置鼠标悬停的时候的标签背景颜色*/
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body><h2>点击及鼠标悬停分页样式</h2>
<p>移动鼠标的分页的数字上。</p>
<ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li>
</ul></body>
</html>

######################################################################################

css3 框大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.div1 {width: 300px;height: 100px;border: 1px solid blue;
}.div2 {width: 300px;height: 100px;    padding: 50px;border: 1px solid red;
}
</style>
</head>
<body><div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div></body>
</html>

######################################################################################

css3弹性盒子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey;
}.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px;
}
</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>
</html>

######################################################################################

CSS3 多媒体查询实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {list-style-type: none;
}
/*这个是用来设置左侧的三个黑点是否存在的*/ul li a {color: green;/*这个是在设置联系人名字的颜色*/text-decoration: none;padding: 3px; display: block;
}@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;/*这个是在设置联系人名字和左侧之间的距离*/background: url(email-icon.png) left center no-repeat;/*设置邮箱图标*/}
}
</style>
</head>
<body><h1>重置浏览器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
</ul></body>
</html>

菜鸟教程-css3学习笔记相关推荐

python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
菜鸟教程-css学习笔记
CSS实例中有很多CSS的例子,可以学习. <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
Java菜鸟教程系列学习笔记总结基础篇(1)
基础语法本博客通过学习菜鸟教程Java专栏,并整理得出的Java基础知识. 命名规范 1.项目名全部小写 2.包名全部小写 3.类名首字母大写,如果类名由多个单词组成,每个单词的首字母都要大写.如: ...
菜鸟教程-Javascript学习笔记-JS函数之前
教程连接是: https://www.runoob.com/js/js-tutorial.html DOM(一些操作页面元素的方法) BOM(一些操作浏览器的方法) ################# ...
菜鸟教程PHP学习笔记（不定期更新）
NO.1-PHP表单验证代码详细注释版 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...
菜鸟教程Cpp学习笔记
一.面向对象开发的特征面向对象开发的四大特性: 封装抽象继承多态二.C++ 中的类型限定符限定符含义 const const 类型的对象在程序执行期间不能被修改改变. volatile ...
Java菜鸟教程系列学习笔记总结面向对象篇(1)
继承继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 继承的特性子类拥有父类非 private 的属性.方法. 子类 ...
【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
千峰HTML5+CSS3学习笔记
千峰HTML5+CSS3学习笔记文章目录千峰HTML5+CSS3学习笔记写在前面 1. 前言 2. HTML 3. CSS 3.1 选择器 3.2 CSS属性 4. 盒子模型 4.1 溢出属性 ...

菜鸟教程-css3学习笔记

CSS3 背景

CSS3 渐变（Gradients）

CSS3 字体

CSS3 2D 转换

rotate() 方法

CSS3 3D 转换

CSS3 过渡

CSS3 多列

CSS3 用户界面

CSS3 多媒体查询实例

菜鸟教程-css3学习笔记相关推荐

最新文章

热门文章