分类目录归档:html知识库

html中如何使用css脚本将Input文本框的边框设置为圆角呢?


摘要:
下文讲述使用css脚本将input文本框边框设置为圆角的方法分享,如下所示;

圆角是我们网页设计中常用的一种样式,
边框设置为圆角可使页面更美观,样式更好看,那么文本框如何设置圆角呢?
下文将一一道来,如下所示:

实现思路:
     使用css中border-radius属性即可设置边框的圆角,
如下例所示

例:
文本框设置为圆角的示例分享

<meta charset='utf-8' />
<p>
 maomao365.com<br />
css将input文本框的边框设置为圆角
的示例分享
</p>
<hr />
<style>
input{
    display:block;
    margin:10px;
    width:150px;                                        
      height: 30px; 
      border: 1px solid green;
      border-radius:10px;         
}
</style>
<input type="text"  />
<input type="text"  />
<input type="text"  />
<input type="text"  />
<input type="text"  />
<input type="text"  />
<input type="button" 
value="submit" /> 
css文本框设置为圆角的示例分享

css文本框设置为圆角的示例分享

html中如何美化表格呢?


摘要:
下文通过使用css脚本美化表格的示例分享,如下所示;

表格的美化,主要通过设置内容的边距,
边框的颜色,字体的颜色,字体的大小,
达到给人视觉上的美化,
那么我们平常如何美化表格呢?
例:

 <meta charset='utf-8' />
<p>
 maomao365.com<br />
 美化table的示例分享 
</p>
<hr />
<style>
 #tabTest {  
    padding: 0;
    margin: 0;  
    border-collapse:collapse;
}

td {
    border: 1px solid green;  
    background:white;
    font-size:12px;
    padding: 6px 6px 6px 12px;
    color: green;
} 

</style>

<table id="tabTest">
   <tr><td>编号<td>内容</tr>
   <tr><td>1<td>猫猫教程</tr>
   <tr><td>2<td>maomao365.com</tr>
   <tr><td>3<td>linux28.com</tr>
   <tr><td>4<td>教程网</tr>
</table>
使用css技巧美化表格的示例分享

使用css技巧美化表格的示例分享