新航路师徒学院

 找回密码
 立即注册
搜索
查看: 526|回复: 1

【新航路】Xhtml+Css学习总结! 针对新手学习用的

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-26 11:33:33 | 显示全部楼层 |阅读模式
  1. Xhtml+Css——Xhtml的标签

  2. <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  3. <html xmlns="http://www.w3.org/1999/xhtml">

  4. <head>

  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  6. <title> 标题 </title>

  7. <link href="css/index.css" rel="stylesheet" type="text/css" />

  8. <meta name="keywords" content="" />
  9. <meta name="Description" content="" />

  10. </head>

  11. <body>

  12. </body>

  13. </html>

  14. 1.<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  15. 第一行是固定的

  16. 2.<html xmlns="http://www.w3.org/1999/xhtml">    </html>

  17. 第二行也是固定的。

  18. 文档分为两部分都是在html里写

  19. 1.

  20. <head>

  21. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  22. <title> 标题 </title>

  23. <link href="css/index.css" rel="stylesheet" type="text/css" />

  24. </head>

  25. <head>

  26. 是文档的头部分包含title——标题

  27. Link(rel表明连接的文件;type表明文件类型;href指向css连接的文件)

  28. 2.

  29. Body是文档的主体部分在浏览器里要显示的内容。

  30. 常用的标签:

  31. 1.

  32. H1——H5 标题

  33. 2.

  34. Span    行内属性 –根据内容改变宽度

  35. 3.

  36. Ol 有序列表

  37. Ul 无序列表   他们中一定要有li

  38. 4.

  39. Dl定义列表

  40. Dt 定义标题   dd

  41. Dt/dd是并存的 都要在dl下面,一个dt多个dd

  42. 5.

  43. P 段落   它能自动换行

  44. 6.

  45. Var 特别的意思   (变量)

  46. 7.

  47. Em 强调 (语法)*

  48. 8.

  49. A 超连接

  50. 用法 <a href=”#”title=”…”></a>

  51. <div class="banner_outer">
  52. <div class="banner">
  53. <a href="index.html" class="sp onfocus" title=""><span>首页</span></a>
  54. <a href="choose_bokan.html" title=""><span>为什么选择</span></a>
  55. <a href="lesson_index.html" title=""><span>精品课程</span></a>
  56. <a href="teachers.html" title=""><span>精英师资</span></a>
  57. <a href="item_index.html" title=""><span>实训项目</span></a>
  58. <a href="highsalary.html" title=""><span>高薪就业</span></a>
  59. <a href="co_college.html" title=""><span>合作伙伴</span></a>
  60. <a href="entrance.html" title=""><span>入学指南</span></a>
  61. <a href="enterprise.html" title=""><span>企业服务</span></a>
  62. </div>
  63. <div class="clear"> </div>
  64. </div>

  65. .banner a:link {color:#666;}
  66. .banner a:visited {color:#666;}
  67. .banner a:hover {color:#fff;background:url(../images/ba_bg.gif) right 0 no-repeat;}
  68. .banner a:active {color:#fff;background:url(../images/ba_bg.gif) right 0 no-repeat;}
  69. .banner_outer {background:url(../images/bg_banner.gif) 0 0 repeat-x;}
  70. .banner {width:980px;height:43px;margin:0 auto;}
  71. .banner a {display:block;height:43px;float:left;padding-right:20px;}
  72. .banner a span {height:35px;line-height:35px;padding-bottom:8px;font-size:14px;font-weight:bold;padding-left:20px;display:block;float:left;cursor:pointer;}
  73. .banner a.onfocus {background:url(../images/ba_bg.gif) right 0 no-repeat;}
  74. .banner a.onfocus span {background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
  75. .banner a.onfocus1 span {color:#bbb;}
  76. .banner a:hover span {background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
  77. .banner a:active span{background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
  78. .banner a.sp {padding-right:29px;}
  79. .banner a.sp span {padding-left:32px;}这就是实现效果 因为他们的宽度不是一样的 而且这个小背景并不是一样的



  80. a:link{} 原样

  81. a:visited{}访问过

  82. a:active{}点击时

  83. a:hover{}鼠标放上时

  84. js——实现a的效果

  85. onclick=”window.location.href=’--.html’;”

  86. onclick="window.location.href='online.html';"

  87. 9.

  88. Img 照片

  89. 用法 <img src=”images/照片.jpg(格式)” alt=“ ”/>

  90. 10.

  91. Br

  92. 用法 <br/> 单标签

  93. 11.

  94. Textare 文本框

  95. 用法<textarea></textarea>

  96. 12.

  97. Select 选择 —— 下面要一定要有 option ——这是选项

  98. 用法 <select><sption></option><option></option></select>

  99. 13.

  100. Table 表格

  101. 用法

  102. Rowspan 行   colspan 列 两个都是th/td的属性

  103. <table>

  104.       <tr>

  105.            <th>M</th>

  106.            <th colspan="2">M</th>

  107.            <th>M</th>

  108.       </tr>

  109.       <tr>

  110.            <td colspan="2">M</td>

  111.            <td>M</td>

  112.            <td>M</td>

  113.       </tr>

  114.       <tr>

  115.            <td rowspan="2">M</td>

  116.            <td>M</td>

  117.            <td>M</td>

  118.            <td rowspan="2">M</td>

  119.       </tr>

  120.       <tr>

  121.            <td colspan="2">M</td>

  122.       </tr>

  123.       <tr>

  124.            <td>M</td>

  125.            <td colspan="3">M</td>

  126.       </tr>

  127.       <tr>

  128.            <td colspan="2" rowspan="2">M</td>

  129.            <td>M</td>

  130.            <td>M</td>

  131.       </tr>

  132.       <tr>

  133.            <td colspan="2">M</td>

  134.       </tr>

  135. </table>

  136. table{border:1px solid purple;margin:60px auto;border-collapse:collapse;}

  137. th{border:1px solid red;text-align:center;}

  138. td{border:1px solid blue;text-align:center;}

  139. List-style-type:none;

  140. Border-collapse:collapse;重叠/ separate;

  141. <table>

  142. <tr>

  143.       <th></th>

  144. </tr>

  145. <tr>

  146.       <td></td>

  147. </tr>

  148. <tr>

  149.       <td></td>

  150. </tr>

  151. </table>

  152. 14.

  153. Strong 粗体

  154. 用法 <strong></strong>(搜索引擎)

  155. 15.

  156. Form    后台用的多 一般都是用在要提交的内容外

  157. <form action="form_action.asp" method="get/post">
  158. <p>First name: <input type="text" name="fname" /></p>
  159. <p>Last name: <input type="text" name="lname" /></p>
  160. <input type="submit" value="Submit" />
  161. </form>

  162. 16.

  163. Input 输入   单项式标签

  164. 用法

  165. <input           type=”text”/>   文本

  166. <input           type=”password” name=”pas”/>    密码

  167. <input           type=”button” value=”提交”/>     按钮

  168. <input           type=”radio” name=”test1”/>         单选

  169. <input           type=”radio” name=”test1”/>            单选

  170. <input           type=”radio” name=”test1”/>            单选

  171. <input           type=”checkbox” />                     多选

  172. <input           type=” checkbox” />                   多选 这个有的浏览器会不一样大小   最好给弄 w:15px; h:15px;

  173. <input           type=”submit” value=”提交”/>

  174. 行内标签有:span、var、a、img、em、strong、imput是内行属性唯一的一个可以设 w 和 h的

  175. 17.

  176. Div *

  177. Xhtml+Css——Css

  178. Css引入方式(4)种

  179. 1.

  180. A.rel 表明连接的文件与html 文档之间的关系

  181. B.type 是表明文件类型

  182. C.href 指向连接的css文本

  183. 写在head里 link里

  184. 2.

  185. 在html文档的head部分直接写入css文档

  186. <style      type=”text/css”>

  187.       Div{margin:0;padding:0;border:1px;}

  188. </style>

  189. 3.

  190. 直接在html标签里写入对这个标签的css控制

  191. Eg: <div style=”border:1px solid red;”></div>

  192. 4.

  193. 使用@import引入css文件

  194. 有两种情况 a. 在head里使用的时候

  195. <style     type=”text/css”>@import url(my.css);</style>

  196. b. 在css文件里使用 (@import本身是一个css命令)

  197. css选择器

  198. 类选择器Class—— .test

  199. Id选择器 id——#test

  200. id="eric"   .html#eric; 会直接找到要选的内容

  201. id="xuexiao"   "entrance.html#xuexiao"

  202. 标签名选择器   div h1 span{}

  203. 后代选择器     #test .test div span{}

  204. 群主选择器    #test,.test,div,span{}

  205. test
  206. 字体设置

  207. Font-famliy:宋体,楷体,sans-serif;

  208. Font-size:12px; 大小

  209. Font-style(样式):normal;/italic 斜体

  210. Font-weight:normal;bold; 粗细

  211. Text-decoration:none;/underline;下划线

  212. Line-height:12px;行高

  213. Color:red;/#fff;颜色

  214. Text:

  215. Text-indent:12px;首行缩进;

  216. Text-align:left;/right;/center;

  217. Vertical-align:top;/bottom;/middle;

  218. 1——背景background

  219. Background:red url(../images/照片.jpg(格式))0(位置x——left、center、right) 0(位置y——top、middle、bottom) no-repeat(重复);

  220. 尺寸 height:12px; width:12px;

  221. 2——Border

  222. Border-left(right/top/bottom):1px solid (实心线) red;

  223.                             Dotted 虚线

  224.                             Dashed 线段

  225. 3——Margin

  226. Margin-top/right/bottom/left:10px;外补丁

  227. Margin:0 auto;

  228. Paddig- top/right/bottom/left:10px; 内补丁

  229. 内容+边框+padding+margin=总宽度

  230. 4——Float 浮动

  231. Float:left/right;左/右浮动

  232. Clear{Clear:both;height:0;overflow:hidden;}

  233. 5——Overflow 超出

  234. Overflow:visible/auto/hidden/scroll

  235. 6——Display 显示 设置行内属性/块属性

  236. Display:block;使行内属性变成快属性

  237. Display:none; 隐藏了 看不见了

  238. Display:inline;使快属性变成行内属性

  239. 8——visibility (可视)

  240. Visibility:visibile;可见

  241. Visibility:hidden; 隐藏——但地方还空着

  242. 9——Cursor

  243. Curor:pointer;

  244. 10——position

  245. Position:ralative;相对的/absolute绝对的

  246. Position:absolute;结合z-index:1;

  247. Left:10px;right:10px;top:10px;bottom:10px;

  248. 11——透明度

  249. filter:alpha(opacity=80); /* IE */

  250. opacity: 0.8;   /* 支持CSS3的浏览器(FF 1.5也支持)*/

  251. -moz-opacity:0.8; /* Moz + FF */ 现在不用了

  252. Xhtml+Css——浏览器的兼容

  253. 1.

  254. 块属性标签在float后,有横向margin时(ie6)*会比实际要多出几像素来*

  255. 解决方法:display:inline;

  256. 2.行内属性 display:block;float:left;(浮动后)有横向margin时 *会比实际多几像素*

  257. 解决方法 display:block;display:inline;display:table;要按顺序写

  258. 3.

  259. 行高(内容撑开高度)

  260. 解决方法 overflow:hidden;

  261. 4.

  262. A中有img(不同浏览器有不同效果有的会出现边框)

  263. 解决方法 a img{border:none;}

  264. 5.

  265. *{margin:0;padding:0;}

  266. 6.

  267. Img有间距 横向时

  268. 解决方法 a.浮动 b.在外加个标签(如span(变成块属性)再设W、H)

  269. 7.

  270. 上层标签浮动后 要清除浮动

  271. 8.

  272. Hacher

  273. 让不同浏览器解析不同命令

  274. 下划线_IE6

  275. *IE6、IE7、遨游

  276. Eg——.test{height:500px;*height:300px;_height:200px;}

  277. 浏览器都是500px、而又让IE6、IE7、遨游都是300px、最后只有IE6为200px;

  278. 在做一个页面之前首先要先把这个页面分个大 局然后再去实现

  279. Xhtml+Css就是手写代码用起来真的很好这就是我的这段时间Xhtml+Css的总结有很多不足的地方还请指点



  280. 在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框。

  281. <a href="#" onfocus="this.blur();">测试</a>
  282. 这里设置聚焦时触发blur();强制取消焦点。
复制代码


回复

使用道具 举报

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
发表于 2016-9-13 22:52:54 | 显示全部楼层
WEB前端开发零基础入门
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-6-23 10:06 , Processed in 0.144326 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表