div,css,js样式

最新推荐文章于 2025-07-14 13:47:53 发布

飞火龙在天

最新推荐文章于 2025-07-14 13:47:53 发布

阅读量432

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_23145857/article/details/51580774

本文介绍如何使用CSS控制表格的边框、颜色和大小，并通过JQuery实现表格行的奇偶颜色变化及鼠标悬停时的颜色变化效果。此外，还提供了引入CSS样式到HTML页面的不同方法。

//CSS控制Table内外边框、颜色、大小示例

table.msgtable {
border:solid #add9c0;

border-width:1px 0px 0px 1px;

border-color:
}
table.msgtable tbody td {
border:solid #add9c0;
border-width:0px 1px 1px 0px;
padding:0px 0px;
border-color:
}

//Jquery实现对Table表格奇偶行设置颜色及移动鼠标行变色

 
      //页面加载,调用js
     
      $(document).ready(function() {
     
                  pageLoad();  //页面加载，隔行变色
     
              });
     
      //页面加载时，对Table表格移动鼠标行变色操作，通用方法
     
      functionpageLoad() {
     
          //table 中设置class属性[class= msgtable]
     
          $("table[class=msgtable]").each(function() {
     
              var_this = $(this);
     
              //设置偶数行和奇数行颜色
     
              _this.find("tr:even").css("background-color","#f8f8f8");
     
              _this.find("tr:odd").css("background-color","#f0f0f0");
     
              //鼠标移动隔行变色hover用法关键
     
              _this.find("tr:not(:first)").hover(function() {
     
                  $(this).attr("bColor", $(this).css("background-color")).css("background-color","#E0E0E0").css("cursor","pointer");
     
              },function() {
     
                  $(this).css("background-color", $(this).attr("bColor"));
     
              });
     
          });
     
      }

//引入css样式的方法
CSS是Cascading Style Sheets(层叠样式表)的简称。CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。在标准网页设计中CSS负责网页内容(XHTML)的表现。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。可以通过简单的更改CSS文件，改变网页的整体表现形式。
在HTML中引入CSS的方式：
1.直接插入式
如：定义一个段落中首行缩进，
<style type="text/css">
　　
　　</style>
2.使用链接外部样式表
<head>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
3.使用CSS"@import"导入样式表
<style>

</style>
4.在内部元素中使用"STYLE"标记来定义样式表等。
<div style=" position:absolute; right:40px; top:15px;">
<span>你好</span>
</div>
顺序：

浏览器在处理网页中的样式表是按照一定的顺序来处理的，首先检查页面中是否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了；接着检查网页源代码中的"STYLE"标记，有就执行了；接下来再依次检查执行"@import"导入的内部样式表和链接的外部样式表。

--奇偶行颜色也可以这样：

<c:forEach items="${excelList}" var="i" varStatus="obj">
  <c:if test="${obj.count%2 == '0'}">
  <tr style="background-color:#cccccc">
  </c:if>

  <c:if test="${obj.count%2 != '0'}">
  <tr>
  </c:if>

//几种常见的div边框样式

<html>
<head>
<title>边框样式</title>
</head>
<body>
<p style=border-style:none>无边框</p>
<p style=border-style:dotted>点线式边框</p>
<p style=border-style:dashed>破折线式边框</p>
<p style=border-style:solid>直线式边框</p>
<p style=border-style:double>双线式边框</p>
<p style=border-style:groove>槽线式边框</p>
<p style=border-style:ridge>脊线式边框</p>
<p style=border-style:inset>内嵌效果的边框</p>
<p style=border-style:outset>突起效果的边框</p>
</body>
</html>