我正在尝试使用CSS和HTML创建一个样式.
我的风格是这样的:

我试过了,这是我的HTML:
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p><a href="">Financial Ratio Analysis</a></p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的CSS:
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 100%;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
}
Run Code Online (Sandbox Code Playgroud)
它非常接近我的预期结果.但不是100%.
我想DIV在大型和桌面屏幕上放置一个关于bootstrap轮播的内容.请参阅下图以了解您的情况.

在移动和标签屏幕中应该是这样的 -

我不知道如何使用bootstrap 3创建这个布局.希望有人可以帮助我.
这是我目前的Mark Up:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">
<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: cover;">
<div class="container">
<div class="carousel-caption">
<h3>Providing you the Best</h3>
<h1>Cleaning Companies</h1>
<p>in Bahrain with 10% Discount.</p>
</div>
</div>
</div>
<div class="item" style="background: url(img/slider/uniform.jpg) no-repeat center center; background-size: …Run Code Online (Sandbox Code Playgroud)我正在尝试打印页面的特定内容区域。CSS我的问题是我已经为此打印区域的内容创建了单独的文件。但该外部CSS在浏览器打印弹出窗口中无法工作(加载)。我确信文件路径是正确的。
这就是我尝试的方法:
function printReceipt(el) {
var docHead = "<html>\
<head>\
<title></title>\
<link rel='stylesheet' href='css/receipt-print.css' type='text/css' media='print' />\
</head>\
<body>";
var docFoot = " </body>\
</html>";
var docBody = document.getElementById(el).innerHTML;
var defaultBody = document.body.innerHTML;
document.body.innerHTML = docHead+docBody+docFoot;
//document.close();
//window.focus();
//setTimeout(function() {
window.print();
document.body.innerHTML = defaultBody;
//}, 1000);
//return true;
}
Run Code Online (Sandbox Code Playgroud)
更新:
也按此方法检查。问题还是一样。
function printReceipt(el) {
var w = window.open();
w.document.write('<html><head><title></title>');
w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
w.document.write('</head><body >');
w.document.write(document.getElementById(el).innerHTML);
w.document.write('</body></html>');
w.document.close();
w.focus();
w.print();
w.close();
return true;
}
Run Code Online (Sandbox Code Playgroud)
任何想法和建议将不胜感激。
这是HTML我为导航栏创建的代码bootstrap.
<div id="menu">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">Comment</a></li>
<li><a href="#">About</a></li>
<li ><a href="contact_us.html">Contact</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
现在我需要添加此li的active动态类的菜单项时页面打开.
我只是检查这两个stackoverflow问题:一个 | 二
但我无法弄清楚这一点.
这是我的javascript -
$('#menu > ul.navbar-nav li').click(function(e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
希望有人能帮助我.谢谢.
我正在使用Jquery-添加和删除重复的输入字段
这是我的HTML:
<div class="col-sm-9">
<div class="input_wrap">
<div><input type="text" name="text[]" class="form-control"></div>
// **** Here I want to add div using Jquery **** //
<button class="add_field_button btn btn-info">Add More Subcategory</button>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是我的Jquery:
var wrapper = $(".input_wrap");
var add_button = $(".add_field_button");
$(add_button).click(function(e){
e.preventDefault();
$(wrapper).prepend('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});
Run Code Online (Sandbox Code Playgroud)
当我使用此Jquery时,它总是添加div在.input_wrapDIV 之下。但是我想添加DIV到我在HTML代码中显示的位置。
更新:这就是我想要的方式
希望有人可以帮助我。谢谢。
我试图用来HTML自我的数据库的数据填充表.在这里,我已经在我的表中存储了"服务".每项服务可能有多个图像.因此,当填充表格时,它应该有3个表格cells用于"服务名称",第二个用于"描述",第三个用于图像.
这是我的SQL查询看起来像:
$prep_stmt = " SELECT s.id
, s.name
, s.description
, i.image
, i.image_path
FROM services s
LEFT JOIN images i ON i.service_id = s.id";
Run Code Online (Sandbox Code Playgroud)
这就是我的while样子:
while ($stmt->fetch()) {
$html = "<tr>\n";
$html .= " <td><input type='checkbox'></td>\n";
$html .= " <td>\n";
$html .= " <a href='' class='name'>{$name}</a>\n";
$html .= " </td>\n";
$html .= " <td class='view_html'>{$description}</td>\n";
$html .= " <td>\n";
--- My images should be display here ----
$html .= " </td>\n";
$html …Run Code Online (Sandbox Code Playgroud) 我想在选择列表(下拉列表)中显示类别和子类别,如下图所示。
这是我在 PHP 中尝试的方法:
// Fetch all the records:
while ($stmt->fetch()) {
$cats[$parent][$id] = $name;
}
function displayList(&$cats, $parent, $level=0) {
if ($parent==0) {
foreach ($cats[$parent] as $id=>$nm) {
displayList($cats, $id);
}
}
else {
foreach ($cats[$parent] as $id=>$nm) {
echo "<option>$nm</option>\n";
if (isset($cats[$id])) {
displayList($cats, $id, $level+1); //increment level
}
}
}
}
echo '<select>';
displayList($cats, 0);
echo '</select>';
Run Code Online (Sandbox Code Playgroud)
此代码在下拉列表中显示我的所有类别。但我需要为我的子类别添加一些缩进。
任何人都可以告诉如何去做。
谢谢。
在我的项目中,我有一个 CSS 自定义变量,如下所示:
:root {
--primary-color: #e04c4c;
--secondary-color: #2c2c5e;
--text-color: #d67900;
}
Run Code Online (Sandbox Code Playgroud)
在我的 LESS 文件中,我使用了 LESS 颜色函数来根据其主要和次要颜色来获取更多颜色。这是它的样子:
.component1 {
background: darken(--primary-color, 10%);
}
.component2 {
background: lighten(--secondary-color, 5%);
}
Run Code Online (Sandbox Code Playgroud)
但是当我编译这个时,它给出了这样的错误?
// Undefined_methodError: 评估函数时出错
darken: // Object # 没有方法 'toHSL'
在谷歌搜索时,我找到了SASS 的解决方案,但没有找到 LESS 的解决方案。
谁能告诉我对于这种特殊情况有任何可能的解决方法吗?
谢谢。
基本上我有一个嵌套列表的HTML代码块,如下所示:
<ul>
<li class="level_1">
<a href="level1.html">Insulated And Extruded</a>
<ul class="level_2">
<li><a href="">TE77</a></li>
<li><a href="">TE78</a></li>
<li><a href="">T77</a></li>
<li><a href="">TS77</a></li>
</ul>
</li>
<li class="level_1"><a href="">Grille Type Rolling</a></li>
<li class="level_1"><a href="">PVC High Speed Doors</a></li>
<li class="level_1"><a href="">Swinging doors</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
使用这个我需要做的是,我想检查li.level_1有一个<ul>,如果是这样,那么我需要禁用<a>直接在里面的链接链接li.level_1.
这就是我在jquery中尝试它的方法,但它a从列表中删除了所有内容.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Run Code Online (Sandbox Code Playgroud)
谁能告诉我如何解决这个问题?
我有一个下拉选择框和输入文本框.选择框显示我的类别,它看起来像这样:
<select id="category" name="category">
<option value="">Please select...</option>
<option value="1">Category-1</option>
<option value="2">Category-2</option>
<option value="3">Category-3</option>
<option value="4">Other</option>
</select>
Run Code Online (Sandbox Code Playgroud)
输入文本框是这样的:
<input type="text" id="otherCategory" name="otherCategory" value="" style="display: none;">
Run Code Online (Sandbox Code Playgroud)
我的问题是.当用户从下拉列表中仅选择"其他"时,我需要填充输入文本.
我试过这样的事情:
$(document).ready(function() {
$('#category').change(function() {
var myValue = $(this).val();
var myText = $("#category :selected").text();
if (myText != '' AND myText == "Other") {
$("#otherCategory").show();
}
});
});
Run Code Online (Sandbox Code Playgroud)
但我无法让它发挥作用.任何人都可以告诉我如何解决这个问题.
注意:我的下拉列表选择动态填充.
谢谢.