Give it first, see. The main completion when the mouse is placed on the pagination of the number will show a larger effect
Implementation ideas:
(1). Use floating properties so that the LI elements are arranged horizontally.
(2). Set the A element to block-level elements, and then set their dimensions.
(3). Use the link pseudo-class control when the mouse is placed above the link to make the a element size larger; Use absolute positioning to enable the A element to cover the surrounding elements. Special Note: The background color of the A element is set to white because the default state background is transparent, otherwise you will see a shaded border on both sides.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">ul{List-style:None; }ul Li{float: Left;width:22px;Height:22px;Margin-left:5px; }a{Display:Block;width:20px;Height:20px;text-align:Center;text-decoration:None;Background-color: White;Border:1px solid #666; }a:hover{width:40px;Height:30px;Border:1px solid #666;position:relative;Line-height:30px;margin:-5px 0 0-10px; } </style> </Head> <Body> <ul> <Li><ahref="#">1</a></Li> <Li><ahref="#">2</a></Li> <Li><ahref="#">3</a></Li> <Li><ahref="#">4</a></Li> <Li><ahref="#">5</a></Li> </ul> </Body></HTML>
[Liu Yang Java]_css digital pagination effect
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
