html初学者笔记

作者: Rememberautumn 分类: 未分类 发布时间: 2014-09-13 16:53 阅读: 6,432

研究html好多天了,前几天一直没有入门感觉很着急,后来看了一些视频教程就恍然大悟,前期的迷茫也是为了给后期的恍然大悟做准备的,花了不到一天的时间仿了ITbol的网站,当然还有很多的地方需要优化,大神勿喷。

先上代码,只不过代码的可读性不好,写的也太乱,还请读者原谅。

仿的网页地址http://www.fddcn.cn/autumn/#

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns:”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5. <title>仿站成功</title>
  6. <link rel=“stylesheet” type=“text/css” href=“zy.css” />
  7. <link rel=”stylesheet”type=”text/css” href=“csh.css”>
  8. <style>
  9. </style>
  10. </head>
  11. <body>
  12. <div id=“consener1”>
  13.    <div id=“header”>
  14.    <img id=“logo” src=“images/logo.jpg” alt=“布尔教育”/>
  15.      <div id=“english”>
  16.    <a href=“#”> English</a>
  17.       </div>
  18.        <div id=“nav”>
  19.       <ul >
  20.          <li class=“nav_li”><a href=“#”> 标题</a></li>
  21.           <li class=“nav_li”><a href=“#”> 标题</a></li>
  22.            <li class=“nav_li”><a href=“#”> 标题</a></li>
  23.             <li class=“nav_li”><a href=“#”> 标题</a></li>
  24.              <li class=“nav_li”><a href=“#”> 标题</a></li>
  25.               <li class=“nav_li”><a href=“#”> 标题</a></li>
  26.       </ul>
  27.       </div>
  28.    </div>
  29.    <div id=“thinmain”>
  30.    <div id=“thin”>
  31.    <a href=“./php-kecheng.html”>
  32.    <img src=“images/banner01.png”>
  33.    </a>
  34.    </div>
  35.    <div id=“thinright”>
  36.    <div class=“thinright1”>
  37.    </div>
  38.    <div>
  39.    <table class=“tablethin”>
  40.       <tr>
  41.      <td colspan=“2”><b>PHP就业班</b></td>
  42.       </tr>
  43.       <tr>
  44.       <td>2014年12月01日</td>
  45.       <td>报名中</td>
  46.       </tr>
  47.       <tr><td>2014年12月01日</td>
  48.       <td>报名中</td></tr>
  49.       <tr><td>2014年12月01日</td>
  50.       <td>报名中</td></tr>
  51.       <tr><td>2014年12月01日</td>
  52.       <td>报名中</td></tr>
  53.       <tr><td>2014年12月01日</td>
  54.       <td>报名中</td></tr>
  55.       <tr><td height=30px;>2014年12月01日</td>
  56.       <td height=30px;>报名中</td></tr>
  57.       <tr><td rowspan=“2” height=60px;>frgk</td></tr>
  58.    </table>
  59.    </div>
  60.    </div>
  61.    </div>
  62.    <div id=“main”>
  63.        <div id=“leftmain1”>
  64.           <div class=“four”>
  65.           <div class=“fourhead”>
  66.           <h2 class=“thinright1h2”>视频下载</h2>
  67.           </div>
  68.            <div id=“thinli11”>
  69.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  70.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  71.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  72.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  73.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  74.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  75.              <li><a href=“#”>12课 作业及预习+视频</a></li>
  76.           </div>
  77. </div>
  78.           <div class=“four”>
  79.  <div class=“fourhead”>
  80.          <h2 class=“thinright1h2”>视频下载</h2>
  81.           </div>         </div>
  82.           <div class=“four”>
  83.  <div class=“fourhead”>
  84.           <h2 class=“thinright1h2”>视频下载</h2>
  85.           </div>          A.颜色
  86.    命名颜色:p{color:red;}
  87. REB颜色:p{color:RGB(0,0,0)}或p{color:RGB(0%,0%,0%)}三个分别是红绿蓝,范围为0~255;16进制色p{color:#1199ff}</div>
  88.           <div class=“four”>
  89.  <div class=“fourhead”>
  90.           <h2 class=“thinright1h2”>视频下载</h2>
  91.           </div>          A.颜色
  92.    命名颜色:p{color:red;}
  93. REB颜色:p{color:RGB(0,0,0)}或p{color:RGB(0%,0%,0%)}三个分别是红绿蓝,范围为0~255;16进制色p{color:#1199ff}</div>
  94.        </div>
  95.        <div id=“rightmain1”>
  96.        <div class=“thinright1”>
  97.        <h2 class=“thinright1h2”>视频下载</h2>
  98.         </div>
  99.           <div id=“thinli”>
  100.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  101.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  102.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  103.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  104.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  105.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  106.              <li><a href=“#”>0518/2013 linux 12课 作业及预习+视频</a></li>
  107.           </div>
  108.        </div>
  109.    </div>
  110.    <div id=“foot”>
  111.    <p>© 2009-2014 <a target=“_blank” href=“http://www.itbool.com”>布尔教育<a/>  版权所有 京ICP备13042289号-1</p>
  112.    </div>
  113. </div>
  114. </body>
  115. </html>

各种html标签的含义以及学习推荐:http://www.w3school.com.cn/h.asp

首先需要学会的就是用div把整个页面分成很多的小块,也就是页面框架的搭建;

div属性:div只能自己独自占一行,但是可以用float属性让div快浮动(css代码),布局一定要从大出着眼,div布局一定要和css一块进行,不然看不到布局的效果,另外给背景加一些颜色;

另外:为了解决一些浏览器的兼容问题,需要给css加一些初始化代码,解决兼容问题,例如:百度,谷歌等等都有一些css初始化的代码,可以在网上找用一下,下面贴出我用的初始化代码:

  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
  2. body { font-size:12pxcolor:#666font-family:Verdana, Microsoft YaHei, Simsun; background:#fffline-height:24px; }
  3. fieldset, img { border:0; }
  4. ol, ul { list-style:none; }
  5. h1, h2, h3, h4, h5, h6{ font-size:100%; }
  6. em { font-style:normal; }
  7. input, button, select, textarea { outline:none; }
  8. textarea { resize:none; } //禁用了文本的拖拉,尤其在谷歌下
  9. p{ text-align:justify; text-justify:distribute;} //为了使文本段落左右两边对齐
  10. a { color#666text-decoration:none; }
  11. a:hover { color#f60text-decoration:none; }

虽然说初始化代码会影响到seo但是相对于浏览器的兼容性来说还是次要的。

  1. #consener1{
  2. width:1002px;
  3. margin-left:auto;
  4. margin-right:auto;
  5. }
  6. #header{
  7. height:128px;
  8. background:url(images/top_bg.jpg);
  9. background-image:width 10px;
  10. }
  11. #nav {float:left;
  12. margin-top:0px;
  13. margin-left:0px;
  14. clearboth;
  15. }
  16. #nav ul{
  17. margin-left:0px;}
  18. #header ul li{
  19. float:left;
  20. display:block;
  21. width:100px;
  22. background:ul(images/nav_on.gif);
  23. text-aligncenter;
  24. }
  25. .nav_li a {
  26. displayblock;
  27. height37px;
  28. text-aligncenter;
  29. font: 1.5em/37px “???ии?беиж?бниж?бо”,“иж?бо??б░”,sans-serif;
  30. color#363636;
  31.  text-decorationnone;
  32. }
  33. .nav_li a:hover, .onhover {
  34. background#FF9532 url(images/nav_on.gif);
  35. color#FFF;
  36. }
  37. .nav_li{floatleft;
  38. width100px;
  39. height37px;
  40. margin-right2px;
  41. text-decorationnone;}
  42.   #english{float:rightrightmargin-top:6px;margin-right:17px;height:20px;}
  43.   #english a{ font11px/11px Tahoma,Verdana,Arial,sans-serif;
  44.   text-decorationnone;
  45. color#898989;
  46.   }
  47. #logo{
  48. float:left;}
  49. #thinmain{
  50. height300px;
  51. margin-top6px;
  52. }
  53. #thin{
  54. width:700px;
  55. float:left;
  56. background:url(images/banner01.png);
  57.   background-repeat:no-repeat;}
  58.   .tablethin{
  59.   background:white;
  60.    border-collapse:collapse;
  61.    border:1px solid #D9D9D9;
  62.      width:100%;
  63.  }
  64.  table, th, td
  65.   {
  66.   border:1px solid #D9D9D9;
  67.   }
  68.   #thinright{
  69.   height:300px;
  70. width:295px;
  71. border1px solid #D9D9D9;;
  72. border-top:none;
  73.   float:rightright;}
  74.   .thinright1{width:295px;height:40px;background:url(images/sub_bar_title_bg.gif);}
  75. #main{
  76. height:600px;
  77. }
  78. #leftmain1{
  79. height:600px;
  80. width:700px;
  81. float:left;
  82. }
  83.   .four{
  84.     border1px solid #D9D9D9;
  85.     border-radius: 0px 0px 5px 5px;
  86.   width:306px;
  87.   height:260px;
  88.   margin:10px;
  89.   padding:10px;
  90.   float:left;
  91.  /* background:url(images/sub_bar_title_bg.gif);
  92.   background-repeat:none;
  93.    background-position:top;*/
  94.   }
  95.   .fourhead{
  96.   height:36px;
  97.   width:294px;
  98.   background:url(images/sub_bar_title_bg.gif);
  99.   background-repeat:none;
  100.    background-position:top;}
  101.    #thinli11{list-style-type:none;
  102.    margin-left:0px;
  103.    float:left;
  104. }
  105.    #thinli11 li{
  106.    display:block;
  107.    background:url(images/service_intro_bg.gif);
  108.    background-repeat:no-repeat;
  109.    float:left;}
  110.    #thinli11 li a{
  111.    display:block;
  112.     width264px;
  113.     height29px;
  114.       font13px/16px “宋体”,serif;
  115.     color#808080;
  116.     padding0px 0px 0px 30px;
  117.    }
  118.    #thinli11 a:link{
  119.    text-decoration:none;}
  120.    #thinli11 a:hover{
  121.    text-decoration:underline;}
  122. #rightmain1{
  123. height:600px;
  124. width:297px;
  125. float:rightright;
  126. background-image:url(images/sub_left_nav_bg.gif);
  127.   background-repeat:repeat-x;
  128.     background-position:top;
  129. }
  130. #rightmain1 li{width294px;
  131. height29px;
  132. }
  133. .thinright1h2{
  134. display:block;
  135. float:left;
  136. margin-left:40px;
  137. height37px;
  138. text-aligncenter;
  139. text-decoration:none;
  140. line-height:29px;}
  141. #thinli{list-style-type:none;}
  142. #thinli li a{
  143. display:block;
  144.     width264px;
  145.     height29px;
  146.     padding0px 0px 0px 30px;
  147.     backgroundurl(images/article_head.gif) no-repeat scroll 0% 0% transparent;
  148.     font14px/29px “宋体”,serif;
  149.     color#808080;
  150. }
  151. #thinli li a:link{
  152.  text-decoration:none;
  153. }
  154. #thinli li  a:hover{
  155.  background:url(images/article_on_bg.gif);
  156. }
  157. #foot{
  158. background:#979797;
  159. margin-top:40px;
  160. padding-top30px;
  161. height50px;
  162. text-aligncenter;
  163. backgroundnone repeat scroll 0% 0% #F1F1F1;
  164. border-radius: 5px;
  165. }

也实在不知道怎么写,就这样吧。

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

4条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注