Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1621310
  • 博文数量: 1481
  • 博客积分: 26784
  • 博客等级: 上将
  • 技术积分: 17045
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-12 09:22
文章分类

全部博文(1481)

文章存档

2014年(10)

2013年(353)

2012年(700)

2011年(418)

分类: IT职场

2011-08-17 09:01:08

由于做WEB美工有两年时间了,现在兄弟连学PHP自己又变回新手。八过,木前发现偶多PHP学员在CSS项目界面时未能做出自己满意的界面,在此,我将续发关于CSS样式在实际应用中的一些小技巧,灰常实用哦!

今天要说的是,突破局限!
先给大家看看一个效果
效果图

估计许多同学看到了,会想边框是用图片做出来的吧!
其实那是用了一个H3和一个DIV就可以层叠出以上效果

首先:
1.把背景设置为黑色

body{
background:#000;
color:#fff;
}

2. 写一个DIV框
div {
width:400px;
height:200px;
margin:50px auto;
border:1px solid #fff;
}

3.在DIV框中,嵌套一个H3标签





h3 我们给它一个宽度 100像素 高度 30像素
让他的边框是白色

4.突破局限 使用position属性
此时 H3标签已经被DIV包含了,并且靠顶部左边位置
下来,我们对它进行定位显示
估计许多学员会问,DIV包含了

标签,那么会h3能显示的范围也就只能在DIV区域内。
果真是这样吗?我们给H3标签赋予position属性,值设置relative 让它相对定位
那么我们就可以用Left right top bottom 等属性来对它定位了
因为、H3默认已经靠顶部了,我们希望他越出DIV边界再往上一点
那么我们可以给他设置一个
top:-15px;
这个属性即可,
这样,这样好H3标签有正好居中压线

当然,TOP的值你可以给-30甚至更高自定义

如果发现透过H3标签显示DIV的边框,
可以给H3标签设置一个与背景一样的颜色,
这样就会盖过被压住部分DIV上边框了

效果就这样做完了




浅谈CSS突破局限




热点新闻



  • 突破局限CSS突破局限CSS

  • 突破局限CSS突破局限CSS

  • 突破局限CS突破局限CSSS

  • 突破局限CSS突破局限CSS

  • 突破局限CSS突破局限CSS

  • 突破局限CS突破局限CSS









提示:CSS提供了使用负数作为属性值
通过给负数值我们可以做出意想不到的效果

原文地址:

阅读(190) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~