<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>007个人简历制作</title> </head> <body> <table border="1px" cellspacing="0"> <col width="100px" /> <col width="100px" /> <col width="100px" /> <col width="100px" /> <col width="100px" /> <col width="100px" /> <col width="200px" /> <tr align="center"> <td colspan="7">个人简历</td> </tr> <tr align="center" height="40px"> <td>性格</td> <td></td> <td>性别</td> <td></td> <td>年龄</td> <td></td> <td rowspan="4">照片</td> </tr> <tr align="center" height="40px"> <td>学历</td> <td></td> <td>籍贯</td> <td colspan="3"></td> </tr> <tr align="center" height="40px"> <td>电话</td> <td></td> <td>政治面貌</td> <td colspan="3"></td> </tr> <tr align="center" height="40px"> <td>毕业院校</td> <td colspan="5"></td> </tr> <tr align="center" height="40px"> <td>求职意向</td> <td colspan="6"></td> </tr> </table> </body> </html>
从服务器下载数据来显示： 提交数据到服务器： 效果图：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>008登录表单</title> </head> <body> <!--4行3列--> <form action="https://www.baidu.com/" method=""> <table border="1px" cellspacing="0" width="600px"> <tr height="40px"> <td rowspan="4" align="center">总体信息</td> <td colspan="2"></td> </tr> <tr height="40px"> <td align="right">用户名:</td> <td ><input type="text" name="loginname" /> </td> </tr> <tr height="40px"> <td align="right">密码:</td> <td><input type="password" name="pwd"/> </td> </tr> <tr height="40px"> <td colspan="2" align="center"> <input type="submit" value="提交" > <input type="reset" value="重置" > </td> </tr> </table> </form> </body> </html>
按下提交后
按F12或者右键点检查【chrome浏览器】
如果此时想给第一个p标签的文字加背景颜色和其他的： 但是发现整一行变成灰色，而不是我想要的只给文字加！ 所以：用到span一个容器标签来给文本添加样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p style="text-align: center;"> <span style="background-color: gray; color:white;;font-size: 24px;"> G.E.M简介</span> </p> <p> <b>邓紫棋出生在上海，</b>成长于一个音乐世家，父亲是香港人，母亲是上海音乐学院声乐系毕业生，外婆教唱歌，舅父拉小提琴，外公在乐团吹萨克斯风。在家人的熏陶下，邓紫棋自小便热爱音乐，喜爱唱歌。 <span style="color: #41A863;">邓紫棋5岁时便开始尝试作曲及填词，</span>7岁时参与教育电视的演出，13岁完成英国皇家钢琴检定考试八级，并与陈奕迅合拍月饼义卖广告。 </p> <p> <b>邓紫棋小学就读香港九龙太子道西中华基督教会协和小学，</b>同时为校内诗歌班成员。中学就读真光女书院，从中学一年级开始不断参加各种歌唱比赛，曾一年内获得了5个比赛的冠军 [20] 。 2006年，14岁的邓紫棋参加Spice It Up学界联校歌唱比赛，夺得比赛冠军，被经理人张丹（Tan）邀请签约蜂鸟音乐，但是因为学业关系，16岁才正式出道成为歌手。而蜂鸟音乐一共只有十几位员工，因此在传统媒体渠道受限的邓紫棋从出道起就一直在微博等自媒体上记录成长并与歌迷直接交流。 [21-22] 出道后仍考入香港演艺学院，主修声学。后因工作量日渐增多，她在2009年上半年放弃香港演艺学院的声学课程 [3] 。 </p> <p> 2008年7月10日，<span style="color:#F40;">推出首支个人单曲《等一个他》，</span>以<b>16</b>岁之龄正式进入演艺圈。10月16日，发行首张音乐EP《G.E.M.》，该EP收录了《睡公主》在内的5首歌曲 [3] 。同年，获得十大劲歌金曲“最受欢迎女新人(金奖)” [2] 、第31届十大中文金曲<b>“最有前途新人奖(银奖)” [23]</b> 等奖项。 </p> </body> </html>效果： 但是此时想让文本全部居中，而不是占据整个浏览器宽页面上并且想让所有的文字是灰色的[并不想在每个p标签都加上样式]，所以：
这时，设置div的宽度再让它margin:auto，此时div就会水平居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div style="color: #555;margin: auto;width: 500px;"> <p style="text-align: center;"> <span style="background-color: gray; color:white;;font-size: 24px;"> G.E.M简介</span> </p> <p> <b>邓紫棋出生在上海，</b>成长于一个音乐世家，父亲是香港人，母亲是上海音乐学院声乐系毕业生，外婆教唱歌，舅父拉小提琴，外公在乐团吹萨克斯风。在家人的熏陶下，邓紫棋自小便热爱音乐，喜爱唱歌。 <span style="color: #41A863;">邓紫棋5岁时便开始尝试作曲及填词，</span>7岁时参与教育电视的演出，13岁完成英国皇家钢琴检定考试八级，并与陈奕迅合拍月饼义卖广告。 </p> <p> <b>邓紫棋小学就读香港九龙太子道西中华基督教会协和小学，</b>同时为校内诗歌班成员。中学就读真光女书院，从中学一年级开始不断参加各种歌唱比赛，曾一年内获得了5个比赛的冠军 [20] 。 2006年，14岁的邓紫棋参加Spice It Up学界联校歌唱比赛，夺得比赛冠军，被经理人张丹（Tan）邀请签约蜂鸟音乐，但是因为学业关系，16岁才正式出道成为歌手。而蜂鸟音乐一共只有十几位员工，因此在传统媒体渠道受限的邓紫棋从出道起就一直在微博等自媒体上记录成长并与歌迷直接交流。 [21-22] 出道后仍考入香港演艺学院，主修声学。后因工作量日渐增多，她在2009年上半年放弃香港演艺学院的声学课程 [3] 。 </p> <p> 2008年7月10日，<span style="color:#F40;">推出首支个人单曲《等一个他》，</span>以<b>16</b>岁之龄正式进入演艺圈。10月16日，发行首张音乐EP《G.E.M.》，该EP收录了《睡公主》在内的5首歌曲 [3] 。同年，获得十大劲歌金曲“最受欢迎女新人(金奖)” [2] 、第31届十大中文金曲<b>“最有前途新人奖(银奖)” [23]</b> 等奖项。 </p> </div> </body> </html>要做出来的效果图： 发现：
然后发现边角不能完全的贴合，有空隙： 我们加上 margin:0; 原本： 现在增加容器的高度后：变成这样：
我们想让他竖直居中 line-height 属性设置行间的距离（行高）。 line-height是竖直居中，水平居中是text-align:center; line-height表示的是行高，之前设置了height是40，如果再设置行高是 40，就会竖直居中
<div id="bottom" style="height: 40px;line-height: 40px;">这段代码设置该元素内的文字行高为40像素，该div元素高也是40像素，这样文字就会竖直居中显示。 然后现在想让刚刚竖直居中的同时水平居中：就设置text-align:center
<div id="navigation" style="height: 80px;line-height: 80px;text-align: center;"> <div id="bottom" style="height: 40px;line-height: 40px;text-align: center;">就变成： 字体变灰色+字体大小为14px:
<div id="bottom" style="height: 40px;line-height: 40px;text-align: center;font-size: 14px;color: gray;"> 版权所有：学习使我快乐有限公司 技术支持小星网络 </div>同时最底下bottom的背景设置为偏灰色
接着处理navigator部分的a标签：
不想要默认的蓝色a标签不想要下划线： 改成黑色
<div id="navigation" style="height: 80px;line-height: 80px;text-align: center;background-color: white;"> <a href="#" style="text-decoration: none; color: black;">首页</a> <a href="#" style="text-decoration: none; color: black;">关于学习</a> <a href="#" style="text-decoration: none; color: black;">产品世界</a> <a href="#" style="text-decoration: none; color: black;">新闻中心</a> <a href="#" style="text-decoration: none; color: black;">网络事件</a> <a href="#" style="text-decoration: none; color: black;">联系我们</a> <a href="#" style="text-decoration: none; color: black;">网络新闻</a> </div>同时我想让这些文字间距更大一些
<!DOCTYPE html> <html style="background-color: #ddd;"> <head> <meta charset="utf-8"> <title>012布局和选择器样式</title> </head> <body style="margin: 0;"> <div id="banner"> <img src="image/banner.jpg" style="width: 100%;"/> </div> <div id="navigation" style="height: 80px;line-height: 80px;text-align: center;background-color: white;"> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">首页</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">关于学习</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">产品世界</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">新闻中心</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">网络事件</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">联系我们</a> <a href="#" style="text-decoration: none; color: black;margin: 0 15px;">网络新闻</a> </div> <div id="bottom" style="height: 40px;line-height: 40px;text-align: center;font-size: 14px;color: gray;"> 版权所有：学习使我快乐有限公司 技术支持小星网络 </div> </body> </html>发现一样的标签样式很多都是重复的，有点繁琐 把所有的样式都写在style标签里实现css的功能，还可以通过选择器重复使用样式
<!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>012布局和选择器样式</title> <style> html{ background-color: #ddd; } body{ margin: 0; } #navigation{ height: 80px; line-height: 80px; text-align: center; background-color: white; } #bottom{ height: 40px; line-height: 40px; text-align: center; font-size: 14px; color: gray; } .nav{ text-decoration: none; color: black;margin: 0 15px; } #banner img{ width: 100%; } </style> </head> <body > <div id="banner"> <img src="image/banner.jpg" /> </div> <div id="navigation"> <a href="#" class="nav">首页</a> <a href="#" class="nav" >关于学习</a> <a href="#" class="nav">产品世界</a> <a href="#" class="nav">新闻中心</a> <a href="#" class="nav">网络事件</a> <a href="#" class="nav">联系我们</a> <a href="#" class="nav">网络新闻</a> </div> <div id="bottom" > 版权所有：学习使我快乐有限公司 技术支持小星网络 </div> </body> </html>例子 1： 例子2： 例子3： 想把最后一条的border取消掉，但是下面没有反应[是因为 [.last优先级不够] 提高优先级：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>14CSS文本属性</title> <style type="text/css"> .p1{color: red;}/*文字颜色*/ .p2{font-family: "华文中宋"}/*字体类型*/ .p3{font-size: 26px;} /*文字大小*/ .p4{font-weight: bold;} /*文字加粗*/ .p5{font-style: italic;}/*文字倾斜*/ .p6{text-indent:60px;}/*首行缩进*/ .p7{text-align: center;}/*水平对齐方式*/ .p8{line-height: 100px;} /*行高*/ .p9{height: 100px;line-height: 100px;background-color: gray;}/*垂直居中*/ .p10{text-decoration: underline;} /*文本修饰*/ </style> </head> <body> <ol> <li class="p1"> 计算与通信是量子领域最重要的两项技术</li> <li class="p2">牛顿的万有引力和爱因斯坦的相对论，开启了人类在科技领域的两次大飞跃。</li> <li class="p3">我国光纤用户渗透率全球第一：运营商推动千兆宽带继续..</li> <li class="p4">情况开始好转！台积电备货200万，华为原来留有一张..</li> <li class="p5">通信基站智能通风系统的改造</li> <li class="p6">HUAWEI Mate 40系列带来更美好的数字生..</li> <li class="p7">沙特与华为建立合作 共同推动沙特国家人工智能发展计..</li> <li class="p8">科技早起鸟：苹果准备自研iPhone新基带｜华为“..</li> <li class="p9">华为招8名博士，年薪200万，好好读书的人生，到底..</li> <li class="p10">得来全不费工夫！华为苦苦寻求的光刻机，没想到被中企..</li> </ol> </body> </html>
