Hbuilder border-radius
时间: 2023-10-26 14:07:02 浏览: 159
Hbuilder是一个跨平台的HTML5开发工具,可以用于开发Web应用、手机应用等。border-radius是CSS3中的一个属性,用于设置元素的圆角。
在Hbuilder中,可以通过以下方式设置border-radius:
1. 在CSS样式中直接设置元素的border-radius属性,例如:
```
div {
border-radius: 10px;
}
```
2. 在Hbuilder的可视化界面中,选中元素后,在属性面板中找到border-radius属性进行设置。
相关问题
hbuilder登录页面代码
以下是一个简单的 HBuilder 登录页面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
```
该示例包含一个表单元素,其中包含用户名和密码输入字段以及提交按钮。CSS样式用于美化表单元素。
hbuilder简单登录界面代码
以下是一个简单的 HBuilder 登录界面代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login">
<div class="login-header">
<h2>用户登录</h2>
</div>
<div class="login-body">
<form>
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
</div>
</div>
</body>
</html>
```
CSS 代码:
```css
body {
background-color: #eee;
}
.login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
width: 300px;
height: 300px;
}
.login-header {
background-color: #f2f2f2;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px;
text-align: center;
}
.login-body {
padding: 20px;
}
.login-body input[type="text"],
.login-body input[type="password"] {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.login-body button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.login-body button[type="submit"]:hover {
background-color: #3e8e41;
}
```
该示例中的 CSS 样式可以在 `css/login.css` 文件中找到。在这个示例中,我们创建了一个简单的登录表单,包含一个用户名输入框、一个密码输入框和一个登录按钮。登录表单使用了 CSS 样式并使用了绝对定位使其居中显示。