前端~腾讯课堂选项卡部分代码
来源：互联网 发布：完美root软件 编辑：程序博客网 时间：2024/05/18 03:31
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>选项卡制作</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,h3,p{margin: 0;padding: 0;}
a{text-decoration: none;
color: #928F8F;
font-size: 14px;}
a:hover{text-decoration: underline;}
#nav{width: 220px;
background:/*#0477c0*//*rgba(0, 0, 0, 0.0980392)*/rgba(0, 0, 0, 0.0666667);
margin: 0 0 0 100px;
float: left;
/*border: 1px solid #000;*/}
.title{line-height:50px ;
color: #000000;
font-family: "微软雅黑";
background: rgba(0, 0, 0, 0.0980392) url(img/title.png) no-repeat 20px;
text-indent: 45px;}
ul{}
li{position: relative;
list-style: none;
height: 70px;
text-indent: 10px;
/*border-bottom: 1px solid #0099ff;*/
}
li:hover{background: rgb(255,255,255);}
h3{color: #000000;
line-height: 40px;
font-weight: 600;
font-size: 16px;
background: url(img/li.png) no-repeat 184px;}
#nav ul li .menu{position: absolute;
display: none;
left: 220px;
top: 0;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="nav">
<div class="title">
全部课程
</div>
<ul>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
<div class="menu">
<img src="img/2.png"/>
</div>
</li>
<li>
<h3>IT培训</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>语言学习</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>中小学/大学</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>兴趣爱好</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>亲子课堂</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#nav ul li").hover(function(){
$(this).find(".menu").show();
},function(){
$(this).find(".menu").hide();
});
</script>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>选项卡制作</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,h3,p{margin: 0;padding: 0;}
a{text-decoration: none;
color: #928F8F;
font-size: 14px;}
a:hover{text-decoration: underline;}
#nav{width: 220px;
background:/*#0477c0*//*rgba(0, 0, 0, 0.0980392)*/rgba(0, 0, 0, 0.0666667);
margin: 0 0 0 100px;
float: left;
/*border: 1px solid #000;*/}
.title{line-height:50px ;
color: #000000;
font-family: "微软雅黑";
background: rgba(0, 0, 0, 0.0980392) url(img/title.png) no-repeat 20px;
text-indent: 45px;}
ul{}
li{position: relative;
list-style: none;
height: 70px;
text-indent: 10px;
/*border-bottom: 1px solid #0099ff;*/
}
li:hover{background: rgb(255,255,255);}
h3{color: #000000;
line-height: 40px;
font-weight: 600;
font-size: 16px;
background: url(img/li.png) no-repeat 184px;}
#nav ul li .menu{position: absolute;
display: none;
left: 220px;
top: 0;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="nav">
<div class="title">
全部课程
</div>
<ul>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
<div class="menu">
<img src="img/2.png"/>
</div>
</li>
<li>
<h3>IT培训</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>语言学习</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>中小学/大学</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>兴趣爱好</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>亲子课堂</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#nav ul li").hover(function(){
$(this).find(".menu").show();
},function(){
$(this).find(".menu").hide();
});
</script>
</html>
阅读全文
0 0
- 前端~腾讯课堂选项卡部分代码
- 腾讯课堂新手前端训练营day1
- 腾讯课堂新手前端训练营day2-盒子模型训练
- 腾讯课堂携手动脑学院，独家联合运营，顶级前端开发课程风暴来袭
- 腾讯课堂Day2作业
- 腾讯课堂Day4作业
- 腾讯课堂Day5作业
- 腾讯课堂结业作业
- node腾讯课堂笔记
- web前端选项卡demo
- android模拟新浪腾讯title选项卡
- Javascript简单选项卡_妙味课堂
- 网页选项卡代码
- 网页选项卡代码
- 纵向选项卡代码
- js-选项卡代码
- 10.30部分课堂笔记
- 【攻略】前端特工 - 腾讯CodeStar代码星计划
- git 操作笔记
- (二)用 svm 识别手写体数字图片
- I2C设备驱动
- Android Studio Gradle
- JZOJ 5378. 【NOIP2017提高A组模拟9.19】闷声刷大题(60分)
- 前端~腾讯课堂选项卡部分代码
- maven(ssm)
- 算法学习之动态规划--最长公共子序列
- hdu 1251 统计难题
- AndroidStudio的文件的结构,so文件配置
- opencv3.1.0+contrib模块编译总结
- linux添加开机自启动脚本示例详解
- day3——利用python创立ORM
- 第二周项目三-体验复杂度
