小编Mr.*_*ien的帖子

选择下一个元素 CSS

我在 html 中有 2 个 div 元素:

<body>
  <div id="one"></div>
  <div></div>
</body>
Run Code Online (Sandbox Code Playgroud)

我想用id="one"CSS 隐藏 div 后的 div 元素,我尝试了以下方法:

#one:after{display:none}

这没有其他办法吗?

html css css-selectors

2
推荐指数
1
解决办法
7802
查看次数

使用变换旋转移出元素的文本

我把文字扭曲成270度角.我的问题是将它与另一个div对齐.

这是我扭曲文本之前的图像:

在此输入图像描述

这是我的代码:

#infoside {
    background-color: #00ff00;
    float: right;
    height: 100%;
    width: 41%;
}

#tabbings {
    float: left;
    width: 15%;
    height: 100%;
    background-color: #ffff00;
}
#tab_panels {
    float: right;
    width: 85%;
    height: 100%;
    background-color: #00ffff;
}

#client_info {
    height: 100px;
    width: 100%;
}


 <div id="infoside">
    <div id="tabbings">
        <div id="client_info" class="active_tabbing">
            <div id="text_here" style="width: 100px; height: 25%; text-align: center">
                 CLIENT INFO
            </div> 
        </div>
        <div class="clear"></div>
    </div>
    <div id="tab_panels"></div>
    <div class="clear"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

当我将这个类添加到id为text_here的div时,它会扭曲文本,下面的图像就是结果

.twist_text {
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg) ; …
Run Code Online (Sandbox Code Playgroud)

html css vertical-alignment

2
推荐指数
1
解决办法
1281
查看次数

从下到上动画图像

我有一个小树的图像,我想使用 jQuery 和 CSS让它从生长。

目前,树的bottom位置为 0 并随着animate()jQuery 函数上升。

我可以制作div与树重叠的a并使用animate()jquery 函数为其设置动画并将其删除height,但原始背景(body)使用 CSS 渐变,因此我无法使div图像重叠。这是我的代码:

CSS:

.wrap_tree{
    height:300px;
    position:relative;
}
.tree{
    overflow: hidden;
    position:absolute;
    display:none;
    bottom:0px;
    width:200px;
    left:28%;
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div class="wrap_tree">
    <div class="tree">
        <img src="tree.png"/>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JavaScript/jQuery:

$('.tree').animate({
    height: 'toggle'
},5000);
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

2
推荐指数
1
解决办法
6870
查看次数

使用CSS定型表

我使用CSS设置表格有问题.

所以我的HTML文件中有一个表:

<table class="altrowstable" id="alternatecolor">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

这是我的JavaScript文件:

function altRows(id){
if(document.getElementsByTagName){  

    var table = document.getElementById(id);  
    var rows = table.getElementsByTagName("tr"); 

    for(i = 0; i < rows.length; i++){          
        if(i % 2 == 0){
            rows[i].className = "evenrowcolor";
        }else{
            rows[i].className = "oddrowcolor";
        }      
    }
  }
 } …
Run Code Online (Sandbox Code Playgroud)

html javascript css html-table css-selectors

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

CSS属性文本阴影模糊的最大值

我只是想知道'text-shadow'中CSS属性模糊的最大值是什么?

随着价值不断增加,很难看到任何变化,因为事情开始变得模糊.

text-shadow:0 0 0px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 10px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 50px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 100px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 200px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 300px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

text-shadow:0 0 400px #000;
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

300px和400px看起来非常相似.随着我们不断增加,我没有看到任何差异.可能会有一些像素逐渐消失/移开,很难注意到.我相信每个浏览器都会有所不同.

一种非生产性的问题,但我相信我们至少可以增加我们对此的了解.

css css3

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

跨度元素的GreenSock动画

Iam执行简单的Greensock动画,Iam无法对span元素执行任何动画.即使任何动画我执行它只是闪烁可以任何一个帮助.我的span元素定义是否有任何问题.

这是代码.

<div id="prac">
    <div><span>1</span><span>2</span><span>3</span><span>4</span></div>
  </div>
Run Code Online (Sandbox Code Playgroud)

CSS风格

#prac span{padding:20px;border:1px dashed blue;background:violet;margin:5px;}
Run Code Online (Sandbox Code Playgroud)

JS TweenMax.staggerFrom($("#prac").find("span"), 0.4, {scale:0, rotation:-360, autoAlpha:0},0.1)

html css greensock

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

CSS的布局问题

我在CSS中进行布局时遇到了一些问题.这是我正在谈论的代码:小提琴.

  1. <div id="header">应有的高度,<div id="menubuttons">这是我标记为红色.我一直认为,如果你没有陈述div的高度,它将获得它的孩子的高度.
  2. <div class="contentLine>粘在<div id="theme">我虽然定义margin-top: 20px;.
  3. 右列的余量始终大于左列.我希望两者都与浏览器窗口具有相同的余量.

CSS

body {
    margin: 0 auto;
    padding: 0;
    font-family:'Share', cursive;
}
#header {
    width: 100%;
    vertical-align: middle;
}
#header_logo {
    width:;
    float: left;
    margin: 11px 20px 20px 20px;
    background-color:;
}
#menubuttons {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
    line-height: 2.5em;
    display: inline-block;
    background-color: red;
}
#menubuttons ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#menubuttons li {
    float: left;
    margin-right: …
Run Code Online (Sandbox Code Playgroud)

html css layout margin css-float

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

在其中使用div而不使用margin auto

尝试文本对齐中心和边距自动,两者都不起作用,我不想习惯使用'边缘黑客'进行居中.

http://jsfiddle.net/st9AM/1/

.circle{

float: left;
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
border: 2px solid #DDD;
}

.inner{
float: left;
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #DDD;
}
Run Code Online (Sandbox Code Playgroud)

html css css-position css3 css-float

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

将固定宽度设置为Nivo Slider

我已经使用免费下载中包含的演示代码安装了Nivo Slider.

我在滑块中包含的所有图像都是800像素宽.

但是,它们的大小调整为1440像素.正在插入额外的代码:

<img src="images/bar.jpg" data-thumb="images/bar.jpg" alt="" title="" style="display: none; width: 1440px;">
Run Code Online (Sandbox Code Playgroud)

我搜索过CSS和JS,但没有提到1440.

这个宽度在哪里设定?

css nivo-slider

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

是否有更简洁的方法让html列all align = right?

有没有更简洁的方法让html表格列对齐除了align="right"每一行?

是否有任何html或CSS我可以在一个地方指定它,以避免每一行上的HTML?

<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
 </tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

html css html-table css-selectors

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