JavaScript development sliding door tutorial layout
First let’s look at the following expected effects
When the mouse clicks on the title above, the content below will change
Let’s look at the following html code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color:#000;}
li{float:left;width:75px;height:26px;line-height:26px;text-align:center;padding:0 1px;
border-top:1px solid #eee;list-style:none;}
#tanContainer{
width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;}
#tabCon a{color:#999;}
#tabCon a:hover{color:red;}
#tabCon div {display:none;}
#tabCon div.fdiv {display:block;}
.mod{margin:10px 6px;}
.mod ul li{float:left;width:150px;height:25px;}
.fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;
padding:0;font-weight:bolder;}
.fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li class="fli"><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="tabCon">
<div class="fdiv">
<ul>
<li><a href="#">张勇：要玩快乐的足球!</a></li>
<li><a href="#"> 阿里2000万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱!</a></li>
<li><a href="#">多行跟进阿里信用贷款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">个人重要信息要管牢！</a></li>
<li><a href="#"> 卖家防范红包欺诈提醒!</a></li>
<li><a href="#">更换收货地址的陷阱！</a></li>
<li><a href="#">注意骗子的技术升级了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益机构淘宝开店攻略!</a></li>
<li><a href="#">走进无声课堂!</a></li>
<li><a href="#">淘宝之行大众评审赢公益金!</a></li>
<li><a href="#">爱心品牌联合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
new file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color:#000;}
li{float:left;width:75px;height:26px;line-height:26px;text-align:center;list-style:none;padding:0 1px;
border-top:1px solid #eee;}
#tanContainer{
width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;}
#tabCon a{color:#999;}
#tabCon a:hover{color:red;}
#tabCon div {display:none;}
#tabCon div.fdiv {display:block;}
.mod{margin:10px 6px;}
.mod ul li{float:left;width:150px;height:25px;}
.fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;
padding:0;font-weight:bolder;}
.fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li class="fli"><a href="#">公告</a></li>
<li><a href="#">规则</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="tabCon">
<div class="fdiv">
<ul>
<li><a href="#">张勇：要玩快乐的足球!</a></li>
<li><a href="#"> 阿里2000万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱!</a></li>
<li><a href="#">多行跟进阿里信用贷款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">个人重要信息要管牢！</a></li>
<li><a href="#"> 卖家防范红包欺诈提醒!</a></li>
<li><a href="#">更换收货地址的陷阱！</a></li>
<li><a href="#">注意骗子的技术升级了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益机构淘宝开店攻略!</a></li>
<li><a href="#">走进无声课堂!</a></li>
<li><a href="#">淘宝之行大众评审赢公益金!</a></li>
<li><a href="#">爱心品牌联合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝之行大众评审赢公益金</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)