小编use*_*831的帖子

如何用圆圈创建此栏?

我正在尝试使用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%.

JS FIDDLE

html css css3 css-shapes

21
推荐指数
3
解决办法
1500
查看次数

如何将内容DIV放在bootstrap轮播上并使其响应?

我想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)

html css twitter-bootstrap

11
推荐指数
1
解决办法
5万
查看次数

外部 CSS 未在 window.print() 中加载

我正在尝试打印页面的特定内容区域。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)

任何想法和建议将不胜感激。

javascript jquery

6
推荐指数
1
解决办法
5570
查看次数

动态添加活动类到引导菜单并打开其页面

这是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)

现在我需要添加此liactive动态类的菜单项时页面打开.

我只是检查这两个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)

希望有人能帮助我.谢谢.

javascript jquery twitter-bootstrap

5
推荐指数
2
解决办法
5万
查看次数

使用jQuery动态添加/删除输入字段

我正在使用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 javascript jquery

5
推荐指数
1
解决办法
9768
查看次数

使用MySQL数据填充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)

html php mysql

5
推荐指数
1
解决办法
650
查看次数

在 HTML SELECT 中列出类别和子类别

我想在选择列表(下拉列表)中显示类别和子类别,如下图所示。

在此输入图像描述

这是我在 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)

此代码在下拉列表中显示我的所有类别。但我需要为我的子类别添加一些缩进。

任何人都可以告诉如何去做。

谢谢。

html php

5
推荐指数
1
解决办法
3572
查看次数

如何将 LESS 颜色函数和 CSS 变量结合起来?

在我的项目中,我有一个 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 的解决方案。

谁能告诉我对于这种特殊情况有任何可能的解决方法吗?

谢谢。

css less css-variables

5
推荐指数
0
解决办法
3746
查看次数

在<ul>问题中禁用"<a>"链接

基本上我有一个嵌套列表的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)

谁能告诉我如何解决这个问题?

html javascript jquery

4
推荐指数
1
解决办法
562
查看次数

根据Jquery中的下拉选择框填充输入文本框

我有一个下拉选择框和输入文本框.选择框显示我的类别,它看起来像这样:

<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)

但我无法让它发挥作用.任何人都可以告诉我如何解决这个问题.

注意:我的下拉列表选择动态填充.

谢谢.

javascript jquery

3
推荐指数
1
解决办法
9722
查看次数