html标签与css样式表

html实线边框的表格样式定义

html实线边框的表格样式定义

table
{
  border-collapse:collapse;
  border-left:solid 1 #000000; border-top:solid 1 #000000;
  padding:5px;
}


th
{
  border-right:solid 1 #000000;
  border-bottom:solid 1 #000000;
  background-color: Silver;
}

td
{
  font:normal;
  border-right:solid 1 #000000;
  border-bottom:solid 1 #000000;
  background-color: transparent;
}

---

表格奇偶行不同颜色

来自 纯CSS table 表格奇偶行不同颜色实现

.table-striped tbody tr:nth-child(odd) td {
  background-color: Red;
}

<table class="table-striped">
</table>

---

CSS发光边框文本框效果

来自 CSS发光边框文本框效果

input[type=text]:focus,input[type=password]:focus,textarea:focus{
  transition:border linear .2s,box-shadow linear .5s;
  -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
  -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
  outline:none;border-color:rgba(241,39,242,.75);
  box-shadow:0 0 8px rgba(241,39,232,.5);
  -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
  -webkit-box-shadow:0 0 8px rgba(241,39,232,3);
}

其中的RGB色彩可以根据个人口味进行改变

---

html table td边框效果

html table td边框效果

同时用样式表为 table、td 指定了边框后，可能会发生重叠，这取决于 border-collapse

<table style="border:1px solid red;border-collapse:collapse;">
  <tr>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
    <td style="border:1px solid blue;">&nbsp;</td>
  </tr>
</table>

在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的

<table border="1" bordercolor="#FF9966" >
  <tr>
    <td width="102" style="border-right-style:none">隐藏右边框</td>
    <td width="119" style="border-left-style:none">隐藏左边框</td>
  </tr>
  <tr>
    <td style="border-top-style:none">隐藏上边框</td>
    <td style="border-bottom-style:none">隐藏下边框</td>
  </tr>
</table>

<table>
  <tr>
    <td style="border-right:#cccccc solid 1px;">显示右边框</td>
    <td style="border-left:#cccccc solid 1px;">显示左边框</td>
    <td style="border-top:#cccccc solid 1px;">显示上边框</td>
    <td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
  </tr>
</table>

<table>
  <tr>
    <td style="border-right : thin dashed blue;">右边框显示细虚线</td>
    <td style="border-bottom: thick dashed yellow;">左边框显示粗虚线</td>
    <td style="border-top: double green;">上边框显示两条线</td>
    <td style="border-left: dotted red;">下边框显示点</td>
  </tr>
</table>

---

实现Parallax效果

Creating Scrolling Parallax Effects with CSS

之前浏览网页，发现一个挺有意思的效果，就是滚动了文章之后，他间隔的背景图片会不断的变化。当时觉得很新奇，就想着该怎么实现，然后用蹩脚的英文在谷歌上输入了几个单词，结果想不到还真的查到了。原来这种效果叫Parallax。实现起来也十分简单：

.parallax {
  height: 70vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

最核心的就是background-attachment: fixed这句。然后再弄一张背景图片：

.parallax-1 {
  background-image: url("...");
}

最后直接使用样式即可:

<section class="parallax parallax-1">
  //...
</section>