如何循环或迭代相同组件的 html 代码
how to loop or iterate html code for the same components
下面的 html 代码用于显示一个包含 4 个文本区域、3 个图像和 3 个标签的容器:
HTML
<div class="row">
<div class="col-md-2">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div class="alert alert-info alert-dismissable">
<textarea class="form-control3" rows="3" placeholder="Clue 1"></textarea>
<textarea class="form-control4" rows="3" placeholder="Answer"></textarea>
<input type="text" class="form-control1" placeholder="10">
<input type="text" class="form-control2" placeholder="Rejected">
<div>
<img src="images/up.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">100</span>
<img src="images/down.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">50</span>
<img src="images/eye.png" width="20px" ;height="20px">
<div class="blank"></div> <span class="badge badge-danger">120</span>
</div>
</div>
</div>
CSS
.form-inline .form-control3 {
display: inline-block;
width: auto;
vertical-align: middle;
}
.has-warning .form-control4:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-error .form-control1:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .form-control2 {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
我希望在单个 html 页面中显示多个容器。我的问题是,是否有一种方法可以只编写一次 html 和 css 代码并将其用于其他容器,而无需一次又一次地重复代码(如某些迭代或循环方法或任何其他方法) ?
此外,我想在 css 中对我的图像进行风格化和定位,而不是在我的 html 代码本身中使用样式元素高度和宽度。我尝试为图像使用单独的 div 标签并对齐 it.But 它不起作用。你能帮我解决这两个问题吗?
提前致谢
使用Jquery复制div。如果你是一个只有 HTML 和 css 的人,对不起,我认为没有任何办法。如果 HTML 来自任何网络服务器 PHP 或 .NEt 服务器端,我们可以制作多个副本。
下面的 html 代码用于显示一个包含 4 个文本区域、3 个图像和 3 个标签的容器:
HTML
<div class="row">
<div class="col-md-2">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<div class="alert alert-info alert-dismissable">
<textarea class="form-control3" rows="3" placeholder="Clue 1"></textarea>
<textarea class="form-control4" rows="3" placeholder="Answer"></textarea>
<input type="text" class="form-control1" placeholder="10">
<input type="text" class="form-control2" placeholder="Rejected">
<div>
<img src="images/up.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">100</span>
<img src="images/down.png" width="13px" ;height="13px">
<div class="blank"></div>
<span class="badge badge-danger">50</span>
<img src="images/eye.png" width="20px" ;height="20px">
<div class="blank"></div> <span class="badge badge-danger">120</span>
</div>
</div>
</div>
CSS
.form-inline .form-control3 {
display: inline-block;
width: auto;
vertical-align: middle;
}
.has-warning .form-control4:focus {
border-color: #66512c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #c0a16b;
}
.has-error .form-control1:focus {
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.has-error .form-control2 {
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
我希望在单个 html 页面中显示多个容器。我的问题是,是否有一种方法可以只编写一次 html 和 css 代码并将其用于其他容器,而无需一次又一次地重复代码(如某些迭代或循环方法或任何其他方法) ?
此外,我想在 css 中对我的图像进行风格化和定位,而不是在我的 html 代码本身中使用样式元素高度和宽度。我尝试为图像使用单独的 div 标签并对齐 it.But 它不起作用。你能帮我解决这两个问题吗?
提前致谢
使用Jquery复制div。如果你是一个只有 HTML 和 css 的人,对不起,我认为没有任何办法。如果 HTML 来自任何网络服务器 PHP 或 .NEt 服务器端,我们可以制作多个副本。