[30期] 新手浅谈CSS 之 突破局限小技巧!
2013-08-30 14:20
211 查看
由于做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></h3>
h3
我们给它一个宽度 100像素 高度 30像素
让他的边框是白色
4.突破局限 使用position属性
此时
H3标签已经被DIV包含了,并且靠顶部左边位置
下来,我们对它进行定位显示
估计许多学员会问,DIV包含了<H3>标签,那么会h3能显示的范围也就只能在DIV区域内。
果真是这样吗?我们给H3标签赋予position属性,值设置relative
让它相对定位
那么我们就可以用Left right top bottom
等属性来对它定位了
因为、H3默认已经靠顶部了,我们希望他越出DIV边界再往上一点
那么我们可以给他设置一个
top:-15px;
这个属性即可,
这样,这样好H3标签有正好居中压线
当然,TOP的值你可以给-30甚至更高自定义
如果发现透过H3标签显示DIV的边框,
可以给H3标签设置一个与背景一样的颜色,
这样就会盖过被压住部分DIV上边框了
效果就这样做完了
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>浅谈CSS突破局限</title>
<style
type="text/css">
ul
{
list-style:none;
margin-top:0px;
width:300px;
position:relative;
top:-20px;
}
li {
border-bottom:1px dashed
#ccc;
margin-top:10px;
}
body{
background:#000;
color:#fff;
}
div
{
width:400px;
height:200px;
margin:50px auto;
border:1px
solid #fff;
}
h3
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px
solid
#fff;
position:relative;
top:-15px;
background:#000;
left:20px;
}
</style>
</head>
<body>
<h3>热点新闻</h3>
<ul>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CS突破局限CSSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CS突破局限CSS</li>
</ul>
<h3></h3>
</body>
</html>
提示:CSS提供了使用负数作为属性值
通过给负数值我们可以做出意想不到的效果
原文地址:http://bbs.lampbrother.net/read-htm-tid-92226.html
阅读(44) | 评论(0) | 转发(0) |
0
上一篇:第一个项目
下一篇:[33期] 第一个项目感想
相关热门文章
毕业五年(续)
毕业五年
职业生涯规划
中国软件开发工程师之痛...
闲置书处理!
大家都是用什么来管理hadoop集...
网站被人挂了吗,添加了些程序...
Nginx如何保证不走宕机的那个...
大家谈谈MYSQL客户端和服务器...
以下代码运行后为何会输出5?...
给主人留下些什么吧!~~
评论热议
今天要说的是,突破局限!
先给大家看看一个效果
效果图
估计许多同学看到了,会想边框是用图片做出来的吧!
其实那是用了一个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></h3>
h3
我们给它一个宽度 100像素 高度 30像素
让他的边框是白色
4.突破局限 使用position属性
此时
H3标签已经被DIV包含了,并且靠顶部左边位置
下来,我们对它进行定位显示
估计许多学员会问,DIV包含了<H3>标签,那么会h3能显示的范围也就只能在DIV区域内。
果真是这样吗?我们给H3标签赋予position属性,值设置relative
让它相对定位
那么我们就可以用Left right top bottom
等属性来对它定位了
因为、H3默认已经靠顶部了,我们希望他越出DIV边界再往上一点
那么我们可以给他设置一个
top:-15px;
这个属性即可,
这样,这样好H3标签有正好居中压线
当然,TOP的值你可以给-30甚至更高自定义
如果发现透过H3标签显示DIV的边框,
可以给H3标签设置一个与背景一样的颜色,
这样就会盖过被压住部分DIV上边框了
效果就这样做完了
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>浅谈CSS突破局限</title>
<style
type="text/css">
ul
{
list-style:none;
margin-top:0px;
width:300px;
position:relative;
top:-20px;
}
li {
border-bottom:1px dashed
#ccc;
margin-top:10px;
}
body{
background:#000;
color:#fff;
}
div
{
width:400px;
height:200px;
margin:50px auto;
border:1px
solid #fff;
}
h3
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px
solid
#fff;
position:relative;
top:-15px;
background:#000;
left:20px;
}
</style>
</head>
<body>
<h3>热点新闻</h3>
<ul>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CS突破局限CSSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CSS突破局限CSS</li>
<li>突破局限CS突破局限CSS</li>
</ul>
<h3></h3>
</body>
</html>
提示:CSS提供了使用负数作为属性值
通过给负数值我们可以做出意想不到的效果
原文地址:http://bbs.lampbrother.net/read-htm-tid-92226.html
阅读(44) | 评论(0) | 转发(0) |
0
上一篇:第一个项目
下一篇:[33期] 第一个项目感想
相关热门文章
毕业五年(续)
毕业五年
职业生涯规划
中国软件开发工程师之痛...
闲置书处理!
大家都是用什么来管理hadoop集...
网站被人挂了吗,添加了些程序...
Nginx如何保证不走宕机的那个...
大家谈谈MYSQL客户端和服务器...
以下代码运行后为何会输出5?...
给主人留下些什么吧!~~
评论热议
相关文章推荐
- [30期] 新手浅谈CSS 之 突破局限小技巧!
- 浅谈css命名规则(新手必看)
- 适合新手的CSS网页布局小技巧整理
- 做网页很实用代码集合和CSS制作网页小技巧整理
- 浅谈CSS包含块Containing Block
- 浅谈CSS两栏、三栏自适应布局
- 移动端CSS一些小技巧
- 浅谈css的伪元素::after和::before
- (原)浅谈C# runat="server"(新手值得注意)
- 浅谈css中图片定位之所有图标放在一张图上
- DIV+CSS中10句新手最有用的css代码
- css小技巧
- CSS新手必备CSS技巧
- 浅谈CSS布局
- 浅谈纯CSS实现轮播
- 【转】编写CSS时的小技巧
- [css小技巧]input去除边框问题
- 浅谈4种css引用样式
- 【前端新手之路第五天】横向导航栏,html+css+js原生代码
- CSS背景background使用攻略 新手必看!