div,css,js样式

来源：互联网发布：浏览器是80端口吗编辑：程序博客网时间：2024/04/27 17:23

//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>

1 0