Your SlideShare is downloading. ×
0
• • • 
• • • 
• • • 
• 
• • • 
• 
• • 
• • 
• • • • • • • 
• 
• • • • 
• • • 
• • • 
• • • • • 
• • • • 
• • 
• 
<html>	  <head>	  <title>        Web       </title>	  </head>	  	  <body>	  <h1>Hello,	  HTML	  and	  CSS!</h1>	  </body>	...
• • •      <title></title>
•      <title>   Web   </title>
• • • 
•      <p	  id="p1">   Web   </p>
<p	  id="p1">   Web   </p>
<!-­‐-­‐   -­‐-­‐>
• • • • 
<!doctype	  html>	  <html>	  <head>	  <title>        Web       </title>	  </head>	  	  <body>	  <h1>Hello,	  HTML	  and	  ...
• • 
<ol>	  	  	  <li><h1>It’s	  All	  Right	  Now</h1></li>	  	  	  <li><h1>KIM	  NEWMAN	  JAGO</h1></li>	  	  	  <li>The	  Se...
• • • • 
<!DOCTYPE	  HTML	  PUBLIC	  "-­‐//W3C//DTD	  HTML	  4.01//EN"	  "http://www.w3.org/TR/html4/strict.dtd">	  	  <html>	  <he...
<body>	  <div	  id="wrapper">	  	  	  	  	  <!-­‐-­‐	   begin	  -­‐-­‐>	  	  	  	  	  <div	  id="header"></div>	  	  	  	 ...
• • •      ©• 
<div	  id="content">	  	  	  	  	  <!-­‐-­‐	   begin	  -­‐-­‐>	  	  	  	  	  	  <div	  id="main"></div>	  	  	  	  	  <!-­...
<div	  id="main">	  	  	  	  	  <dl	  class="info">	  	  	  	  	  	  	  <dt	  class="t">   </dt>	  	  	  	  	  	  	  <dd><...
• •  <dl>	   	  	  	  	  <dt>   1</dt>	   	  	  	  	  <dd>   1</dd>	   	  	  	  	  <dt>   2</dt>	   	  	  	  	  <dd>   2</...
<dd>	  	  	  	  	  <div	  class="holder">	  	  	  	  	  	  	  	  	  <div	  class="photos">	  	  	  	  	  	  	  	  	  	  	 ...
• •      <a	  href=“http://www.baidu.com”>            </a>
• •      <img	  src="pic.jpg"	  />
• • • • 
• • 
• • • 
<div	  class="holder">	  	  	  	  	  <div	  class="photos">...</div>	  	  	  	  	  <div	  class="btn">	  	  	  	  	  	  	 ...
<ol>	  	  	  	  	  <li	  class="show">	  	  	  	  	  	  	  <h3><a	  href="#">title</a></h3>	  	  	  	  	  	  	  <p>web    ...
• •      <ol>	       	  	  <li></li>	       	  	  <li></li>	       </ol>
• • 
<dl	  class="members">	  	  	  	  	  <dt	  class="t">                                  </dt>	  	  	  	  	  <dd>	  	  	  	 ...
<ul	  class="tab_con">	  	  	  <li	  class="show">	  	  	  	  	  <div	  class="intro">	  	  	  	  	  	  	  <div	  class="p...
<dl	  class="search">	  	  	  <dd>	  	  	  	  	  <form>	  	  	  	  	  	  	  <input	  type="text"	  class="ipt">	  	  	  	 ...
• • •      –      –      –      –      –      – 
<dl	  class="course	  fl">	  	  	  <dt	  class="t">css                </dt>	  	  	  <dd>	  	  	  	  	  <ul>	  	  	  	  	  ...
• • 
• 
• • • 
body	  {	  	  	  background-­‐color:	  gray;	  	  	  text-­‐align:center;	  }	  	  h1	  {	  	  	  font-­‐size:30px;	  	  	...
• • •      h1	  {color:blue;}
• • • 
• •      <link	  type="text/css"	  rel="stylesheet"	       href="style_1.css"	  />
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...
•      <div>content</div>	       <p></p>	       	       div{color:black;}	  
• • • • • • 
• • 
• • • • 
margin:20px;	  border:10px	  solid	  red;	  padding:40px;	  width:300px;	  height:100px	  
• • • • 
• • • 
#wrapper{width:960px;margin:0	  auto;overflow:hidden}	  	  #header{height:119px;background:url(img/banner.jpg)}	  #content...
•      <div	  id="main"></div>	       <div	  id="content"></div>	       	       #main{width:300px}
• 
• • • • • 
1px	     background-­‐repeat:repeat-­‐x	  
• • 
float:right
float:left
float:left             float:left
float:left             float:left
/*	           /	  	  .info{border:1px	  solid	  #e0e0e0;margin-­‐bottom:10px;padding:1px;zoom:1}	  .info	  dt{height:30px;...
/*	     */	  
• •      <div	  class="f"></div>	       <div	  class="f"></div>	       <div></div>	       	       .f{color:white}
•      <div	  id="main">	       	  	  	  	  <p	  class="normal"></p>	       	  	  	  	  <p></p>	       </div>	       <p	  ...
/*	              /	  	  .info	  .btn{width:100px;position:absolute;left:295px;top:188px}	  	  .info	  .btn	  a{width:20px;...
• • 
position:relative
position:absolute
/*	              /	  	  .info	  ol{width:180px;float:left;padding-­‐left:35px}	  .info	  li{padding:8px	  0}	  .info	  li	...
• • • • 
• • • 
• • 
/*	           /	  	  .members	  .tab_t{height:30px;text-­‐align:center;border-­‐bottom:1px	  solid	  #e0e0e0;background:#f...
/*	            /	  	  .search{text-­‐align:center;border:1px	  solid	  #e0e0e0;margin-­‐bottom:10px;padding:20px	  0}	  .s...
• • • 
• • • 
/*	            /	  .search{text-­‐align:center;border:1px	  solid	  #e0e0e0;margin-­‐bottom:10px;padding:20px	  0}	  .sear...
/*	              /	  .course{width:300px;border-­‐top:1px	  solid	  #e0e0e0;padding-­‐top:1px}	  .course	  dt{height:30px;...
• 
• • 
• • • 
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
第二节课:样式之美 web前端课程体系之css
Upcoming SlideShare
Loading in...5
×

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

1,234

Published on

百度web前端先进课程之CSS

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

No Downloads
Views
Total Views
1,234
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
105
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "第二节课:样式之美 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. • • • 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×