项目2test_我的个人主页_锚点

1. 给大家特别分享的是,如何在单独的页面内的跳转,这是页面内地一种超级链接,我们把它叫做锚点

   锚点的使用步骤: 1. <a  name="abc"> 需要链接的目的地内容</a>

                                 2. 在需要链接的地方使用:<a href="#abc"></a>    使用时不可以掉了#符号哦。单独abc是链接不过去滴。

================================================================================================

2. 制作

参考代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{
background-color:#96A4A7;
}
#h1_div{
background-color:#ffae00;
font-family: "黑体";
font-size:36px;
text-align:center;
}
#link{ text-align:center;
}
#link a{ color:#ffae00;
font-size:18px;
}
.p1{ text-decoration: underline;}
#bg{ border:2px dotted #333; padding:5px;}

</style>
</head>

<body>
<div id="h1_div">
<h3>欢迎光临我的主页 </h3>
</div>
<div id="link">
<p><a href="#">我的爱好</a> | <a href="#">我的家乡</a> |<a href="#"> 我的日志</a> | <a href="#">我的相册</a> | <a href="#">请你留言</a> </p>
</div>
<p class="p1">先来个自我介绍吧:
我的名字:小明
我的生日:1984年7月10日
我的住址:重庆南坪 </p>
<p><strong>我的爱好:</strong> </p>
<ul>
<li>画画 </li>
<li>打篮球 </li>
<li>游泳 </li>
</ul>
<p><strong>我的家乡-重庆 </strong></p>
<p>走出重庆江北机场,处于亚热带季风性湿润气候带的重庆,用她的温暖和湿润,将参加“魅力重庆网上行”采访活动的我迎入了她的怀抱。 </p>
<p>这是立体感极强的城市。从渝北区到渝中区这段车行中,汽车一直穿行在不同的坡道上。沿途所见,是应接不暇的错落景观:巍峨的高山间,拔起一座座现代楼宇;点缀其中的,是枝繁叶茂的黃桷树在迎风昂首;而不经意间,嘉陵江就映入眼帘,这条流淌千年的河流,纵流1119公里,于此注入长江。车未到目的地,我已经开始喜欢这座城市的美了。 </p>
<p class="p1">夜幕降临的重庆城区,万家灯火与水色天光交相辉映,璨若星河。美景引人入胜,也许重庆八年来的成就,就藏在她的身后,等待我们去亲历,去发现,去体验。 </p>
<p><strong>我的日志: </strong></p>
<ol>
<li>军训感言 </li>
<li>大学生活 </li>
<li>工作体会 </li>
</ol>
<div id="bg">
<p><strong>我的相册: </strong></p>
<p><img src="images/img2.jpg" alt="imag1" width="200" height="300" /><img src="images/img4.jpg" alt="imag2" width="200" height="300" /><img src="images/img3.jpg" alt="imag3" width="200" height="300" /><img src="images/img1.jpg" alt="image4" width="200" height="300" /></p>
</div>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/Treying/p/9265211.html
今日推荐