网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于盒子模型之CSS3学习之边框(Border) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
盒子模型之border
边框相关属性
border-width 控制边框的大小 用长度赋值
border-style 控制边框的样式 none 没有边框 solid 实线 dotted 点线 dashed 虚线 double 双线条
border-color 控制边框的颜色 四种颜色表示法
border-top 控制上边框的样式
border-right 控制右边框的样式
border-bottom 控制下边框的样式
border-left 控制左边框的样式
其实四条边也是复合属性:
border-top可以分成这么几个属性:border-top-color border-top-width border-top-style (剩下三条边以此类推)
边框连写
理论上:没有顺序,皆可省略
案例:表格边框、四彩盒子、表单边框
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table {
width: 800px;
height: 300px;
border: 1px solid #000;
border-collapse: collapse;/*去掉边框:细线*/
}
th,td {
border: 1px solid #000;
}
</style></head><body>
<table>
<caption><h3>今日小说排行榜</h3></caption>
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr >
<td >1</td>
<td >鬼吹灯</td>
<td ><img src="img/up.jpg" width="13" height="11" /></td>
<td >65589</td>
<td >45</td>
<td ><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="img/down.jpg" width="13" height="11" /></td>
<td>1</td>
<td>456</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody></table></body></html>