HTML5 实现左边单击链接时，右边显示内容

最新推荐文章于 2023-10-17 17:30:11 发布

凌冰_

最新推荐文章于 2023-10-17 17:30:11 发布

阅读量6.3k

点赞数 5

分类专栏： HTML5

本文链接：https://blog.csdn.net/hlx20080808/article/details/103531370

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果:

<style type="text/css">
			p,ul,li,div,a {
				margin: 0px;
				padding: 0px;
			}
			
			#dd { /*大小*/
				width: 100%;
				height: 300px;
			}
			
			ul { /*左边导航*/
				width: 10%;
				height: 200px;
				list-style: none;
				float: left; /*左浮动*/
			}
			
			li {
				line-height: 50px;
			}
			
			div.my { /*右边显示内容*/
				width: 75%;
				height: 850px;
				/*border: 1px solid red;*/
				float: left;
				overflow: hidden;
			}
		</style>

<body>
		<div id="dd">
			<ul>
				<li>
					<a href="lly.html" target="main">1号店订单</a>
				</li>
				<li>
					<a href="lly.html" target="main">我的预约</a>
				</li>
				<li>
					<a href="wushuhan.html" target="main">常购订单</a>
				</li>
			</ul>

			<div class="my">
				<iframe name="main" width="100%" height="100%" src="lly.html" frameborder="0" seamless></iframe>
			</div>
		</div>
	</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

凌冰_

关注关注

5
点赞
踩
55

收藏

觉得还不错? 一键收藏
1
评论
HTML5 实现左边单击链接时，右边显示内容

效果:<style type="text/css"> p,ul,li,div,a { margin: 0px; padding: 0px; } #dd { /*大小*/ width: 100%; height: 300px; } ul { /*左边导航*/ width: ...
复制链接

扫一扫