[30期] 新手浅谈CSS 之突破局限小技巧！

拼搏现实的明天。 2022-05-15 08:54 132阅读 0赞

由于做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标签  
<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 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>  
<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提供了使用负数作为属性值  
通过给负数值我们可以做出意想不到的效果