<香港科技大学html+css+js课堂笔记>week1--CSS部分--第二部分
来源:互联网 发布:网络分线盒多少钱 编辑:程序博客网 时间:2024/05/17 02:25
3.tables:
结构:
<table>
<thead>
<tr> <th>...</th> <th>...</th> <th>...</th> </tr>
</thead>
<tbody>
<tr> <td>...</td> <td>...</td> <td>...</td> </tr>
<tr> <td>...</td> <td>...</td> <td>...</td> </tr>
</tbody>
</table>
eg1:
<table>
<thead>
<tr> <th>Skills</th> <th>Difficulty</th> <th>My Level</th> </tr>
</thead>
<tbody>
<tr> <td>HTML</td> <td>Easy</td> <td>Some</td> </tr>
<tr> <td>CSS</td> <td>Medium</td> <td>A little</td> </tr>
<tr> <td>JavaScript</td> <td>Hard</td> <td>Zero</td> </tr>
</tbody>
</table>
eg2:
<html>
<head>
<style>
table, td, th {border:1px solid black; padding:15px}
td {color:purple}
</style>
</head>
<body>
<table>
<tr><th>Menu</th><th>Price</th></tr>
<tr><td>Snail pizza</td><td>$15</td></tr>
<tr><td>Creative curry</td><td>$10</td></tr>
<tr><td>Sloppy salmon</td><td>$20</td></tr>
</table>
</body>
</html>
eg4:
<html>
<head> <style>
table, td, th {border: 1px solid green; width:50%; textalign:center}
.profit {textalign:left; backgroundcolor:lightblue}
.zero {textalign:center; backgroundcolor:yellow}
.loss {textalign:right; backgroundcolor:red}
</style> </head>
<body>
<table>
<tr><th>Product</th><th>Income</th><th>Cost</th><th>Difference</th></tr>
<tr><td>Laptops</td><td>$300</td><td>$100</td><td class="profit">$200</td></tr
<tr><td>Stationary</td><td>$150</td><td>$150</td><td class="zero">$0</td></tr>
<tr><td>Chairs</td><td>$50</td><td>$300</td><td class="loss">$250</td></tr>
</table>
</body>
</html>
4.div 与 span:
eg1:
<p>This is a paragraph before the div</p>
<div>
This is a div with no style
</div>
<p>This is a paragraph in the middle</p>
<div style="background:lightblue">
This is a div with a blue background
</div>
eg2:
<p>This is a paragraph before the div</p>
<div style="background:yellow; fontsize:16pt; fontfamily:courier">
This is a div with a yellow background
</div>
<p>This is a paragraph in the middle</p>
<div style="background:lightblue; fontsize:18pt;
fontfamily:Arial; width:50%">
This is a div with a blue background
</div>
eg3:
<div style="background:yellow; fontsize:16pt; fontfamily:courier;
position:absolute; top:60px; left:60px">
This is a div with a yellow background
</div>
<div style="background:lightblue; fontsize:18pt;
position:absolute; top:92px; left:80px">
This is a div with a blue background
</div>
eg4:
<p>This is a paragraph</p>
<div style="background:yellow; fontsize:14pt; fontfamily:courier;
position:relative; top:20px; left:20px">
This is a div with a yellow background
</div>
eg5:(span is used for a few words!)
<p>This is not span text <span>but this is</span> and this isn't</p>
<p>This is not span text <span style="background:yellow">but this is</span>
and this isn't</p>
- <香港科技大学html+css+js课堂笔记>week1--CSS部分
- <香港科技大学html+css+js课堂笔记>week1--html部分
- <香港科技大学html+css+js课堂笔记>week1--CSS部分--第二部分
- <香港科技大学html+css+js课堂笔记>week2--javaScript部分
- <香港科技大学html+css+js课堂笔记>week1--Form相关
- <香港科技大学html+css+js课堂笔记>week2--javaScript第二部分
- <香港科技大学html+css+js课堂笔记>week3--DOM模型基础第二部分
- <香港科技大学html+css+js课堂笔记>week3--JavaScript高级部分
- <香港科技大学html+css+js课堂笔记>week3--DOM模型基础
- <div+css页面布局课堂笔记>5---与盒子相关的CSS属性第二部分
- html+css课堂笔记
- HTML+CSS+JS部分知识整理
- HTML笔记(第二部分)
- 【笔记】HTML+CSS基础课程(慕课)-CSS部分
- css部分笔记
- 第二部分:html div+css(静态网页)(一)
- 第二部分:html div+css(静态网页)(二)
- css第二部分核心原理
- Http同步和异步请求区别
- 数据窗口中最常用的事件
- 动态内存管理与动态数组的使用
- hdoj 2016 数据的交换输出 (水)
- 1.android体系与系统架构
- <香港科技大学html+css+js课堂笔记>week1--CSS部分--第二部分
- 使用9Patch图片作为背景防止图片拉伸
- ServletContextListener使用详解
- Android L上VideoCall中Audio的管理
- BZOJ_P2456 mode(抵消)
- Java - 字符串
- java学习日记20160320
- BZOJ2456mode
- SDAU课程练习2 1008