Home > Developer > Web Develop
The floating bar we see is fixed somewhere in the browser, which requires a location.
Position has relative positioning relative, absolute positioning absolut, and we use relative browser positioning fix value.
The background map in the floating bar requires 1.1 points to move the sprite to the right position. This requires skilled use of the Bacground position property
background-position (position coordinate, offset)① Specify a position center/left/right Top/center/bottom write only one property value when another default center ② fill in coordinates position: background-position:50px 100px; (horizontal position, vertical position) (pixels or percent) write only one property value is the default write is horizontal, centered vertically when using pixels: represents the actual distance that the upper-left corner of the picture is moving in all directions, horizontal: Positive move negative, left shift, positive shift, move negative,------left negative right positive, upper negative positiveHere's a left floating bar.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title></title> <Metaname= "keywords"content=""/> <Metaname= "description"content=""/> <styletype= "Text/css">#float_left{width:40px;Height:245px;position:fixed;Top:30%; Left:0px;}#float_left ul Li{List-style:None;width:40px;Height:40px;Background-image:URL (.. /img/lyx.png);background-repeat:no-repeat;Border-bottom:1px solid White;cursor:Pointer;transition:All 0.5s Ease; }#float_left. Li1{background-position:0px-209px;}#float_left. Li2{background-position:-42px-168px;}#float_left. Li3{background-position:0px-126px;}#float_left. Li4{background-position:-42px-84px;}#float_left. Li5{background-position:-41px 0px;}#float_left. Li6{Border-bottom:None;background-position:0px-42px;}#float_left. Div1{width:0px;Height:40px;Background-color:#F6A702;Margin-left:40px;Overflow:Hidden;Color: White;text-align:Center;Line-height:40px;}#float_left. Li2:hover{background-position:0px-168px;}#float_left. Li3:hover{background-position:-42px-126px;}#float_left. Li4:hover{background-position:0px-84px;}#float_left. Li5:hover{background-position:0px 0px;}#float_left. Li6:hover{background-position:-41px-42px;}#float_left li:hover. Div1{width:80px;} </style> </Head> <Body> <DivID= "Float_left"> <ul> <Liclass= "Li1"></Li> <Liclass= "Li2"><Divclass= "Div1">View Feedback</Div> </Li> <Liclass= "Li3"><Divclass= "Div1">Employment Salary</Div></Li> <Liclass= "Li4"><Divclass= "Div1">About the company</Div></Li> <Liclass= "Li5"><Divclass= "Div1">Problems</Div></Li> <Liclass= "Li6"><Divclass= "Div1">QQ Customer Service</Div> </Li> </ul> </Div> </Body></HTML>
As follows:
Of course, do not forget to add hover events, enhance the user's experience ~
Implementation of the side floating bar on the Web page
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
