• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第二节课:样式之美 web前端课程体系之css
 

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

on

  • 1,432 views

百度web前端先进课程之CSS

百度web前端先进课程之CSS

Statistics

Views

Total Views
1,432
Views on SlideShare
1,432
Embed Views
0

Actions

Likes
4
Downloads
98
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • • • • 
    • • • • 
    • • • • 
    • • 
    • • • • 
    • • 
    • • • 
    • • • 
    • • • • • • • • 
    • • 
    • • • • • 
    • • • • 
    • • • • 
    • • • • • • 
    • • • • • 
    • • • 
    • • 
    • <html>  <head>  <title> Web </title>  </head>    <body>  <h1>Hello,  HTML  and  CSS!</h1>  </body>  </html>
    • • • •  <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  CSS!</h1>  </body>  </html>
    • • • 
    • <ol>      <li><h1>It’s  All  Right  Now</h1></li>      <li><h1>KIM  NEWMAN  JAGO</h1></li>      <li>The  Season  Ticket</li>  </ol>  
    • • • • • 
    • <!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>
    • <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>  
    • • • •  ©• 
    • <div  id="content">          <!-­‐-­‐   begin  -­‐-­‐>            <div  id="main"></div>          <!-­‐-­‐   end  -­‐-­‐>          <!-­‐-­‐   begin  -­‐-­‐>          <div  id="aside"></div>          <!-­‐-­‐   end  -­‐-­‐>  </div>  
    • <div  id="main">          <dl  class="info">              <dt  class="t"> </dt>              <dd></dd>          </dl>  </div>  
    • • •  <dl>          <dt> 1</dt>          <dd> 1</dd>          <dt> 2</dt>          <dd> 2</dd>   </dl>  
    • <dd>          <div  class="holder">                  <div  class="photos">                          <a  href="#">                              <img  src="img/a1.jpg">                          </a>                  </div>          </div>  </dd>                      
    • • •  <a  href=“http://www.baidu.com”> </a>
    • • •  <img  src="pic.jpg"  />
    • • • • • 
    • • • 
    • • • • 
    • <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>                      
    • <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>    
    • • •  <ol>      <li></li>      <li></li>   </ol>
    • • • 
    • <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>                      
    • <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>    
    • <dl  class="search">      <dd>          <form>              <input  type="text"  class="ipt">              <input  type="submit"  value=" "  class="btn">          </form>      </dd>  </dl>    
    • • • •  –  –  –  –  –  – 
    • <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>    
    • • • 
    • • 
    • • • • 
    • body  {      background-­‐color:  gray;      text-­‐align:center;  }    h1  {      font-­‐size:30px;      color:white;  }  
    • • • •  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:0}    ul{list-­‐style:none}    table,img{border:0}    a{color:#0057a7;text-­‐decoration:none}    a:hover{color:#c00000;text-­‐decoration:underline}    
    • •  <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{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}    
    • •  <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;line-­‐height:30px;  background:#f7f7f7}  .info  .holder{width:400px;float:left;  position:relative}    .info  .photos  img{vertical-­‐align:top}    
    • /*   */  
    • • •  <div  class="f"></div>   <div  class="f"></div>   <div></div>     .f{color:white}
    • •  <div  id="main">          <p  class="normal"></p>          <p></p>   </div>   <p  class="normal"></p>     #main  .normal{color:red}  
    • /*   /    .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}    
    • • • 
    • position:relative
    • position:absolute
    • /*   /    .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}    
    • • • • • 
    • • • • 
    • • • 
    • /*   /    .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}  
    • /*   /    .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}    
    • • • • 
    • • • • 
    • /*   /  .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}  
    • /*   /  .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}  
    • • 
    • • • 
    • • • •