【HTML+CSS】页内侧边导航栏 页内导航

页内侧边导航栏 页内导航

源码

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="CSS/subnav.css" />
	</head>
	<body>
		
		<!-- 导航栏部分 -->
		<div class="control">
			<div class="left">
				<div class="subNav">
					<div class="part1 part"><a href="#part1">part1</a></div>
					<div class="part2 part"><a href="#part2">part2</a></div>
					<div class="part3 part"><a href="#part3">part3</a></div>
					<div class="part4 part"><a href="#part4">part4</a></div>
				</div>
			</div>
			
			<!-- 正文部分 -->
			<div class="content">
				<a name="part1"></a>
				<div class="container1">
					<div class="text1 text">
						<div class="title1 title">title</div>
						Doxycycline (doxycycline hyclate, doxycycline 
						hydrochloride or Dox), a synthetic tetracycline 
						(Tc) derivative, is the effector molecule for 
						Clontech's Tet-On® and Tet-Off® Inducible 
						Expression Systems. Dox can be used at 
						100-fold lower concentrations than Tc, 
						yielding inducing concentrations ranging 
						from 1ng/ml to 1 µg/ml. In the Tet-On System, 
						addition of Dox to culture medium induces a 
						conformational change in the transactivator 
						which allows it to bind to tet operator 
						sequences located in the inducible promoter. 
						This results in transcriptional activation of the 
						gene of interest. In the Tet-Off System, removal 
						of Dox from culture medium induces binding 
						of the transactivator, resulting in transcription 
						of the gene of interest.
					</div>
				</div>
				
				<a name="part2"></a>
				<div class="container2">
					<div class="text2 text">
						<div class="title2 title">title</div>
						Doxycycline (doxycycline hyclate, doxycycline 
						hydrochloride or Dox), a synthetic tetracycline 
						(Tc) derivative, is the effector molecule for 
						Clontech's Tet-On® and Tet-Off® Inducible 
						Expression Systems. Dox can be used at 
						100-fold lower concentrations than Tc, 
						yielding inducing concentrations ranging 
						from 1ng/ml to 1 µg/ml. In the Tet-On System, 
						addition of Dox to culture medium induces a 
						conformational change in the transactivator 
						which allows it to bind to tet operator 
						sequences located in the inducible promoter. 
						This results in transcriptional activation of the 
						gene of interest. In the Tet-Off System, removal 
						of Dox from culture medium induces binding 
						of the transactivator, resulting in transcription 
						of the gene of interest.
					</div>
				</div>
				
				<a name="part3"></a>
				<div class="container3">
					<div class="text3 text">
						<div class="title3 title">title</div>
						Doxycycline (doxycycline hyclate, doxycycline 
						hydrochloride or Dox), a synthetic tetracycline 
						(Tc) derivative, is the effector molecule for 
						Clontech's Tet-On® and Tet-Off® Inducible 
						Expression Systems. Dox can be used at 
						100-fold lower concentrations than Tc, 
						yielding inducing concentrations ranging 
						from 1ng/ml to 1 µg/ml. In the Tet-On System, 
						addition of Dox to culture medium induces a 
						conformational change in the transactivator 
						which allows it to bind to tet operator 
						sequences located in the inducible promoter. 
						This results in transcriptional activation of the 
						gene of interest. In the Tet-Off System, removal 
						of Dox from culture medium induces binding 
						of the transactivator, resulting in transcription 
						of the gene of interest.
					</div>
				</div>
				
				<a name="part4"></a>
				<div class="container4">
					<div class="text4 text">
						<div class="title4 title">title</div>
						Doxycycline (doxycycline hyclate, doxycycline 
						hydrochloride or Dox), a synthetic tetracycline 
						(Tc) derivative, is the effector molecule for 
						Clontech's Tet-On® and Tet-Off® Inducible 
						Expression Systems. Dox can be used at 
						100-fold lower concentrations than Tc, 
						yielding inducing concentrations ranging 
						from 1ng/ml to 1 µg/ml. In the Tet-On System, 
						addition of Dox to culture medium induces a 
						conformational change in the transactivator 
						which allows it to bind to tet operator 
						sequences located in the inducible promoter. 
						This results in transcriptional activation of the 
						gene of interest. In the Tet-Off System, removal 
						of Dox from culture medium induces binding 
						of the transactivator, resulting in transcription 
						of the gene of interest.
					</div>
				</div>
				
				
			</div>
			
		</div>
		
		
		
	</body>
</html>

CSS部分

*{
	padding: 0;
	margin: 0;
}
body{
	background: #eeeeee;
}

.control{
	width: 1075px;
	height: auto;
	margin: 0 auto;
}
.left,.content{
	height: auto;
	margin: 20px 5px;
}
.left{
	width: 200px;
	display: inline-block;
	vertical-align: top;
	
}
.subNav{
	height: auto;
	background-color: white;
	padding: 10px;
	width: 180px;
	position: fixed;
}
.content{
	width: 850px;
	background-color: white;
	display: inline-block;
	
}
.part{
	text-align: center;
	line-height: 60px;
	border-bottom: 1px solid #d9d9d9;
	border-radius: 5px;
	color: #000000;
}
a{
	text-decoration: none;
	color:black;
	display: block;
}
.part:hover{
	background: #eeeeee;
	cursor: pointer;
}
.part4{
	border: none;
}
.text{
	line-height: 30px;
	width: 80%;
	margin: 25px auto;
	height: auto;
	min-height: 500px;
}
.container2,.container4{
	background: #e5e5e5;
}
.title{
	line-height: 40px;
}
.container2,.container4{
	overflow: hidden;
}


效果

在这里插入图片描述

  • 5
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值