[作业]NO.12 CSS定位

admin 2人参与 0 次点击

作业要求:

1:轮播的内容,用代码做,不要在PS里面每个品牌Logo合在一起

2:不需要实现轮播效果,只需要做出样子

3:尽量做的精致一点(跟作业效果差不多)

    1 讨论 | 直到 2018-06-25 6:06:09
  • 郭郭
    1
    <style>
    * { margin:0; padding:0; list-style:none;}
    a { text-decoration:none;}
    body { background-color:#69C}
    .urse { width:396px; height:216px; background-color:#FFF; margin:10 auto; border:#CCC solid 1px; position:relative;}
    .urse .urse1 a { float:left;}
    .urse .urse1 img { width:130px; height:70px; padding:0px; border:#CCC solid 1px;}
    .urse .urse3 { position:absolute; z-index:5; bottom:5px; left:50%; margin-left:-30px;}
    .urse .urse3 span{ display:block; width:10px; height:10px; border-radius:5px; background-color:#999; opacity:0.5; float:left; margin:2px;}
    .urse .urse21,.urse22 { display:inline-block; width:20px; height:30px; background-color:#999; opacity:0.5; line-height:30px; color:#FFF;position:absolute; top:50%; margin-top:-15px; text-align:center;}
    .urse .urse21 { z-index:2; left:0px;}
    .urse .urse22 { z-index:3; right:0px;}
    
    </style>
    <body>
    <div class="urse">
    	<div class="urse1">
      	<a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
        <a href="#"</span> target="_blank"><img src="http://img.alicdn.com/i2/2/TB1pt.lKFXXXXbhXpXXSutbFXXX.jpg" />
    	
      <div class="urse2">
      	class="urse21"> < 
        class="urse22"> > 
      
      <div class="urse3">
      	
        
        
        
        
      
    
    </body>
    

    预览

    [作业]NO.12 CSS定位