表格和CSS
2018-10-23 本文已影响0人
金厚琦
###表格合并
合并列
th居中
rowspan:行
colspan:列
border:边框
cellpadding,cellspacing都等于0就是实线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="400"border="1px">
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>合计</td>
<td colspan="3">用户名</td>
</tr>
</table>
</body>
</html>
** 合并行**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"width="300">
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<td>4</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
</tr>
</table>
</body>
</html>
选择器 input标签
表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="aaa.do"> <!--//性别，单选框--> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女<br> <!--//爱好,复选框--> <input type="checkbox" name="hobby">吃串 <input type="checkbox" name="hobby">喝酒 <input type="checkbox" name="hobby">打豆豆<br> <!--家乡--> 家乡： <select name="home"> <option value="1">请选择</option> <option >沈阳</option> <option >抚顺</option> <option >大连</option> <option >丹东</option> </select><br> <!--账号(文本框)--> 账号：<input type="text" name="username"/><br> <!--<!–密码（文本框）;readonly value只读--> 密码：<input type="text" name="username"/><br> <!--确认密码--> 确认密码：<input type="text" name="username"/><br> <!--多行文本框--> <textarea rows="3" cols="50"></textarea><br> <!--提交按钮--> <input type="submit"/> <input type="reset"/>
登录页面
</form>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> Search : <input type="search" name="search1"/><br> 请输入E-mail地址 ： <input type="email" name="user_email"/><br/> 请输入网址：<input type="email" name="user_email"/><br/> 请输入数值：<input type="number" name="number1" step="5" min="1" max="20" value="0"/><br/> 请输入电话号码：<input type="tel" name="tel1"/><br/> 请输入数值（滑动条）：<input type="range" name="range1" min="1" max="30"/><br/> 请输入颜色：<input type="colour" name="colour1"/><br/> 请输入时间：<input type="time" name="time1"/><br/> 请输入时间：<input type="time" name="time1" step="2" value="13:20:00"/><br/> 请输入日期：<input type="date" name="date1"/><br/> 请输入月份：<input type="month" name="month1"/><br/> 请输入年份和周数：<input type="week" name="week1"/><br/> <input type="submit" value="提交"/> <input type="file"/> image:<input type="image" name="image1" src="../../images/1.jpg" width="200" height="200"><br /> </form> </body> </html>
外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commom.css" type="text/css">
</head>
<body>
<p id="class">例子</p>
</body>
</html>
** 外部连接commom，创建css类**
@charset "utf-8";
#class{
color: aqua;
}
** 行内样式表 **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--html页引入方式-->
<p style="color: blue;font-size: 20px">我是行内样式表</p>
</body>
</html>
内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
color: aqua;
}
</style>
</head>
<body>
<p id="first">大声道多</p>
</body>
</html>
选择器（.为class，#为id）
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test01{
color: blue;
}
.test02{
color:chartreuse;
}
p{
color: red;
}
</style>
</head>
<body>
id选择器<br>
<span id="test01">one</span><br>
类选择器<br>
<span class="test02">two</span><br>
<span class="test02">two</span><br>
标签选择器<br>
<p>three</p>
</body>
</html>
例题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul ul ul li{
color: red;
}
ul ul li{
color: salmon;
}
ul li{
color: blue;
}
ul ol li{
color: green;
}
</style>
</head>
<body>
<h1>东软睿道学习平台</h1>
欢迎来到东软睿道学习平台，这里将为您提供丰富的学习内容。
<ul>
<li>网页制作</li>
<ul>
<li>使用Dreamweaver制作网页</li>
<li>使用CSS布局和美化网页</li>
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
<li>使用JavaScript制作网页特效</li>
</ul>
<li>平面设计</li>
<ol>
<li>美术基础</li>
<li>使用Photoshop处理图形图像</li>
<li>使用Illustrator设计图形</li>
<li>制作Flash动画</li>
</ol>
</ul>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.txt{
color: red;
}
</style>
</head>
<body>
<p>第一行</p>
<p class="txt">第二行，计划变色</p>
<span class="txt">第三行</span>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,.txt,#txtid{
color: red;
}
</style>
</head>
<body>
<p>第一行</p>
<p class="txt">第二行，计划变色</p>
<span id="txtid">第三行</span>
</body>
</html>
动态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*text-decoration 去除下划线*/
a:link{
color: red;text-decoration:none;
}
a:hover{color: chocolate}
a:visited{color: black}
a:active{color: blue}
</style>
</head>
<body>
<a href="#" target="_blank">测试伪类</a>
</body>
</html>
