我正在尝试在示例应用程序中实现CSS样式。
我在应用程序中使用blazor，但发现UI设计存在一些问题。
我使用引导程序创建了一个简单的Employee表单。现在，我想创建一些样式，然后重新使用它。这是需要实现的实际CSS。
.register {
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
margin-top: 3%;
padding: 3%;
}
.register-left {
text-align: center;
color: #fff;
margin-top: 4%;
}
.register-left input {
border: none;
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: #f8f9fa;
font-weight: bold;
color: #383d41;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
.register-right {
background: #f8f9fa;
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.register-left img {
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
-webkit-animation: mover 2s infinite alternate;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}
@keyframes mover {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20px);
}
}
.register-left p {
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
.register .register-form {
padding: 10%;
margin-top: 10%;
}
.btnRegister {
float: right;
margin-top: 10%;
border: none;
border-radius: 1.5rem;
padding: 2%;
background: #0062cc;
color: #fff;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register .nav-tabs {
margin-top: 3%;
border: none;
background: #0062cc;
border-radius: 1.5rem;
width: 28%;
float: right;
}
.register .nav-tabs .nav-link {
padding: 2%;
height: 34px;
font-weight: 600;
color: #fff;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover {
border: none;
}
.register .nav-tabs .nav-link.active {
width: 100px;
color: #0062cc;
border: 2px solid #0062cc;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.register-heading {
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: #495057;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div class="container">
<br> <p class="text-center">More bootstrap 4 components on <a href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com</a></p>
<hr>
<div class="card bg-light">
<article class="card-body mx-auto" style="max-width: 400px;">
<h4 class="card-title mt-3 text-center">Create Account</h4>
<p class="text-center">Get started with your free account</p>
<p>
<a href="" class="btn btn-block btn-twitter"> <i class="fab fa-twitter"></i> Login via Twitter</a>
<a href="" class="btn btn-block btn-facebook"> <i class="fab fa-facebook-f"></i> Login via facebook</a>
</p>
<p class="divider-text">
<span class="bg-light">OR</span>
</p>
<form>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input name="" class="form-control" placeholder="Full name" type="text">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input name="" class="form-control" placeholder="Email address" type="email">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-phone"></i> </span>
</div>
<select class="custom-select" style="max-width: 120px;">
<option selected="">+971</option>
<option value="1">+972</option>
<option value="2">+198</option>
<option value="3">+701</option>
</select>
<input name="" class="form-control" placeholder="Phone number" type="text">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-building"></i> </span>
</div>
<select class="form-control">
<option selected=""> Select job type</option>
<option>Designer</option>
<option>Manager</option>
<option>Accaunting</option>
</select>
</div> <!-- form-group end.// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" placeholder="Create password" type="password">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" placeholder="Repeat password" type="password">
</div> <!-- form-group// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Create Account </button>
</div> <!-- form-group// -->
<p class="text-center">Have an account? <a href="">Log In</a> </p>
</form>
</article>
</div> <!-- card.// -->
</div>
<!--container end.//-->
<br><br>
<article class="bg-secondary mb-3">
<div class="card-body text-center">
<h3 class="text-white mt-3">Bootstrap 4 UI KIT</h3>
<p class="h5 text-white">Components and templates <br> for Ecommerce, marketplace, booking websites
and product landing pages</p> <br>
<p><a class="btn btn-warning" target="_blank" href="http://bootstrap-ecommerce.com/"> Bootstrap-ecommerce.com
<i class="fa fa-window-restore "></i></a></p>
</div>
<br><br>
</article>
The
<Styled @bind-Classname="@register">
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
margin-top: 3%;
padding: 3%;
</Styled>
<div class="container @register">
<div class="row">
<div class="col-md-4 @register-left">
</div>
</div>
</div>
@code {
private string register;
}
line报告了一个问题，由于我是blazor的新手，所以我对此一无所知。我应该在我的代码中做什么？
使用ASP构建的应用程序。 Net core 3.0”，“ Blazor Preview 9”。
输出：我试图遵循指南并查找示例实现，但无法解决问题。
我遇到以下异常：
严重性代码描述项目文件行抑制状态 错误
无法从绑定属性'bind-value'推断属性名称。绑定属性的格式应为“ bind”或“ bind-value”，以及其相应的可选参数，例如“ bind-value：event”，“ bind：format”等。EMS.Client C：\ S \ S \ Client \ Pages \ AddEm.razor 6