web 基础练习/设计简易导航网站(6)

网站导航 使用段落标记和超链接实现网站导航

百度     新浪     网易     腾讯     搜狐     360搜索


利用无序列表实现水平导航条
<!-- prj3_3.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站导航</title>
		<style type= "text/css">
		u1{list- style一type:none;  / *去掉无序列表前面的符号*/
		font-size:22px; line-height:33px; }
		li{ width:100px;display:inline;   / *列表项在一行中显示*/ }
		div{text-align:center;}
		</style>
	</head>
	<body>
		使用段落标记和超链接实现网站导航<br>
		<div>
		<p>
			<a href="http://www.baidu.com/">百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.sina.com.cn/">新浪</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.qq.com/">网易</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.sohu.com/">腾讯</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.163.com/">搜狐</a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.google.com.hk/">360搜索</a>
		</p>	
		</div>
		<hr align="center" size= "3" color=#0066ff">
		利用无序列表实现水平导航条
		<div>
			<ul type="discl">
				<li><a href="http://www.baidu.com/">百度</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<li><a href="http://www.sina.com.cn/">新浪</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<li><a href="http://www.qq.com/">网易</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<li><a href="http://www.sohu.com/">腾讯</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<li><a href="http://www.163.com/">搜狐</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<li><a href="http://www.google.com.hk/">360搜索</a></li>
			</ul>
		</div>
	</body>
</html>

发布了12 篇原创文章 · 获赞 0 · 访问量 191

猜你喜欢

转载自blog.csdn.net/qq_45083698/article/details/104735500
今日推荐