为了账号安全,请及时绑定邮箱和手机立即绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta "charset=utf-8" />
<title>网页定位导航</title>
<style>
    body,ul,li,a,img,h1,h2{
        margin:0;
        padding:0;
        }
    body{
        font-size:12px;
        }
    .content{
        width:660px;
        margin:0 auto;
        padding:20px;
        }
    .content h1{
        font-size:16px;
        font-weight:bold;
        margin-bottom:20px;
        }
    .content .item{
        padding:20px;
        border:1px dotted #09F;
        margin-bottom:20px;
        }
    .content .item h2{
        font-size:14px;
        font-weight:bold;
        border-bottom:2px solid #06F;
        margin-bottom:20px;
        }
    .content .item li{
        list-style:none;
        display:inline;
        margin:20px;
        }
    .content .item li a img{
        width:109px;
        height:80px;
        border:none;
        }
    .menu{
        position:fixed;
        top:100px;
        left:50%;
        margin-left:330px;
        }
    .menu li{
        list-style:none;
        }
    .menu li a{
        display:block;
        width:80px;
        height:35px;
        line-height:35px;
        text-align:center;
        text-decoration:none;
        color:#000;
        outline:none;
        }
    .menu li a:hover,
    .menu li a.selected{
        background-color:#06F;
        color:#FFF;
        }
</style>
</head>

<body>
<div class="menu">
    <ul>
        <li><a href="#item1" class="selected">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 class="content">
    <h1>地狗购物</h1>
    <div class="item" id="item1">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="1.gif" /></a></li>
            ...
        </ul>
    </div>
    <div class="item" id="item2">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="2.gif" /></a></li>
            ...
        </ul>
    </div>
    <div class="item" id="item3">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="3.gif" /></a></li>
            ...
        </ul>
    </div>
    <div class="item" id="item4">
        <h2>4F 母婴</h2>
        <ul>
            <li><a href="#"><img src="4.gif" /></a></li>
            ...
        </ul>
    </div>
    <div class="item" id="item5">
        <h2>5F 家居</h2>
        <ul>
            <li><a href="#"><img src="5.gif" /></a></li>
            ...
        </ul>
    </div>
</div>
</body>
</html>

544db75b0001493a05000509.jpg

麻烦问下我加了锚链接之后前面三楼都正常出现在屏幕最上方,但是四五楼点了就没反应是什么情况呢?不往上走了

正在回答

1 回答

我複製您的語法後,只改一個地方就OK了耶~

<meta charset=utf-8" />

改成

<meta "charset=utf-8" />

少了一個 " 對後續的code都會影響到,給您參考^^

0 回复 有任何疑惑可以回复我~
#1

web前端攻城虱

charset="UTF-8">
2014-11-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
网页定位导航特效
  • 参与学习       71404    人
  • 解答问题       486    个

本课程讲解网页定位导航特效,仿天猫版地狗购物网,你值得拥有

进入课程
意见反馈 帮助中心 APP下载
官方微信