Home > Developer > Web Develop
1. Responsive layout:
<link rel= "stylesheet" href= "1.css" media= "screen and (min-width:1000px)" >
<style>
@media screen and (min-width:600px) {
. one{
border:1px solid red;
height:100px;
width:100px;
}
}
</style>
and logical vs. only, device list
* * This is a simple demo*******
<style>
@media screen and (min-width:1024px) {
. list{
min-width:1024px;
height:300px;
border:1px solid red;
}
. left{
Width:70%;height:100%;float:left;background:blue;
}
. right{
Width:30%;height:100%;float:left;background:green;
}
}
@media screen and (max-width:1024px) {
. list{
min-width:1024px;
height:300px;
border:1px solid red;
}
. left{
Width:100%;height:100%;float:left;background:blue;
}
. right{
Display:none;
}
}
</style>
*****************************
2. Border
Border-style:solid;
border-width:2px;
border-radius:0;
border-color:red;
********************
box-shadow:2px 2px 5px #000; offset in//x direction, offset in Y-direction, blur degree of shadow, color of shadow.
The IE8 needs to be compatible.
Border-image-source:url (border.png);//The path used in the border picture
border-image-slice:26; Image Border offset Inward
border-image-width:26;//
border-image-outset:5;//border picture exceeds the amount of border
Border-image-repeat:stretch round;//border picture should be tiled repeat, covered with round, or stretched stretch
/******** This is a demo**********/of a carousel graph using the Background property
3.
<script>
Window.onload=function () {
var div=document.getelementsbytagname ("div") [0];
var Positionarr= (GetStyle (Div, "backgroundposition")). Split (",");
Var num=0;
SetInterval (function () {
if (num==positionarr.length) {
num=0;
}
for (var i=0; i<positionarr.length; i++) {
if (i==num) {
positionarr[i]= "0 0";
} else{
positionarr[i]= " -500px-500px";
}
}
Div.style.backgroundposition=positionarr.join (",");
num++
},3000)
}
function GetStyle (obj,attr) {
if (window.getComputedStyle) {
Return getComputedStyle (Obj,null) [attr];
}else{
return obj.currentstyle[attr];
}
}
</script>
<style>
div{
width:200px;height:200px;
Background-image:url (1.jpg), url (2.jpg), url (3.jpg);
Background-repeat:no-repeat;
background-size:100% 100%,100% 100%,100% 100%;
background-position:0px 0px,-500px-500px,-500px-500px;
}
</style>
<body>
<div>
</div>
</body>
/*******************/
4. Text Model:
Hide Text-overflow Property with text overflow: div.test {text-overflow:ellipsis;}
Note: The container must be set Overflow:hidden
Allows splitting of long words and wrapping to the next line: p {word-wrap:break-word;}
White-space:nowrap, Chinese force no line break
/* Simple demo*/
<style>
div{
width:50px;border:1px solid red;
Overflow:hidden;
White-space:nowrap;
text-overflow:ellipsis;//Changed into a.
}
div:hover{
overflow:visible;
}
</style>
<body>
<div>
We are all flowers of the motherland
</div>
</body>
****************************
-webkit-text-fill-color:blue;
-WEBKIT-TEXT-STROKE:1PX Red;//stroke can be understood as the meaning of a border
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:pink;
text-shadow:5px 5px 5px #FF0000;//Horizontal Shadow, vertical Shadow, blur distance, and shadow color
/* This is a simple demo*/
<style>
div{
cursor:pointer;font-size:40px;
}
div:hover{
/*text-shadow:1px 1px 3px #000000; */
}
</style>
<script>
Window.onload=function () {
var div=document.getelementsbytagname ("div") [0];
var num=0;
var T;
Div.onmouseover=function () {
Clearinterval (t);
T=setinterval (function () {
num++;
if (num>=5) {
Clearinterval (t)
}else{
div.style.textshadow=num+ "px" +num+ "px" +num+ "px #333";
}
},60)
}
Div.onmouseout=function () {
Clearinterval (t);
T=setinterval (function () {
num--;
if (num<=0) {
Clearinterval (t)
}else{
div.style.textshadow=num+ "px" +num+ "px" +num+ "px #333";
}
},60)
}
}
</script>
<body>
<div>
It was a joyous ode to Joy, hahaha,
</div>
5. Colors and gradients
The HSL color model is a color standard for industry,
Background:hsla (0,100%,60%,0.5);//hue, saturation, brightness, transparency
Note: If you want to make the background fully transparent, you can use it, background:transparent
Simple CSS3 linear Gradient some browsers with lower versions require prefixes, and the latest versions do not require prefixes
Background:-webkit-linear-gradient (red, blue);
Background:-o-linear-gradient (red, blue);
Background:-moz-linear-gradient (red, blue);
Background:linear-gradient (red, blue);
/* Standard syntax */default gradient direction from top to bottom
Left-to-right gradient
Background:-webkit-linear-gradient (left, red, blue);
Background:-o-linear-gradient (right, red, blue);
Background:-moz-linear-gradient (right, red, blue);
Background:linear-gradient (to right, red, blue);
/* Standard syntax */(right-to-left)
From upper left to lower right corner
Background:-webkit-linear-gradient (left Top, red, blue);
Background:-o-linear-gradient (bottom right, red, blue);
Background:-moz-linear-gradient (bottom right, red, blue);
Background:linear-gradient (to bottom right, red, blue);
/* Standard syntax */(same as other diagonal) use angle
Background:-webkit-linear-gradient (40deg, red, blue);
Background:-o-linear-gradient (40deg, red, blue);
Background:-moz-linear-gradient (40deg, red, blue);
Background:linear-gradient (40deg, red, blue);
/* Standard Syntax */
*************************************************************
Gradients for multiple color nodes
Gradient
Background:-webkit-linear-gradient (red, green, blue);
Background:-o-linear-gradient (red, green, blue);
Background:-moz-linear-gradient (red, green, blue);
Background:linear-gradient (red, green, blue);
/* Standard Syntax */example:
Rainbow Gradient
Background:-webkit-linear-gradient (Left,red,orange,yellow,green,blue,indigo,violet);
Background:-o-linear-gradient (Left,red,orange,yellow,green,blue,indigo,violet);
Background:-moz-linear-gradient (Left,red,orange,yellow,green,blue,indigo,violet);
Background:linear-gradient (to right, red,orange,yellow,green,blue,indigo,violet);
/* Standard Syntax */
You need to define where each color is located you can follow the color with a percent semicolon
Background:linear-gradient (to right bottom,red 0, Green 50%, Blue 100%);
/* Standard notation */need to use transparency to set the color format to
RGBA (255,255,255,0);
Repeating linear gradients
Background:-webkit-repeating-linear-gradient (red, yellow 10%, green 20%);
Background:-o-repeating-linear-gradient (red, yellow 10%, green 20%);
Background:-moz-repeating-linear-gradient (red, yellow 10%, green 20%);
Background:repeating-linear-gradient (red, yellow 10%, green 20%);/* Standard syntax */
Vector gradients:
Simple CSS3 radial gradient with uniform distribution of radial gradient color nodes:
Background:-webkit-radial-gradient (red, green, blue);
Background:-o-radial-gradient (red, green, blue);
Background:-moz-radial-gradient (red, green, blue);
Background:radial-gradient (red, green, blue);
/* Standard syntax */color node unevenly distributed radial gradient:
Background:-webkit-radial-gradient (red 5, Green 15%, Blue 60%);
Background:-o-radial-gradient (red 5, Green 15%, Blue 60%);
Background:-moz-radial-gradient (red 5, Green 15%, Blue 60%);
Background:radial-gradient (Red 5, Green 15%, Blue 60%);
/* Standard Syntax */
Repeating radial gradient
Background:-webkit-repeating-radial-gradient (red, yellow 10%, green 15%);
Background:-o-repeating-radial-gradient (red, yellow 10%, green 15%);
Background:-moz-repeating-radial-gradient (red, yellow 10%, green 15%);
Background:repeating-radial-gradient (red, yellow 10%, green 15%);/* Standard syntax */
**********************************************************
There is also a special type of gradient:
<style>
div{
Font-size:12em;
Color:green;
Background:-webkit-gradient (linear,0 0,0 bottom,from (red), to (green));
-webkit-background-clip:text;
-webkit-text-fill-color:rgba (0,0,0,0);
}
</style>
<body>
<div>
No bosom friend, the world who does not know June
</div>
*********************************************************************
6. Several properties of the column:
Column-count the number of columns that the specified element should be delimited.
COLUMN-GAP Specifies the interval between columns.
Column-rule sets the shorthand properties for all column-rule-* properties.
Column-width the width of the specified column.
7. resize:none|both|horizontal|vertical; The last two attributes mean a width that can be adjusted, and a height that can be adjusted.
8. Box-sizing:content-box|border-box|inherit;
9. Aside from IE, the rest is supported
OUTLINE:2PX solid Green;
outline-offset:9px;
10.CSS3 Clear Float
Selector:before,selector:after {content: ""; Display:block; } selector:after {Clear:both;}
11.
CSS3 What you need to remember during an interview
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
