小编Mr.*_*ien的帖子

我有一个HTML表,<thead>+ <tbody>+ <tfoot>.我<tfoot>只需要在<tbody>没有行时显示.我知道如何使用JS/jQuery,但也许有一个纯CSS解决方案？

我需要创建一个这样的页面.蓝色圆圈是主圆圈,绿色圆圈应放在主圆圈周围.绿色圆圈计数是随机的(大约0-10).所有绿色圆圈都用一条线连接到蓝色圆圈.

我知道在CSS中绘制圆圈.我需要知道,

1. 如何在蓝色圆圈周围放置绿色圆圈
2. 如何将绿色圆圈连接到蓝色圆圈

是否可以使用CSS.如果不是这样的话？

谢谢.

现在让我们看看,不确定我是否有100%的逻辑.

这就是我正在使用的(这里的 bootply演示)

<ul>
    <li class="row">
        <span class="category col-sm-2 highlight">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Hello world!</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">Keep them coming</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2 invisible">Architecture</span> 
        <span class="title col-sm-4"><a href="#">The other posts</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span>
        <span class="year col-sm-2 hidden-xs">2007</span>  
    </li>
    <li class="row">
        <span class="category col-sm-2">Cities</span> 
        <span class="title col-sm-4"><a href="#">Tezt</a></span>
        <span class="publication col-sm-2 hidden-xs">Magazine</span> …

<span class="field-validation-valid" data-valmsg-for="Classifications" data-valmsg-replace="true">
</span>

如何在此范围内添加文字？

我到现在为止尝试的是以下内容:

var msg = $('#[data-valmsg-for="Classifications"]').val();
alert(msg);

有人会对此提出一个想法.

使用Bootstap 2

我正在寻找一种方法来覆盖required设置了属性的文本输入上的红色框阴影。非必需输入的蓝色光晕很好，但红色似乎太极端了。

我找到了蓝色焦点阴影（下图），但根本找不到伪标签:required。

textarea:focus,
input[type="text"]:focus,  /*  HERE  */
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
          box-shadow: inset 0 1px 1px …

最近我在CSS初学者的书中看到了这一点(由Simon Collison开始的CSS Web开发,第19页)

h1#title{color:red;}

这是一种element#id结构.

但这有必要吗？由于ID在一个html网页中是唯一的,因此element不是必需的.

我的理解是对的吗？

我有一个ul项目,其中还有2个ul项目.我需要格式化第二行ul.

演示小提琴

HTML

<ul class="horizontal">
    <li>First List
    <ul class="ul1">
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <li>Second List
    <ul>
        <li>first</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
</ul>

CSS

.horizontal >li {
  float: left;
  list-style: none;
  margin: 10px;
}

ul:nth-child(2) {
    color:RED
}

<div class ="cards">
  <span id="cardtitle">
    Chance 
  </span>
  <span id="cardinfo">
    Your ass is going to jail.
  </span>
</div>

.cards{
  background: #F8F8F8 ;
  height: 100px;
  margin: 0 auto;
  width: 200px;
}
#cardtitle, #cardinfo{
  background: #ffcc00;
  display: block;
  margin-top: 10px;
  width: 100px;
}

好吧,保证金最高可行,#cardinfo但#cardtitle没有.问题似乎是第一个因素,因为如果我尊重2个跨度,问题就会逆转.

我有一个图像里面的图层:

<div id="foo"><img src="url" /></div>

它是固定的:

#foo {
    position: fixed;
}

但我也希望图层在页面中水平居中.所以我试过:http: //jsfiddle.net/2BG9X/

#foo {
    position: fixed;
    margin: auto
}

和 http://jsfiddle.net/2BG9X/1/

#foo {
    position: fixed;
    left: auto;
}

但不起作用.任何想法如何实现它？

我正在制作一些表格内容并遇到了一些问题。
当我想向第一个表格列添加更多文本时，它会为所有其他列添加额外的空间。
在这里你可以看到我在说什么

你可以在这里查看我的小提琴

HTML

<table id="mytable" border="1">
    <tr>
        <td>
            <img src="" />
                <span>some text<br>asdasd<br>asdas</span>
        </td>
        <td>
            <img src="" />
                <span>some text</span>
        </td>

    </tr>
</table>

CSS

    #mytable{
    width:400px;
}
#mytable tr td{
    padding:10px;
}
#mytable tr td img{
    width:200px;
    height:100px;
}