右侧定位的样式

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>右侧定位</title>
		<style>
		 * {
            margin: 0;
            padding: 0;
        }
        #content {
            width: 800px;
            margin: 0 auto;
            padding: 20px;
              border: 1px dotted #0088bb;
        }
           #menu {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 450px;
            width: 50px;
        }
          #menu ul li a {
            display: block;
            margin:  0;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            width: 80px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
        }
		</style>
	</head>
	<body>
		<div id="menu">
    <ul>
        <li><a href="#item1" class="current">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
        <li><a href="#item5">5F 母婴</a></li>
    </ul>
</div>
		<div id="content">
			<a href="#"><img src="img/1F.jpg" alt=""/></a></li>
		</div>
	</body>
</html>

　　使用

left: 50%;
            margin-left: 450px;

　就可以实现

　效果：

posted @ 2017-10-13 10:03  1点  阅读(263)  评论(0)  编辑  收藏  举报