日度归档:2020年6月8日

css 如何绘制表格中的斜线表头呢?


摘要:
下文讲述使用css脚本为表格绘制斜线表头的方法分享,如下所示:

 实现思路:
     在表格的单元格中绘制两个直角三角形模拟出斜线的效果,如下例所示:
 
<meta charset='utf-8' />
<p>
 maomao365.com <br />
  table中斜线表头的示例分享
</p>
<hr />

<style>
table {
    border-collapse: collapse;
    border: 1px #eee solid;
    width: 80%;
    min-width: 300px;
    margin: 0 auto;
}
th{
    border: 1px solid #ddd;
    text-align: center;
    height: 100px;
}
.th_head{/*宽高100px,100px*/
    width:200px;
    position: relative;
}
.box{
    border-top: 100px green solid;  /*上边框宽度等于表格第一行行高*/
    border-left: 200px blue solid;  /*左边框宽度等于表格第一行第一格宽度*/
	color:white;
}
.a,.b{
    font-style: normal;
    display: block;
    position: absolute;
    width: 200px;
    height: 50px;
    line-height: 50px;
}
.a{
    top: 0px;  left: 0px;
}
.b{
    top: 50px;  left: 0px;
}
</style>
  
<table>
    <tr>
        <th class="th_head">
            <div class="box">
                <em class="a">月份</em>
                <em class="b">姓名</em>
            </div>
        </th>
        <th>成绩</th>
    </tr>
</table>
css绘制斜线表头的示例分享

css绘制斜线表头的示例分享

html代码中style样式代码中注释符号起什么作用呢?


摘要:
下文讲述html代码中style样式代码中注释符号的功能说明,如下所示:

 html代码中style的样式信息功能:
     避免浏览器无法解析style标签时,将style代码作为网页内容呈现给用户,
	 所以才再注释css代码前后加入注释信息
	------此种用法也用于在script标签中

例:
script标签和style标签中的内容加入注释符的示例分享

 
 <script type="text/javascript">
 <!--
	function funtest(){
	
	}
 //-->
 </script>


 <style type="text/css">
    <!--
    #div{ width:800px;height:900px;}
    -->
</style>

如何使用css脚本使button按钮处于div的顶部呢?


摘要:
下文讲述使用css脚本将button按钮定位在div的顶部的示例分享,如下所示:

 实现思路:
     使用vertical-align: top; 属性值即可将button按钮放在顶部对齐,如下例所示:

例:

<meta charset='utf-8' />
<P>
 maomao365.com<br />
 将button按钮定位于div顶部的示例分享
</p>
<hr />
<div>
    <button>按钮一</button>
    <button>按钮二<br/>你二行</button>
</div>

<style>
 button{
    vertical-align: top;
}
</style>
button按钮定位的示例分享

button按钮定位的示例分享