广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

HTML往下拉导航栏编码款式,可演试

日期:2021-02-12 浏览:

html里边有一个往下拉导航栏,许多情况下都是有采用,今日共享一个往下拉导航栏的款式编码,自然,往下拉导航栏的款式有多种完成方法,空话很少说,立即上编码:

 !DOCTYPE html  
 html xmlns= 1999/xhtml 
 head runat= server 
  title 往下拉导航栏 /title 
 
  style 
 body {
 width: 95%;
 margin: 0 auto;
 background:red;
 }
 
 #header {
 height: 50px;
 width: 95%;
 }
 
 #nav {
 position: absolute; /*莱单肯定精准定位*/
 }
 
 #nav   li {
 list-style-type: none; /*除掉第一层li里边的标记*/
 float: left; /*将第一层的li横着放置*/
 width: 100px; /*设定总宽*/
 font-size: 30px; /*字体样式尺寸*/
 background-color: #16b6fc; /*情况色调*/
 color: white; /*字体样式色调*/
 } 
 
 #nav li   ul   li {
 list-style-type: none; /*除掉第二层li里边的标记*/
 font-size: 15px; /*字体样式尺寸*/
 padding-top: 8px; /*设定上间隔*/
 padding-bottom: 8px; /*设定下间隔*/
 }
 
 #nav li ul {
 margin-left: 0px; /*将第二层的ul都挪到最左侧*/
 padding-left: 0px; /*将第二层的ul都挪到最左侧*/ 
 display: none; /*掩藏ul內容,掩藏子莱单內容*/
 }
 
 #nav   li:hover ul { /*电脑鼠标放到主莱单上,子莱单会显示信息出去*/
 display: block;
 }
 
 #nav   li   ul   li:hover { /*电脑鼠标放到子莱单上,了莱单的情况和字体样式色调会更改*/
 background-color: white;
 color: black;
 }
 
 #content {
 clear: both;
 padding-left: 40px;
 }
  /style  
 /head 
 body 
  form id= form1  runat= server 
  div 
  div id= header 
  ul id= nav 
  li menu1
  ul 
  li menu11 /li 
  li menu12 /li 
  li menu13 /li 
  /ul 
  /li 
 
  li menu2
  ul 
  li menu21 /li 
  li menu22 /li 
  li menu23 /li 
  /ul  
  /li 
 
  li menu3
  ul 
  li menu31 /li 
  li menu32 /li 
  li menu33 /li 
  /ul 
  /li 
  /ul 
  /div 
  div id= content 
  h1 My Page /h1 
  p 点一下检测往下拉导航栏吧!!! /p 
  /div  
  /div 
  /form 
 /body 
 /html 

小结关键点:HTML往下拉要留意等级构造,次之是要对核心航的混乱目录ul设定肯定精准定位,但是,无需精准定位也可以完成。

赞 2 赏 共享

潜心网站站长发展趋势,发掘SEO排行数据信息登陆密码,推动重庆市seo优化的朋友互相沟通交流!—— 重庆市荣帅SEO本人blog



网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系