呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

网站CSS样式

超链接样式

默认情况下超链接显示样式:

当鼠标悬停在超链接上时的显示样式:

CSS代码:

.postBody a{    /* 默认样式*/
    color: #bd6208;
    padding:2px 3px 3px 3px;
}
.postBody a:hover{      /* 鼠标悬停样式 */
    background: #bd6208;
    color: #ffffff;
    text-decoration:none;
}

漂亮的table表格样式

这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。

只要一个table标签加上class="altrowstable"就可以看到效果。

css+js

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(name){
    if(document.getElementsByTagName){  

        var table = document.getElementsByClassName(name);  
        var i,j;
        for (i = 0; i < table.length; i++) {
            var rows = table[i].getElementsByTagName("tr"); 

            for(j = 0; j < rows.length; j++){          
                if(j % 2 == 0){
                    rows[j].className = "evenrowcolor";
                }else{
                    rows[j].className = "oddrowcolor";
                }      
            }
        }
    }
}

window.onload=function(){
    altRows('altrowstable');
}
</script>

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
table.altrowstable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.altrowstable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
.oddrowcolor{
    background-color:#d4e3e5;
}
.evenrowcolor{
    background-color:#c3dde0;
}
</style>

html

<!-- Table goes in the document BODY -->
<table class="altrowstable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

效果:

 

原创声明

转载请注明:呓语 » 网站CSS样式