页内侧边导航栏 页内导航

  • 源码
    • 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;
}

效果

【HTML+CSS】页内侧边导航栏 页内导航相关推荐

  1. 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

    文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...

  2. React Native 的顶部导航栏和底部导航栏目

    说来也是惭愧,本来关于底部导航栏,我已经写过一篇博客,只不过那篇更偏向于入门一些,当时一实现功能之后就迫不及待的分享给大家了.地址在这儿:http://blog.csdn.net/LJFPHP/art ...

  3. Android中导航栏之自定义导航布局

    Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...

  4. Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？

    Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件 参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件 下载保存为AntDes ...

  5. 微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；

    1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...

  6. css:动画 高级垂直导航栏 王者荣耀导航栏

    垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  7. 软件顶部的导航栏怎么测试,导航条测试点——你想到多少？

    关键字:软件测试.web测试 这两天网站在进行导航条改版,进行了测试,发现导航条测试有这么些测试点,今天想想记录一下吧,兴许可以唤醒写blog的动力.导航条到底有哪些测试点呢?期待各位同行补充各自的观 ...

  8. html页面跳转时导航栏不变_解决Vue-iview封装导航栏刷新，导航栏消失之坑

    1.前言 记录一次跳转路由时,导航栏选中消失的神秘事件. 2.事情原图 请看这张图,一开始路由跳转到这页面时,导航栏是有高亮的,但是在刷新的时候,高亮就消失了: 总所周知,客户是一种可以从鸡蛋里面挑出 ...

  9. uniapp模拟导航栏，自定义导航栏的使用

    文章目录 需求 隐藏原生导航 局部页面隐藏 全局页面隐藏(一般用不到) 使用:页面结构与样式 需求 在做uniAPP的时候,官方的导航栏不满足设计页面的需求,需要自定义才可以实现,于是就把原生的导航栏 ...

最新文章

  1. jquery easyui datagrid使用参考
  2. window.open()函数参数说明
  3. SolrPerformanceFactors--官方文档
  4. 安踏半年劲收超228亿 再创中国运动品牌新高
  5. 【Pytorch神经网络理论篇】 05 Module类的使用方法+参数Parameters类+定义训练模型的步骤与方法
  6. 论文浅尝 - IJCAI2020 | KGNN：基于知识图谱的图神经网络预测药物与药物相互作用...
  7. thinkcmf ajax,thinkcmfx 中如何用jquery ajax提交数据，自己尝试去做之后，还是没法提交，求助！...
  8. oracle能闪回多久,oracle 闪回基于时间的恢复
  9. [转]Unity3D新手引导开发手记
  10. jquery 获取tr里的值_jquery获取tr中控件值并操作tr实现思路
  11. 警察与小偷的实现之中的一个client与服务端通信
  12. Ubuntu、Windows10 设置多个网卡连接网络的优先级（默认路由器设置）IPv4 + IPv6
  13. 软考中级软件设计分享
  14. 计算机硬件性能测试过程,鲁大师怎么检测电脑硬件性能 鲁大师测试硬件方法...
  15. 电子邮件发错了怎么撤回？原来邮件误发也有“后悔药”
  16. Windows使用SSH登录VM虚拟机
  17. ffmpeg给视频添加时间水印
  18. WC Java 实现
  19. [MM32生态]EVB-L0136开发学习分享
  20. java列转行_关于java8根据某个字段分组,列转行的问题

热门文章

  1. 安装Glusterfs
  2. 图像基本操作——图像边界填充和图像融合
  3. 线段树（详细注释—pushdown写法）
  4. 活着——活着就是对生命最好的尊重
  5. FFMPEG入门资料---001---介绍和参数说明
  6. 新款H3C服务器R4900配置raid
  7. 达梦数据库 find_in_set 函数适配
  8. java 语言的简介
  9. 变频泵 计算机控制技术,变频泵站节约能耗的计算机控制技术浅析
  10. 003 Rust 网络编程，使用 IpAddr