html方框代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML方框</title> <style> .box { width: 200px; height: 200px; border: 2px solid black; padding: 20px; text-align: center; } </style> </head> <body> <div class="box"> 这是一个方框。 </div> </body> </html>

这段代码创建了一个带有黑色边框、宽度和高度均为200px的方框,并在其中放置了一些文本内容。你可以根据需要修改样式和内容。

如果你想要进一步定制方框,可以尝试添加一些额外的CSS样式,比如阴影、圆角、背景颜色等。

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML方框</title> <style> .box { width: 200px; height: 200px; border: 2px solid black; padding: 20px; text-align: center; border-radius: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); background-color: lightblue; } </style> </head> <body> <div class="box"> 这是一个带有阴影、圆角和背景颜色的方框。 </div> </body> </html>

在这个示例中,我添加了 border-radius 属性来设置方框的圆角,box-shadow 属性来添加阴影效果,并使用 background-color 属性设置了背景颜色。你可以根据需要调整这些值来满足你的设计要求。