如何形成梯子型的网页

以前从来没有注意到的一点小技巧,今天有时间,就记录一下,先看效果啦!

1,首先在html body中,放两个div即可

<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>

2,再来设计css样式:

*{
padding:0px;
margin:0px;
}

.div1{
width:200px;
height:100px;
background-color:#f2f6f8;
border:1px solid #000;
border-bottom:0px;
z-index:100;
position:relative;
text-align:center;
line-height:80px;
}

.div2{
width:600px;
height:200px;
background-color:#f2f6f8;
border:1px solid #000;
position:relative;
top:-2px;
text-align:center;
line-height:180px;
}

观察绿色部分的代码,将div1的下边框设置为0,然后,将div1的优先级提高一些,这样能覆盖div2,特别注意一点的是,z-index只有跟position:relative/absolute,一起使用时才有效,最后一步,将div2往上移一点,这样就能彻底被覆盖啦

时间: 2024-08-08 09:41:36

如何形成梯子型的网页的相关文章

设计梯子型文字

h1 { font-size: 72px; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

使用JQuery快速高效制作网页特效1章

JavaScript是一种描述性语言,也是一种基于对象和事件驱动的,并具有安全性能的脚本语言.JavaScript应用程序都要下载到浏览器的客户端执行,从而减轻了服务器端的负担. 特点: 主要用来向HTML页面中添加交互行为. 是一种脚本语言,语法和java类似. 一般用来编写客户端的脚本. 是一种解释性语言,边执行边解释. 1.ECMAScript标准 ECMAScript是一种开放的,国际上广为接受的,标准的脚本语言规范.它不与任何具体的浏览器绑定. 2.浏览器对象模型(BOM),提供了独立

接收普通消息

当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML数据包到开发者填写的URL上. 请注意: 1.关于重试的消息排重,推荐使用msgid排重. 2.微信服务器在五秒内收不到响应会断掉连接,并且重新发起请求,总共重试三次.假如服务器无法保证在五秒内处理并回复, 可以直接回复空串,微信服务器不会对此作任何处理,并且不会发起重试.详情请见"发送消息-被动回复消息". 3.如果开发者需要对用户消息在5秒内立即做出回应,即使用"发送消息-被动回复消息"接口向用户

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

第九周进度条

  星期一 星期二 星期三 星期四 星期五 星期六 所花时间 (包括上课) 9:10-9:35 8:00-8:50 9:00-9:50 15:20-19:50 19:50-20:12  11:04-11:29 代码量(行)      290       博客量(篇)                          学到的知识点 了解了可操作性需求.可维护性 需求.可移植性需求.安全性需 求 需求如何捕获 提问时可以采取三种提问方式, 金字塔型, 漏斗型,菱型 jsp网页中 绘制需求征集表的表格

利用全局索引定位难缠的页面元素

前言 超级链接是网站中使用非常频繁的HTML元素,可以说超级链接是浏览者和服务器的交互的主要手段. 我们知道有点击链接时,大部分情况下都需要使用txt属性,因为链接没有其他属性可以用来匹配,但不是所有的超链接都支持txt属性特征串的,如果不支持,我们就只能通过索引+标签来定位唯一元素特征字符串了. 前言 咱们来举个栗子,比如我们想点击淘宝淘金币网址上的登陆查看金币明细这个页面元素,正常手动点击的话是会弹出账号登陆窗口的. 咱们启用网页分析工具按F9分析一下,发现这个肉眼看上去貌似是按钮的东西TA

微信公众号开发之消息的接收与被动回复消息

原文:http://blog.csdn.net/qczxl/article/details/51580946 微信官方文档 接收普通消息(http://mp.weixin.qq.com/wiki/17/f298879f8fb29ab98b2f2971d42552fd.html) 接收事件推送(http://mp.weixin.qq.com/wiki/7/9f89d962eba4c5924ed95b513ba69d9b.html) 发送被动回复消息(http://mp.weixin.qq.com/

web前端开发与iOS终端开发的异同[转]

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !importan

从减少http请求数说起

前一阵,给我一个学生做培训,讲到一点点性能优化,然后我很后悔我误导了她.我给她讲减少http请求是多么重要,如何重要,为什么重要,还举了例子来说明这对于大型网站来说是多么重要,讲的头头是道,有理有据,最后把她说的服服帖帖,一切看起来理所当然.但是-. 事情没有那么简单,就像做技术一样,其实去了解一个技术很简单,但是要懂得如何运用这个技术就不是每个人都可以做到的了. 1.理所当然我们是这样想的 关于减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则