phpStudy
phpStudy
网站首页
软件下载
PHP教程
编程技术
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
window
Linux
Mac
ASP
服务器
CMS
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
PostgreSQL
SQLite
教程手册
php
html
html5
css
css3
JavaScript
ajax
jquery
sql
ado
asp
aspnet
browsers
careers
dhtml
dotnetmobile
dtd
e4x
glossary
hosting
htmldom
json
media
msnet
quality
rdf
rss
schema
semweb
site
sitemap
smil
soap
svg
tags
tcpip
vbscript
w3c
wap
web
webservices
wmlscript
wsdl
xforms
xhtml
xlink
xml
xmldom
xpath
xquery
xsl
xslfo
网站测速
小皮面板
智能dns
搜索
首页
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标签
<div>
<h3></h3>
</div>
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 d
as
hed #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>
<div>
<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>
</div>
<div>
<h3></h3>
</div>
</body>
</html>
提示:CSS提供了使用负数作为属性值
通过给负数值我们可以做出意想不到的效果
«
»
PHP教程
PHP简介
PHP基本语法
PHP类型
PHP变量
PHP运算符
PHP控制结构
PHP函数
PHP类与对象
PHP异常处理
函数库分类
快速导航
PHP
MySQL
HTML
CSS
JavaScript
MSSQL
AJAX
.NET
JSP
Linux
Mac
ASP
服务器
SQL
jQuery
C#
C++
java
Android
IOS
oracle
MongoDB
SQLite
wamp
交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3