How to set the width and height of a hyperlink_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:57:23
Original
1669 people have browsed it

1. Use the display: block attribute

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

Effect:

2. float: left attribute

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

Effect:

3. Set padding for a

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

Effect:


Source: http://www.ido321.com/741.html

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template