【HTML+CSS】精灵图(雪碧图)+侧边栏固定

需求:实现下图效果(精灵图+侧边栏固定屏幕)

【HTML+CSS】精灵图(雪碧图)+侧边栏固定_第1张图片

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵图+侧边栏固定title>
    <style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        .section {
            text-align: center;
            padding: 20px;
            height:700px;
            color: #fff;
        }
/*        #nav {
            position: fixed;
            bottom:20px;
            right:10px;
            width:120px;
            height: 521px;
        }*/
        .a1 {
            display: block;
            position: fixed;
            top: 171px;
            right: 10px;
            width: 120px;
            height: 35px;
            background : url(./navbar.png) no-repeat -1px -50px;
        }
        .a2 {
            display: block;
            position: fixed;
            top: 211px;
            right: 10px;
            width: 120px;
            height: 35px;
            background : url(./navbar.png) no-repeat -1px -91px;
        }
        .a3 {
            display: block;
            position: fixed;
            top: 251px;
            right: 10px;
            width: 120px;
            height: 35px;
            background : url(./navbar.png) no-repeat -1px -130px;
        }
    style>
head>


<body>
    <div class="section" id="section01" style="background:#369;">
        <h2>五折抄底h2>
    div>
    <div class="section" id="section02" style="background:#f90;">
        <h2>疯狂秒杀h2>
    div>
    <div class="section" id="section03" style="background:#abc;">
        <h2>电视家影h2>
    div>
    


    <div id="nav">
        
        <a href="#section01" class="a1">a>
        <a href="#section02" class="a2">a>
        <a href="#section03" class="a3">a>
    div>
    

body>
html>

【HTML+CSS】精灵图(雪碧图)+侧边栏固定_第2张图片

转载于:https://www.cnblogs.com/neymargoal/p/9470873.html

你可能感兴趣的:(【HTML+CSS】精灵图(雪碧图)+侧边栏固定)