DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）资源-CSDN下载

共9个文件

htm：8个

html：1个

4星 · 超过85%的资源需积分: 48 16 浏览量 2011-09-09 10:04:36 上传评论收藏 7KB RAR 举报

在网页设计中，`div`元素是HTML中最基础也是最重要的布局工具之一。它作为一个容器，可以容纳各种内容，如文本、图像、视频等，并通过CSS（Cascading Style Sheets）来控制其样式和布局。本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们可以轻松创建带有圆角的`div`。例如，若要将一个`div`的四个角都设置为10像素的圆角，我们可以这样编写CSS： ```css .rounded-div { border-radius: 10px; } ``` 接下来是`div`的自适应宽度。在响应式网页设计中，我们常常希望`div`能根据浏览器窗口的大小自动调整宽度。`width: 100%`可以让`div`的宽度始终等于其父元素的宽度。另外，使用`max-width`可以限制`div`的最大宽度，以确保在大屏幕上仍保持良好的可读性： ```css .adaptive-div { width: 100%; max-width: 800px; } ``` 背景色渐变是提升页面视觉效果的一个好方法。CSS3的`linear-gradient`函数允许我们创建线性渐变背景。例如，从左至右的红色到蓝色渐变： ```css .gradient-div { background: linear-gradient(to right, red, blue); } ``` 对于多行文本的`div`，我们可能需要让其高度自动适应内容。`overflow: auto`配合`display: block`可以实现这一目标，同时添加`white-space: normal`以保持文本换行： ```css .auto-height-div { overflow: auto; display: block; white-space: normal; } ``` 固定高度的`div`，但内容超出时能自动变高，可以使用`min-height`属性。`min-height`定义了`div`的最小高度，当内容增加时，`div`的高度会自动扩展： ```css .expanding-div { min-height: 200px; } ``` 以上就是关于“DIV进阶效果集”的一部分内容，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度但内容自动变高等。在实际应用中，结合`div`与其他CSS属性，可以创造出更多富有创意和实用性的网页布局。在提供的“div部分效果”压缩包文件中，可能包含了这些效果的示例代码，通过学习和实践，你可以更熟练地掌握这些技巧。

资源推荐

资源详情

资源评论

收起资源包目录

div部分效果.rar （9个子文件）

div部分效果

固定高度div,随内容自动变高css定义方法.htm 1KB

固定表格行列.html 6KB

圆角div（边框ie6、ie8）.htm 1KB

圆角div（全色）.htm 1KB

css边框背景阴影.htm 978B

多行自适应浏览器高度.htm 4KB

DIV自适应宽度.htm 352B

圆角div（边框ie6）.htm 2KB

背景色渐变、透明.htm 598B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <script language="JavaScript">  </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" > <tr> <td>  <table width="240" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3"> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> </table> </td> <td align="left">  <div style="width:300px;overflow-x:hidden;overflow-y:scroll"> <table height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3" id='scroll1' style="table-layout:fixed;"> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> </table> </div> </td> </tr> <tr> <td> <div style="width:240px;height:150px;overflow-y:hidden;overflow-x:scroll"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3" id='scroll2'> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFCC00"> <td width="80">header</td> <td width="80">header</td> <td width="80">header</td> </tr> </table> </div> </td> <td> <div style="width:300px;height:150px;overflow:scroll;" onscroll="javascript:syncscroll(this)"> <table border="0" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3" style="table-layout:fixed;float:left"> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> <tr style="font-size:12px; text-align:center;height:20px;background:#FFFFFF"> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> <td width="80">--</td> </tr> </td> </tr> </table> </body> </html>

评论收藏

内容反馈