css学习8

最新推荐文章于 2020-06-16 11:45:19 发布

yuezheyue123

最新推荐文章于 2020-06-16 11:45:19 发布

阅读量151

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yuezheyue123/article/details/86689109

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.设置背景图片后，当内容变化的时候，背景图片是可以被拉伸的，但是仅仅是图片的内部被拉伸，对于边缘角度并不会发生变化，因此通过这一点可以将两张图片进行拼接，然后制作按钮的背景。
比如，下面需要a标签中套用b标签，a标签设置左背景，b标签设置右背景。

<a href="#"><b>查看样式表CSS</b></a>

下面是样式：

a {
   background: url("left2.gif") no-repeat left top;
	  background-origin: border-box;
	  padding: 0 24px 0 16px;
	  display: block;
	  line-height: 30px;
 	 background-size: auto 30px;
	}
a b {
      display: block;
      background: url("right2.gif") no-repeat right top;
     background-origin: border-box;
     padding: 0 24px 0 8px;
    margin-left: -10px;
    background-size: auto 30px;
   }

实现效果
在这里插入图片描述
实质是通过下面两个图片合并过来的。

注意点：不能通过background-size进行设置高度，如果背景拼接的时候出现空白，那么就要通过margin进行调节。

2.使用table元素的各个结构
caption:定义表格标题，必须紧跟在table之后，只能定义一个。
th:定义表头单元格
col:在表格中定义一个或多个属性值。只能在table和colgroup中能使用。；
colgroup：定义表格列的分组。可以对列组进行格式化。只能在table标签中使用。
使用colspan属性表示能横跨的列数。
使用rowspan属性表示能横跨的行数。
在table中，最好tfoot卸载tbody的前面，这样在打印的时候，每一页都能显示页脚。

使用col主要能够对某列进行样式的统一设置。

<table width="100%" border="1">
  <!--通过span 表示能占几列，默认是平分-->
 <col span="2" class="left" style="background-color: red"/>
 <col style="background-color:yellow"/>
 <col style="background-color: #00B7FF"/>
 <tr>
  <td>慈母手中线，</td>
 <td>游子身上衣。</td>
  <td>临行密密缝，</td>
   <td>临行密密缝，</td>
 </tr>
 <tr>
  <td>意恐迟迟归。</td>
 <td>谁言寸草心，</td>
  <td>报得三春晖。</td>
   <td>报得三春晖。</td>
  </tr>
</table>

使用colgroup和col的功能是相同的，但是可以将col放在colgroup中使用。这样显示的更加规范。
比如：

  <colgroup span="7">
	<col span="1" class="day_off">
	<col span="5">
	<col span="1" class="day_off">
 </colgroup>

使用headers属性，能够制定列所对应的表头。虽然下面的address和Phone换了位置，但是仍然是显示正常的。

<table border="1" width="100%">
 <tr>
     <th id="name">姓名</th>
     <th id="Email">电子邮</th>
	    <th id="Phone">电话</th>
	    <th id="Address">地址</th>
  </tr>
  <tr>
       <td headers="name">张三</td>
       <td headers="Email">zhangsan@163.com</td>
       <td headers="Address">13522228888</td>
       <td headers="Phone">北京长安街38号</td>
 </tr>
</table>

css的表格属性：
border-collapse
border-spacing
caption-side 设置caption的位置 top bottom
empty-cells : show hide,当单元格没有内容的时候，是否显示边框。
table-layout： auto fixed。使用fixed会一次一行进行显示内容，因此性能比较高，auto是在内容读取完后一次性的显示出来。

使用js代码设置table的hover的效果，和设置隔行变色

<body>
<table id="grid">
   <caption>
  IE浏览器发展大事记
    </caption>
  <tr>
        <th>版本</th>
       <th>发布时间</th>
      <th>绑定系统</th>
   </tr>
   <tr>
      <td>Internet Explorer 1</td>
        <td>1995年8月</td>
      <td>Windows 95 Plus! Pack</td>
    </tr>
   <tr>
	    <td>Internet Explorer 2</td>
	    <td>1995年11月</td>
 	   <td>Windows和Mac</td>
    </tr>
   <tr>
       <td>Internet Explorer 3</td>
      <td>1996年8月</td>
      <td>Windows 95 OSR2</td>
  </tr>
    <tr>
      <td>Internet Explorer 4</td>
	    <td>1997年9月</td>
	    <td>Windows 98</td>
  </tr>
 <tr>
 	   <td>Internet Explorer 5</td>
 	   <td>1999年5月</td>
 	   <td>Windows 98 Second Edition</td>
 </tr>
  <tr>
   	 <td>Internet Explorer 5.5</td>
    <td>2000年9月</td>
   	 <td>Windows Millennium Edition</td>
</tr>
<tr>
    <td>Internet Explorer 6</td>
    <td>2001年10月</td>
    <td>Windows XP</td>
</tr>
<tr>
    <td>Internet Explorer 7</td>
    <td>2006年下半年</td>
    <td>Windows Vista</td>
</tr>
<tr>
    <td>Internet Explorer 8</td>
    <td>2009年3 月</td>
    <td>Windows 7</td>
</tr>
<tr>
    <td>Internet Explorer 9</td>
    <td>2011年3月</td>
    <td>Windows 7</td>
</tr>
<tr>
    <td>Internet Explorer 10</td>
    <td>2013年2月</td>
    <td>Windows 8</td>
</tr>
</table>
<script language="javascript">

//bg_even("表格ID属性名","奇数行背景色","偶数行背景色","鼠标经过背景色","点击后背景色");
function bg_even(o,a,b,c,d){
//获取对数据行的控制
    var t=document.getElementById(o).getElementsByTagName("tr");
    for(var i=0;i<t.length;i++){ //遍历数据表中每一行
        //判断数据行的奇偶位置，分别设置不同的背景色  能够通过sectionRowIndex获取到当前是第几行。
        t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
        //定义鼠标单击事件函数，设计背景色的单击开关效果
        t[i].onclick=function(){
            if(this.x!="1"){//如果没有单击，则设置单击背景色
                this.x="1";
                this.style.backgroundColor=d;
            }else{//如果已经单击，则恢复原来的背景色
                this.x="0";
                this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
            }
        }
        //定义鼠标经过事件函数，设计鼠标经过行的背景色效果
        t[i].onmouseover=function(){
            if(this.x!="1")this.style.backgroundColor=c;
        }
        //定义鼠标离开事件函数，设计鼠标离开行的背景色效果
        t[i].onmouseout=function(){
            if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
        }
    }
}
//执行这个函数 ，要把script放在body里面，这样在执行html后就能执行js代码，如果放在上面，就不会执行到。	
bg_even("grid","#fff","#F00","#FFFFCC","#FFFF84");
</script>
</body>

yuezheyue123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习8

1.设置背景图片后，当内容变化的时候，背景图片是可以被拉伸的，但是仅仅是图片的内部被拉伸，对于边缘角度并不会发生变化，因此通过这一点可以将两张图片进行拼接，然后制作按钮的背景。比如，下面需要a标签中套用b标签，a标签设置左背景，b标签设置右背景。&amp;lt;a href=&quot;#&quot;&amp;gt;&amp;lt;b&amp;gt;查看样式表CSS&amp;lt;/b&amp;gt;&amp;lt;/a&a
复制链接

扫一扫

专栏目录