First, black and white imageWhen you need to make a color picture appear in black and white, you can use the following code.
img.desaturate{
Filter:grayscale (100%);
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-ms-filter:grayscale (100%);
-o-filter:grayscale (100%);
}
Second, use: not () apply/deselect border on menu
Add a border to each menu item first
. Nav li{
border-right:1px solid #666;
}
And then remove the last element
. Nav li:last-child{
Border-right:none;
}
You can also use the: not () pseudo-class to apply the element directly
. Nav li:not (: last-child) {
BORDER-RIGHT:1PX Solid #666
}
If your element has sibling elements, you can also use the Universal Bear End selector (~)
. Nav li:first-child ~ li{
BORDER-LEFT:1PX Solid #666
}
Third, the top of the page shadow
Add a nice top shadow effect to the page
body:before{
Content: ";
position:fixed;
Top: -10px;
left:0;
width:100%;
height:10px;
-webkit-box-shadow:0px 0px 10px Rgba (0,0,0,.8);
-moz-box-shadow:0px 0px 10px Rgba (0,0,0,.8);
box-shadow:0px 0px 10px Rgba (0,0,0,.8);
z-index:100;
}
Iv. add row height to body
You don't have to give p,h. Add row height, direct:
body{
Line-height:1;
}
Five, everything is vertically centered
html,body{
height:100%;
margin:0;
}
body{
-webkit-align-items:center;
-ms-flex-align:center;
Align-items:center;
Display:-webkit-flex;
Display:flex;
}
IE11 need to pay attention to Flexbox
Six, comma-delimited list
Make an HTML list item look like a real, delimited list
UL > Li:not (: Last-child):: after{
Content: ",";
}
Vii. using negative nth-child to select items
Use negative nth-child in CSS to select items 1 to Project n
Ji=
Display:none;
}
Li:nth-child (-n+3) {
Display:block;
}
Viii. using SVG for icons
. logo{
Background:url ("Logo.svg");
}
Nine, optimize display text
Sometimes, fonts don't get the best display on all devices, so you can have your device browser help you
html{
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
text-rendering:optimizelegibility;
} Web front end Interactive communication group 434623999, go to the group to receive free video learning Oh
Practical CSS advanced tips, there is always one you need!
