第二节课:样式之美 web前端课程体系之css

1,487 views

Published on

百度web前端先进课程之CSS

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,487
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
105
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

第二节课:样式之美 web前端课程体系之css

  1. 1. • • • 
  2. 2. • • • 
  3. 3. • • • 
  4. 4. • 
  5. 5. • • • 
  6. 6. • 
  7. 7. • • 
  8. 8. • • 
  9. 9. • • • • • • • 
  10. 10. • 
  11. 11. • • • • 
  12. 12. • • • 
  13. 13. • • • 
  14. 14. • • • • • 
  15. 15. • • • • 
  16. 16. • • 
  17. 17. • 
  18. 18. <html>  <head>  <title> Web </title>  </head>    <body>  <h1>Hello,  HTML  and  CSS!</h1>  </body>  </html>
  19. 19. • • •  <title></title>
  20. 20. •  <title> Web </title>
  21. 21. • • • 
  22. 22. •  <p  id="p1"> Web </p>
  23. 23. <p  id="p1"> Web </p>
  24. 24. <!-­‐-­‐ -­‐-­‐>
  25. 25. • • • • 
  26. 26. <!doctype  html>  <html>  <head>  <title> Web </title>  </head>    <body>  <h1>Hello,  HTML  and  CSS!</h1>  </body>  </html>
  27. 27. • • 
  28. 28. <ol>      <li><h1>It’s  All  Right  Now</h1></li>      <li><h1>KIM  NEWMAN  JAGO</h1></li>      <li>The  Season  Ticket</li>  </ol>  
  29. 29. • • • • 
  30. 30. <!DOCTYPE  HTML  PUBLIC  "-­‐//W3C//DTD  HTML  4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">    <html>  <head>    <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=gb2312">  <title>web </title>  </head>    <body>  </body>  </html>
  31. 31. <body>  <div  id="wrapper">          <!-­‐-­‐   begin  -­‐-­‐>          <div  id="header"></div>          <!-­‐-­‐   end  -­‐-­‐>          <!-­‐-­‐   begin  -­‐-­‐>          <div  id="content"></div>          <!-­‐-­‐   end  -­‐-­‐>          <!-­‐-­‐   begin  -­‐-­‐>          <div  id="footer">&copy;  2011  Baidu</div>          <!-­‐-­‐   end  -­‐-­‐>    </div>    </body>  
  32. 32. • • •  ©• 
  33. 33. <div  id="content">          <!-­‐-­‐   begin  -­‐-­‐>            <div  id="main"></div>          <!-­‐-­‐   end  -­‐-­‐>          <!-­‐-­‐   begin  -­‐-­‐>          <div  id="aside"></div>          <!-­‐-­‐   end  -­‐-­‐>  </div>  
  34. 34. <div  id="main">          <dl  class="info">              <dt  class="t"> </dt>              <dd></dd>          </dl>  </div>  
  35. 35. • •  <dl>          <dt> 1</dt>          <dd> 1</dd>          <dt> 2</dt>          <dd> 2</dd>   </dl>  
  36. 36. <dd>          <div  class="holder">                  <div  class="photos">                          <a  href="#">                              <img  src="img/a1.jpg">                          </a>                  </div>          </div>  </dd>                      
  37. 37. • •  <a  href=“http://www.baidu.com”> </a>
  38. 38. • •  <img  src="pic.jpg"  />
  39. 39. • • • • 
  40. 40. • • 
  41. 41. • • • 
  42. 42. <div  class="holder">          <div  class="photos">...</div>          <div  class="btn">              <div  class="mask"></div>              <p>                  <a  href="#"  class="show">1</a>|                  <a  href="#">2</a>|                  <a  href="#">3</a>|                  <a  href="#">4</a>              </p>          </div>    </div>                      
  43. 43. <ol>          <li  class="show">              <h3><a  href="#">title</a></h3>              <p>web </p>          </li>          <li>              <h3><a  href="#">title</a></h3>              <p>web </p>          </li>          ...  </ol>    
  44. 44. • •  <ol>      <li></li>      <li></li>   </ol>
  45. 45. • • 
  46. 46. <dl  class="members">          <dt  class="t"> </dt>          <dd>                  <ul  class="tab_t  f14">                          <li  class="first  show"> </li>                          <li> </li>                          <li> </li>                  </ul>          </dd>  </dl>                      
  47. 47. <ul  class="tab_con">      <li  class="show">          <div  class="intro">              <div  class="pic">                  <img  />              </div>              <div  class="about">                  <h3><a  href="#"> </a></h3><p> </p>              </div>              <p  class="others">   <br>  Emailchangqi@baidu.com</p>            </div>          <div  class="map></div>        </li>  </ul>    
  48. 48. <dl  class="search">      <dd>          <form>              <input  type="text"  class="ipt">              <input  type="submit"  value=" "  class="btn">          </form>      </dd>  </dl>    
  49. 49. • • •  –  –  –  –  –  – 
  50. 50. <dl  class="course  fl">      <dt  class="t">css </dt>      <dd>          <ul>              <li><a  href="#"> </a></li>                <li><a  href="#"> ie6 </a></li>          ...          </ul>      </dd>  </dl>    
  51. 51. • • 
  52. 52. • 
  53. 53. • • • 
  54. 54. body  {      background-­‐color:  gray;      text-­‐align:center;  }    h1  {      font-­‐size:30px;      color:white;  }  
  55. 55. • • •  h1  {color:blue;}
  56. 56. • • • 
  57. 57. • •  <link  type="text/css"  rel="stylesheet"   href="style_1.css"  />
  58. 58. body{font:12px  " ";color:#333;background:#fff}    body,form,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0}    ul{list-­‐style:none}    table,img{border:0}    a{color:#0057a7;text-­‐decoration:none}    a:hover{color:#c00000;text-­‐decoration:underline}    
  59. 59. •  <div>content</div>   <p></p>     div{color:black;}  
  60. 60. • • • • • • 
  61. 61. • • 
  62. 62. • • • • 
  63. 63. margin:20px;  border:10px  solid  red;  padding:40px;  width:300px;  height:100px  
  64. 64. • • • • 
  65. 65. • • • 
  66. 66. #wrapper{width:960px;margin:0  auto;overflow:hidden}    #header{height:119px;background:url(img/banner.jpg)}  #content{margin-­‐top:10px}    #main{width:640px;float:left}    #footer{color:#aeaeae;text-­‐align:center;padding:20px  0}    #aside{width:310px;border-­‐top:3px  solid  #7d7d7d;float:right}    
  67. 67. •  <div  id="main"></div>   <div  id="content"></div>     #main{width:300px}
  68. 68. • 
  69. 69. • • • • • 
  70. 70. 1px   background-­‐repeat:repeat-­‐x  
  71. 71. • • 
  72. 72. float:right
  73. 73. float:left
  74. 74. float:left float:left
  75. 75. float:left float:left
  76. 76. /*   /    .info{border:1px  solid  #e0e0e0;margin-­‐bottom:10px;padding:1px;zoom:1}  .info  dt{height:30px;line-­‐height:30px;  background:#f7f7f7}  .info  .holder{width:400px;float:left;  position:relative}    .info  .photos  img{vertical-­‐align:top}    
  77. 77. /*   */  
  78. 78. • •  <div  class="f"></div>   <div  class="f"></div>   <div></div>     .f{color:white}
  79. 79. •  <div  id="main">          <p  class="normal"></p>          <p></p>   </div>   <p  class="normal"></p>     #main  .normal{color:red}  
  80. 80. /*   /    .info  .btn{width:100px;position:absolute;left:295px;top:188px}    .info  .btn  a{width:20px;height:20px;display:inline-­‐block;color:#9d9d9d;text-­‐decoration:none}    .info  .btn  a:hover{text-­‐decoration:underline}    .info  .btn  a.show{color:#fff}  .info  .btn  .mask{height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50)}  .info  .btn  p{width:100%;color:#8b8b8b;line-­‐height:20px;text-­‐align:center;position:absolute;top:0}    
  81. 81. • • 
  82. 82. position:relative
  83. 83. position:absolute
  84. 84. /*   /    .info  ol{width:180px;float:left;padding-­‐left:35px}  .info  li{padding:8px  0}  .info  li  h3{font-­‐size:14px;font-­‐weight:normal}  .info  li  p{line-­‐height:18px;padding-­‐top:5px;display:none}  .info  li.show  p{display:block}    
  85. 85. • • • • 
  86. 86. • • • 
  87. 87. • • 
  88. 88. /*   /    .members  .tab_t{height:30px;text-­‐align:center;border-­‐bottom:1px  solid  #e0e0e0;background:#f7f7f7}  .members  .tab_t  li{width:120px;height:22px;padding-­‐top:8px;color:#0059a7;background:url(img/bg.gif)  no-­‐repeat  0  8px;float:left;cursor:pointer}  .members  .tab_t  .first{background:none}  .members  .tab_t  li.show{height:23px;color:#000;background:#fff;border-­‐left:1px  solid  #e0e0e0;border-­‐right:1px  solid  #e0e0e0;position:relative;margin:0  -­‐2px  -­‐1px  -­‐1px}  
  89. 89. /*   /    .search{text-­‐align:center;border:1px  solid  #e0e0e0;margin-­‐bottom:10px;padding:20px  0}  .search  .ipt,.search  .btn{font-­‐size:14px;background:url(img/i.png)}  .search  .ipt{width:400px;height:18px;padding:6px  7px;font:16px  arial;margin-­‐right:6px;border:1px  solid  #cdcdcd;border-­‐color:#9a9a9a  #cdcdcd  #cdcdcd  #9a9a9a;vertical-­‐align:top;*vertical-­‐align:1px}    .search  .btn{width:97px;height:34px;border:0;background-­‐position:0  -­‐41px;cursor:pointer}  .search  .btn_h{background-­‐position:-­‐102px  -­‐41px}    
  90. 90. • • • 
  91. 91. • • • 
  92. 92. /*   /  .search{text-­‐align:center;border:1px  solid  #e0e0e0;margin-­‐bottom:10px;padding:20px  0}  .search  .ipt,.search  .btn{font-­‐size:14px;background:url(img/i.png)}  .search  .ipt{width:400px;height:18px;padding:6px  7px;font:16px  arial;margin-­‐right:6px;border:1px  solid  #cdcdcd;border-­‐color:#9a9a9a  #cdcdcd  #cdcdcd  #9a9a9a;vertical-­‐align:top;*vertical-­‐align:1px}  .search  .btn{width:97px;height:34px;border:0;background-­‐position:0  -­‐41px;cursor:pointer}  .search  .btn_h{background-­‐position:-­‐102px  -­‐41px}  
  93. 93. /*   /  .course{width:300px;border-­‐top:1px  solid  #e0e0e0;padding-­‐top:1px}  .course  dt{height:30px;line-­‐height:30px;background:#f7f7f7;border-­‐bottom:1px  solid  #e0e0e0}  .course  dd{font-­‐size:14px;padding:10px}  .course  li{line-­‐height:28px;background:url(img/dot.gif)  no-­‐repeat  0px  center;padding-­‐left:15px}  
  94. 94. • 
  95. 95. • • 
  96. 96. • • • 

×