ホームページ > 記事 > ウェブフロントエンド > HTML を使用して位置決めコード例を実装する方法
HTML を使用して位置決めコード例を実装する方法
- 迷茫オリジナル
- 2017-03-25 17:58:293051ブラウズ
この章では、アンカー ポイントを使用して配置を実現する方法を紹介します。スムーズな配置を実現するには、jquery によって実装されたクリック ページ アニメーション メソッドを参照して、特定の要素コードのセクションをスムーズに配置します。 以下は、HTML でアンカー配置を実装する方法を紹介するコード例です。
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://www.100sucai.com</title>
<style type="text/css">
.a{
width:60px;
height:20px;
background:#F90;
font-size:12px;
text-align:center;
line-height:20px;
position:fixed;
right:0px;
top:50px;
cursor:pointer;
display:block;
text-decoration:none;
}
#thep{
width:100%;
height:50px;
background:#CCC;
margin-top:100px;
}
</style>
</head>
<body style="height:1000px;">
<a class="a" href="#thep">点击定位</a>
<p id="thep">
<li><a href="http://www.100sucai.com/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li>
<li><a href="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li>
</p>
</body>
</html>上記のコードは、リンク a の href 属性値を、配置する要素の id 属性値に設定するという非常に単純なコードです。先頭に # を追加します。
以上がHTML を使用して位置決めコード例を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。