Home > Developer > Web Develop
1. as follows:
2.CSS implementations
In the code below, red and green are two ways to do this, and you can choose one.
<!doctype html>body{background: #ebebeb; }. nav{width:560px; height:50px; Font:bold0/50px Arial; text-Align:center; margin:40px Auto0; Background: #f65f57; /*Make a circle*/Border-radius:8px; /*make navigation stereoscopic style*/Box-shadow:0px 5px #b64b41; }. Nav a{display:inline-Block; -webkit-transition:all 0.2s ease-inch; -moz-transition:all 0.2s ease-inch; -o-transition:all 0.2s ease-inch; -ms-transition:all 0.2s ease-inch; Transition:all0.2s ease-inch; }. Nav a:hover{-webkit-transform:rotate (10DEG); -moz-transform:rotate (10DEG); -o-transform:rotate (10DEG); -ms-transform:rotate (10DEG); Transform:rotate (10DEG); }. Nav li{position:relative; Display:inline-Block; padding:016px; Font-size:13px; Text-shadow:1px 2px 4px Rgba (0,0,0,.5); List-Style:none outside none; } /*//Do not use pseudo-elements to create divider lines
. Nav li{Background:linear-gradient (to right, #dd2926, #a82724) no-repeat right/1px 15px; }. Nav Li:last-child {background:none; } */ / * Use pseudo-elements to create a navigation list item separator line */. Nav li::after{content: ""; Position:absolute; right:0px; top:17px; width:1px; height:15px; Background:linear-gradient (to right, #dd2926, #a82724) no-repeat top right/1px 15px; }/* Deletes the first and last navigation dividers */. Nav li:last- child::after {background:none; } . Nav a,. Nav a:hover{color: #fff; Text-Decoration:none; } </style>CSS3 Making a stereo navigation menu
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
