• CSS3 实现厉害的文字和输入框组合效果

    最近在忙着弄网站，学到了不少效果，这又是一个厉害的

     

    Html代码  收藏代码
    1. <html>  
    2.     <head>  
    3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    4.         <title>发送微博页面</title>  
    5.   
    6. <style>  
    7. html{padding:0px;margin:0px;}  
    8. body{padding:0px;margin:0px;text-align:center;}  
    9.   
    10. /** 弹出层背景 **/  
    11. .pop-bg{filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;border-radius: 15px;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(188, 188, 188, 0.5);}  
    12. .pop-body{padding:10px;}  
    13. .pop-body-title{float:left;border-radius: 10px;100%;border:1px solid #4096ee;}  
    14. .title-text{float:left;color: black; font-size: 22px;padding-left:10px;}  
    15. .title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}  
    16. .title-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}  
    17. .title-close a:hover{text-decoration: none;color:red;display: inline-block;background:#c0d3e7;border-radius: 5px;padding-left:5px;padding-right:5px;}  
    18.   
    19. /** 内容部份 **/  
    20. .pop-body-context{  
    21.     border-radius: 10px;100%;border:1px solid #4096ee;  
    22.     float:left;  
    23.     margin-top:15px;  
    24. }  
    25.   
    26. .pop-body-c-title{  
    27.     float:left;  
    28.       
    29. }  
    30.   
    31. .a-btn{  
    32.     -moz-border-bottom-colors: none;  
    33.     -moz-border-image: none;  
    34.     -moz-border-left-colors: none;  
    35.     -moz-border-right-colors: none;  
    36.     -moz-border-top-colors: none;  
    37.     -moz-transition: all 0.3s linear 0s;  
    38.     background: -moz-linear-gradient(center top , #FEDA71 0%, #FEBB4A 100%) repeat scroll 0 0 transparent;  
    39.     border-color: #F5B74E #E5A73E #D6982F;  
    40.     border-radius: 4px 4px 4px 4px;  
    41.     border-style: solid;  
    42.     border- 1px;  
    43.     box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #FEE395 inset;  
    44.     display: inline-block;  
    45.     float: left;  
    46.     height: 34px;  
    47.     margin: 10px;  
    48.     margin-right: 3px;  
    49.     margin-left: 4px;  
    50.     overflow: hidden;  
    51.     padding: 5px 130px 0 0px;  
    52.     position: relative;  
    53.     text-decoration: none;  
    54. }  
    55. .a-btn-text{  
    56.     padding-top:5px;  
    57.     display:block;  
    58.     font-size:14px;  
    59.     white-space:nowrap;  
    60.     color:#996633;  
    61.     text-shadow:0 1px 0 #fedd9b;  
    62.     -webkit-transition:all 0.3s linear;  
    63.     -moz-transition:all 0.3s linear;  
    64.     -o-transition:all 0.3s linear;  
    65.     transition:all 0.3s linear;  
    66.     font-weight:bold;  
    67. }  
    68. .a-btn-slide-text{  
    69.     position:absolute;  
    70.     top:35px;  
    71.     left:0px;  
    72.     auto;  
    73.     height:0px;  
    74.     background:#fff;  
    75.     color:#996633;  
    76.     font-size:13px;  
    77.     white-space:nowrap;  
    78.     font-family:Georgia, serif;  
    79.     font-style:italic;  
    80.       
    81.     overflow:hidden;  
    82.     line-height:40px;  
    83.     -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
    84.     -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
    85.     box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
    86.     -webkit-transition:height 0.3s linear;  
    87.     -moz-transition:height 0.3s linear;  
    88.     -o-transition:height 0.3s linear;  
    89.     transition:height 0.3s linear;  
    90. }  
    91. .a-btn-icon-right{  
    92.     position:absolute;  
    93.     right:0px;  
    94.     top:0px;  
    95.     height:41px;  
    96.     130px;  
    97.     border-left:1px solid #f5b74e;  
    98.     -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
    99.     -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
    100.     box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
    101. }  
    102. .a-btn:hover{  
    103.     height:65px;  
    104.     -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
    105.     -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
    106.     box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
    107. }     
    108. .a-btn:hover .a-btn-text{  
    109.     text-shadow:1px 1px 1px rgba(0,0,0,0.2);  
    110.     color:#fff;  
    111. }  
    112. .a-btn:hover .a-btn-slide-text{  
    113.     height:40px;  
    114. }  
    115. .a-btn-slide-text input{  
    116.     float:left;  
    117.     margin-top:4px;  
    118.     margin-left:2px;  
    119. }  
    120. .pop-body-c-text{  
    121.     padding-left:3px;  
    122. }  
    123. .pop-body-c-textarea{  
    124.     780px;  
    125.     height:100px;  
    126. }  
    127. .pop-body-row-u{  
    128.     padding-top:5px;  
    129.     padding-left:10px;  
    130. }  
    131. .a-t-i-r-t{  
    132.     font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;  
    133. }  
    134.   
    135. .pop-body-images-l{  
    136.     padding:10px;  
    137.       
    138. }  
    139.   
    140. .pop-body-ims-panel{  
    141.     padding:10px;  
    142. }  
    143.   
    144. .pop-b-i-i-img{  
    145.     border-radius:8px;  
    146.     float:left;  
    147.     position:relative;  
    148.     left:-20px;  
    149.       
    150. }  
    151. .pop-b-i-i-unit{  
    152.     float:left;  
    153. }  
    154. .pop-b-i-i-unit input{  
    155.     float:left;  
    156.     position:relative;  
    157.     z-index:99;  
    158. }  
    159. </style>  
    160.     </head>  
    161.   
    162.     <body>  
    163.         <br />  
    164.         <div style="float:left;820px;height:200px;position:relative;left:100px;">  
    165.             <div class="pop-bg" style="float:left;position:relative;820px;height:200px;"></div>  
    166.             <div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;98%;">  
    167.                 <!-- 头部 -->  
    168.                 <div class="pop-body-title">  
    169.                     <div class="title-text">标题</div>  
    170.                     <div class="title-close"><a href="#">关闭</a></div>  
    171.                 </div>  
    172.   
    173.                 <!-- 内容部分 -->  
    174.                 <div class="pop-body-context">  
    175.                     <div class="pop-body-c-title">  
    176.                         <a class="a-btn" href="#">  
    177.                             <span class="a-btn-text">栏目名称</span>  
    178.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t">请输入</div></span>  
    179.                             <span class="a-btn-slide-text"><input size="24"/></span>  
    180.                         </a>  
    181.   
    182.                         <a class="a-btn" href="#">  
    183.                             <span class="a-btn-text">中文名称</span>  
    184.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
    185.                             <span class="a-btn-slide-text"><input size="24"/></span>  
    186.                         </a>  
    187.   
    188.                         <a class="a-btn" href="#">  
    189.                             <span class="a-btn-text">英文名称</span>  
    190.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
    191.                             <span class="a-btn-slide-text"><input size="24"/></span>  
    192.                         </a>  
    193.   
    194.                         <a class="a-btn" href="#">  
    195.                             <span class="a-btn-text">适配类型</span>  
    196.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
    197.                             <span class="a-btn-slide-text"><input size="24"/></span>  
    198.                         </a>  
    199.                     </div>  
    200.   
    201.                       
    202.             </div>  
    203.         </div>  
    204.   
    205.   
    206.     </body>  
    207. </html>  

     
  • 相关阅读:
    Sum Root to Leaf Numbers
    Sum Root to Leaf Numbers
    Sort Colors
    Partition List
    Binary Tree Inorder Traversal
    Binary Tree Postorder Traversal
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Search a 2D Matrix
    leetcode221
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3922449.html
Copyright © 2020-2023  润新知