学习HTML5的第三天：
1.带样式的表格表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格表单</title> <style type="text/css"> tr { border: none; height: 30px; line-height: 30px; } th { border: none; text-align: left; /* 左对齐 */ height: 40px; } td, table { border: none; } caption { border-bottom: 2px solid red; /* 只加下边框 */ /* padding-bottom: 10px; padding-top: 30px; */ padding: 30px 0px 10px 0px; text-align: left; /* 左对齐 */ } h2 { margin: 0; } .td1 { width: 200px; } #tdbutton { text-align: center; } #baocun, #fanhui { background-color: blue; color: white; width: 60px; height: 30px; border: none; font-size: 14px; } </style> </head> <body> <table border="" cellspacing="" cellpadding=""> <caption> <!-- caption语义标签 --> <h2> 个人信息 </h2> </caption> <tr> <th colspan="2">修改个人信息（*为必填项）</th> </tr> <tr> <td class="td1">*姓名</td> <td><input type="text" name="" id="" value="" /></td> </tr> <tr> <td class="td1">*性别</td> <td> <input type="radio" name="sex" id="" value="1" />男 <input type="radio" name="sex" id="" value="2" />女 </td> </tr> <tr> <td class="td1">*出生日期</td> <td><input type="date" name="" id="" value="" /></td> </tr> <tr> <td class="td1">*参加工作年份</td> <td><select name=""> <option value="1">无工作经验</option> <option value="2">2005或更早</option> <option value="3">2006</option> <option value="4">2007</option> </select></td> </tr> <tr> <td class="td1">*户口所在地</td> <td> <select name=""> <option value="1">沈阳</option> <option value="2">大连</option> <option value="3">营口</option> </select> </td> </tr> <tr> <td class="td1">*现居住城市</td> <td> <select name=""> <option value="1">沈阳</option> <option value="2">大连</option> <option value="3">营口</option> </select> </td> </tr> <tr> <td class="td1">*联系方式</td> <td><input type="text" name="" id="" value="" /> <a href="#">修改</a> </td> </tr> <tr> <td class="td1">*电子邮箱</td> <td><input type="text" name="" id="" value="" /> <a href="#">修改</a> </td> </tr> <tr> <td class="td1">婚姻状况</td> <td> <input type="radio" name="yihun" id="" value="" />未婚 <input type="radio" name="yihun" id="" value="" />已婚 <input type="radio" name="liyi" id="" value="" />离异 </td> </tr> <tr> <td class="td1">国籍</td> <td><select name=""> <option value="1">中国</option> <option value="2">中国</option> </select> </td> </tr> <tr> <td class="td1">有无海外学习经历</td> <td> <input type="radio" name="study" id="" value="" />有 <input type="radio" name="study" id="" value="" />无 </td> </tr> <tr> <td class="td1">政治面貌</td> <td> <input type="radio" name="" id="" value="" />中*员 <input type="radio" name="" id="" value="" />共青团员 <input type="radio" name="" id="" value="" />*党派 <input type="radio" name="" id="" value="" />群众 </td> </tr> <tr> <td id="tdbutton" colspan="2"> <input type="button" name="" id="baocun" value="保存" /> <input type="button" name="" id="fanhui" value="返回" /> </td> </tr> </table> </body> </html>
2.关于一些标签的默认样式的去除
body标签自带外边距
ul标签自带上下外边距和左内边距以及列表项右边的点
a超链接标签自带文本颜色和下划线 以及一定比例的字号(这个字号好像默认是百分比)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>关于默认样式</title> <style type="text/css"> body{ border: 1px solid blue; margin: 0; /* 去掉body自带的默认外边距 */ } html{ border: 2px solid red; } div{ width: 100px; height: 100px; border: 1px solid green; } ul{ border: 3px solid orange; /* 干掉上下外边距和左内边距 */ margin: 0; padding: 0; /* 去掉无序列表右边的点 */ list-style: none; } li{ border: 01px solid green; } a{ /* 超链接有自带的颜色和下划线和一定比例的字号 */ color: black; text-decoration: none; font-size: 3px; } </style> </head> <body> <!-- <div></div> --> <!-- <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> </ul> --> <!-- <a href="#">超链接</a> --> </body> </html>
3.关于背景图片的设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ border: 1px solid black; width: 200px; height: 200px; background-image: url(img/pic_1.jpg); /* 选择背景图片 */ background-repeat: no-repeat; /* 背景图片不填充 */ background-position: left top; /* 背景图片位置 */ background-size: cover; /* 背景图片盖满整个区域 */ } </style> </head> <body> <div id=""> </div> </body> </html>
4.例-音乐列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例音乐列表</title> <link rel="stylesheet" type="text/css" href="css/zixuereset.css"/> <link rel="stylesheet" type="text/css" href="css/musiclist.css"/> </head> <body> <ul> <li> <img src="img/pic_1.jpg" > <span>小水果-筷子兄弟</span> </li> <li> <img src="img/pic_2.jpg" > <span>匆匆那年-王菲</span> </li> <li> <img src="img/pic_3.jpg" > <span>年轮-张碧晨</span> </li> <li> <img src="img/pic_4.jpg" > <span>喜欢你-G.E.M.邓紫棋</span> </li> <li> <img src="img/pic_5.jpg" > <span>老男孩-筷子兄弟</span> </li> </ul> </body> </html>
(接下来是音乐列表的两个css)
(首先，清除默认样式，便于之后设置)
/* 用并集选择器 */ html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,span{ /* 去掉默认的外边距 */ margin: 0; /* 去掉默认的内边距 */ padding: 0; /* 去掉所有标签的默认字号，统一设定为12px */ font-size: 12px; } ul{ list-style: none; } a{ /* 超级链接默认颜色为蓝色，文字颜色需要单独设置 */ color: black; /* 去掉超级链接默认的下划线 */ text-decoration: none; /* 改变超级链接的默认字号 */ font-size: 12px; }
(接下来，为网页设置需要的样式)
span{ font-size: 16px; } img{ vertical-align: middle; /* 对齐方式：把此元素放置在父元素的中部。*/ /* 让span中文字与图片中心位置对齐 */ } li{ border-bottom: 2px solid #000000; /* 设置下边框 */ height: 100px; width: 600px; line-height: 95px; /* 调节高度,尽量居中 */ background-image: url(../img/download.gif); /* 设置背景图片 */ background-repeat: no-repeat ; /* 设置背景图片填充样式为不填充 */ background-position: right; /* 设置背景图片右中对齐 */ } ul{ width: 530px; margin: 4px 0px 0px 8px; }