Use estilos CSS y elementos de etiqueta HTML
Para agregar líneas punteadas de borde a diferentes etiquetas HTML, seleccionamos varias alineaciones de etiquetas comunes para establecer el efecto de línea punteada de borde.
1. Etiquetas HTML comunesetiqueta P
durar
ul li
tabla tr td
2. Las palabras de atributo CSS se usan en el ejemploborde
ancho
altura
3. Introducción a los puntos clave de implementación de líneas punteadasEl borde es un atributo fronterizo. Si desea lograr el efecto fronterizo de un objeto, debe establecer el ancho del borde, el color del borde y el estilo de borde (líneas continuas o punteadas)
Border: 1px Dable #F00 Esto es para establecer el ancho de estilo de borde en 1px, la línea punteada y la línea punteada en rojo.
4. Descripción del ejemploEstablecemos el mismo ancho, la misma altura y efectos de borde para las etiquetas anteriores.
5. Complete el código HTML:
- <! Doctypehtml> <html>
- <HEAD> <metacharset = utf-8/>
- <title> Demostración de la línea de puntos del borde HTML www.pcss5.com </title> <style>
- .bor {border: 1pxDashed#f00; ancho: 300px; altura: 60px; margin-top: 10px} span {display: block}/*css Comment Descripción: Deje que el tramo forme un bloque*/
- </style> </head>
- <body> <pclass = bor> pbox </p>
- <spanclass = bor> span box </span> <ulclass = bor>
- <li> Lista de Ulli </li> <li> Lista de Ulli </li>
- </ul> <tableClass = bor>
- <tr> <td> form </td>
- <TD> Tabla 2 </td> </tr>
- <tr> <td> datos </td>
- <TD> DATA 2 </td> </tr>
- </table> </body>
- </html>
El ejemplo anterior establece el mismo estilo para diferentes etiquetas en HTML, incluidas las mismas líneas punteadas de borde.
6. Captura de pantalla del efecto del navegadorCaptura de pantalla del efecto punteado de diferentes etiquetas en HTML establece bordes y líneas punteadas