刚学css两个星期,自己弄得折叠导航栏

原创 iinsitan 随笔 html/css 274阅读 2017-11-19 02:00:06 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>我的练习</title>
<style type="text/css">*{
margin:0px;padding:0px;
}
.main{
margin: 20px;
width: 600px;
}
h1{
display: inline-block;
width: 100px;height: 40px;
background: pink;
border-radius:9px;
vertical-align: top;
}
h1+div{
display: inline-block;
width: 0px;height: 40px;
background: pink;
transition: all 1s linear;
font-size:30px;
overflow: hidden;
}
.main:hover h1+div{
width: 400px;height: 40px;
background: gold;
}
.ss{
position: relative;
left: 105px;
width: 400px;height: 0px;
background: gold;
transition: all 1s ease;
overflow: hidden;
}
h1+div:hover+div{
width: 400px;height: 400px;
background: #BA55D3;
}</style>
</head>
<body>
<div class="main">
<h1> JS</h1>
<div>直译式脚本语言</div>
<div class="ss">
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能.HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
</div>
</div>

<div class="main">
   <h1>CSS</h1>
   <div>层叠样式表</div>
   <div class="ss">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]
      CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。[2] </div>
</div>

<div class="main">
   <h1>HTML</h1>
   <div>超文本标记语言</div>
   <div class="ss">万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
   </div>
</div>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复