HTML を使用して位置決めコード例を実装する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML を使用して位置決めコード例を実装する方法

迷茫

Mar 25, 2017 pm 05:58 PM

この章では、アンカーポイントを使用して配置を実現する方法を紹介します。スムーズな配置を実現するには、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 までご連絡ください。