https://www.runoob.com/css/css-pseudo-classes.html
https://www.runoob.com/try/try.php?filename=trycss_image_gallery_responsive
https://www.runoob.com/css/css-image-sprites.html
https://blog.csdn.net/u010510187/article/details/82790963
https://www.runoob.com/css/css-attribute-selectors.html
https://www.runoob.com/cssref/css-selectors.html
position: sticky ;
box-sizing: border-box;//适应到border 里，不会超出 自动取消边框的宽度
resize: none; //用户是否可以调整大小
transition: width 0.4s ease-in-out; //动画
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。
可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width
background-image: linear-gradient(#ededed, #9198e5);
background-image:linear-gradient(-280deg,green,yellow);
background-image:repeating-linear-gradient(-280deg,green,yellow);
background-image: radial-gradient(red, yellow, green);
background-image: radial-gradient(circle , red, yellow, green);
@font-face
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
//css transition
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transition: width 10s, height 10s, transform 2s;
}
#div2:hover{
transform: rotateX(145deg);
}
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
//css transition
//css transition 2
#div3
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
top:150px;
transition: width 10s, height 10s, transform infinite;
transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3:hover{
/*transform: rotateX(145deg) ;*/
width:300px;
}
//css transition2
// animation 1
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 2s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
// animation 1
太阳系轨道
https://c.runoob.com/codedemo/5528
//CSS3 多列
<style>
.newspaper
{
column-count:4;
word-wrap:break-all;
column-gap: 40px;
column-rule-style: dashed;
column-rule-width: 1px;
column-rule-color: lightblue;
column-width: 200px;
}
</style>
</head>
<body>
<h2>英国维斯米斯特教堂碑文</h2>
<div style="display:none;">
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
<div class="newspaper">
<div>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界</div>
<div>当我成熟以后</div>
<div>当我进入暮年以后</div>
<div>当我现在躺在床上</div>
</div>
//CSS3 多列
//css3 resize
resize:both; /*用户自己可以调整边框的大小*/
//CSS3 缩略图
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width:100px ;
height:60px;
}
//CSS3 缩略图
//CSS3 椭圆
img {
border-radius: 55%;
}
//CSS3 椭圆
//CSS3 滤镜
CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
blur, brightness contrast grayscale, huerotate, invert, opacity, saturate, sepia, shadow,
//CSS3 滤镜
//CSS3 图片的模态
https://www.runoob.com/try/try.php?filename=trycss_image_modal_js
//CSS3 图片的模态
//CSS3 按钮 禁用
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
//CSS3 按钮 禁用
//CSS3 按钮 clear 添加后可以清除后面的内容，使后续内容换行
clear:both;
//CSS3 按钮 clear 添加后可以清除后面的内容，使后续内容换行
//CSS3 flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>https://www.runoob.com/css3/css3-flexbox.html</title>
<style>
body {
}
.flex-container {
direction: ltr;
flex-direction:row;/*flex-direction: row | row-reverse | column | column-reverse*/
justify-content: space-around;
/*justify-content: flex-start | flex-end | center | space-between | space-around 水平方向*/
align-items: stretch;
/*align-items: flex-start | flex-end | center | baseline | stretch 纵轴方向*/
flex-wrap: inherit;
/*flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit; flex-wrap 属性用于指定弹性盒子的子元素换行方式*/
align-content:stretch;
/*align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items,
但它不是设置弹性子元素的对齐，而是设置各个行的对齐.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
*/
display: flex;
width: 200px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
/*align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
*/
.alignself{
align-self: center;
}
/*flex 属性用于指定弹性子元素如何分配空间。*/
.oneflex{
flex:1;
}
.twoflex{
flex:2;
}
.first {
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item twoflex">flex item 1</div>
<div class="flex-item first alignself oneflex">flex item 2</div>
<div class="flex-item oneflex">flex item 3</div>
</div>
</body>
</html>
//CSS3 flex
<!-- css make layout -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img
{
position:absolute;
/* clip:rect(0px,60px,200px,0px);*/
clip:circle(1px,1px)
}
.headtitle{
background-color:black;
width:100%;
height:70px;
padding:2px;
}
.headtitle ul{
float:left;
margin:8px 10px 1px -20px;
}
.headtitle ul li{
display:inline-block;
list-style-type:none;
padding:17px;
background-color:yellow;
display:transparent;
margin-right:-1px;
}
.headtitle ul li a{
color:white;
}
.headtitle ul li a:hover{
color:red;
}
.headtitle ul li a.active{
color:#008CBA;
background-color: transparent;
}
</style>
</head>
<body>
<div class="headtitle">
<ul>
<li><a link="#">ADD</a></li>
<li><a link="#" class="active">BOND</a></li>
<li><a link="#">CIRCLE</a></li>
</ul>
</div>
</body>
</html>
<!-- media --->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
@media screen and (max-device-width:361px)
{
p.test {font-family:verdana,sans-serif;font-size:14px;color:green;}
}
@media screen and (min-device-width:361px) and (max-device-width:836px)
{
p.test {font-family:times,serif;font-size:10px;color:purple;}
}
@media screen and (min-device-width:837px) and (max-device-width:1536px)
{
p.test {font-family:times,serif;font-size:10px;color:red;}
}
</style>
<script>
function showscreen(){
alert(window.screen.width);
}
</script>
</head>
<body>
<p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
<button οnclick="showscreen()">press</button>
</body>
</html>
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
