Heim > Artikel > Web-Frontend > Wie man HTML verwendet, um Positionierungscodebeispiele zu implementieren
Wie man HTML verwendet, um Positionierungscodebeispiele zu implementieren
- 迷茫Original
- 2017-03-25 17:58:293051Durchsuche
In diesem Kapitel wird erläutert, wie Ankerpunkte zur Positionierung verwendet werden. Natürlich ist sie relativ einfach und implementiert auch grundlegende Funktionen. Wenn Sie eine reibungslose Positionierung erreichen möchten, lesen Sie das Kapitel darüber, wie JQuery die Klickseitenanimation implementiert, um den Code eines bestimmten Elements reibungslos zu positionieren. Im Folgenden wird anhand von Codebeispielen vorgestellt, wie HTML die Ankerpositionierung implementiert.
Der Code lautet wie folgt:
<!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>Der obige Code realisiert den Ankerpositionierungseffekt. Der Code ist sehr einfach von Link a zu Um den ID-Attributwert des Elements zu finden, fügen Sie # davor ein.
Das obige ist der detaillierte Inhalt vonWie man HTML verwendet, um Positionierungscodebeispiele zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!