zoukankan      html  css  js  c++  java
  • 如何给超链接设置宽度和高度

    1、利用display:block属性

       1: <!DOCTYPE html>
       2: <html>
       3: <head>
       4: <meta charset="utf-8" />
       5: <title>a设置宽度和高度</title>
       6: <style>
       7: .abc a{
       8:     display:block;
       9:     width:130px;
      10:     height:30px;
      11:     border:1px solid #000
      12: }
      13: </style>
      14: </head>
      15: <body>
      16:     <div class="abc">
      17:         <a href="#">宽度130,高30</a>
      18:     </div>
      19: </body>
      20: </html>

    效果:

    2、float:left属性

       1: <!DOCTYPE html>
       2: <html>
       3: <head>
       4: <meta charset="utf-8" />
       5: <title>a设置宽度和高度</title>
       6: <style>
       7: .abc a{
       8:     float:left;
       9:     width:150px;
      10:     height:50px;
      11:     border:1px solid #000
      12: }
      13: </style>
      14: </head>
      15: <body>
      16:     <div class="abc">
      17:         <a href="#">宽度150,高50</a>
      18:     </div>
      19: </body>
      20: </html>

    效果:

    3、对a设置padding

       1: <!DOCTYPE html>
       2: <html>
       3: <head>
       4: <meta charset="utf-8" />
       5: <title>a设置宽度和高度</title>
       6: <style>
       7: .abc a{
       8:     padding:10px 20px;
       9:     width:150px;
      10:     height:50px;
      11:     border:1px solid #000
      12: }
      13: </style>
      14: </head>
      15: <body>
      16:     <div class="abc">
      17:         <a href="#">宽度150,高50</a>
      18:     </div>
      19: </body>
      20: </html>

    效果:


    来源:http://www.ido321.com/741.html

  • 相关阅读:
    LeetCode 79
    LeetCode 437
    LeetCode 783
    LeetCode 59
    LeetCode 每日一题 04/24
    LeetCode 5
    LeetCode 43
    简易多线程任务 往数据库插数据
    定时任务--查数据库--注解实现
    redis 简易 实现
  • 原文地址:https://www.cnblogs.com/ido321/p/3988132.html
Copyright © 2011-2022 走看看