我试图将链接与图像居中,但似乎无法以任何方式垂直移动内容.
<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>
Run Code Online (Sandbox Code Playgroud)
图标为22 x 22px
.pdf {
font-size: 12px;
}
.pdf:before {
padding:0 5px 0 0;
content: url(../img/icon/pdf_small.png);
}
.pdf:after {
content: " ( .pdf )";
font-size: 10px;
}
.pdf:hover:after {
color: #000;
}
Run Code Online (Sandbox Code Playgroud) 我正在使用以下CSS,它似乎正在工作:
a.up:after{content: " ?";}
a.down:after{content: " ?";}
Run Code Online (Sandbox Code Playgroud)
然而,字符似乎不能像这样编码,因为输出是文字的并显示实际的字符串:
a.up:after{content: " ↓";}
a.down:after{content: " ↑";}
Run Code Online (Sandbox Code Playgroud)
如果我不能对它进行编码,感觉我应该在jQuery中使用诸如.append()之类的东西,因为它支持编码.有任何想法吗?
通常我会使用:悬停,但我希望我的网站也可以在触摸屏媒体上访问.
我知道我可以使用:active,但是一旦我松开鼠标按钮,它就会回到无效状态.
我希望有效:
鼠标向下:Div变为绿色
鼠标向上:Div保持绿色
鼠标向下:Div变红
鼠标向上:Div保持红色
代替:
鼠标向下:Div变为绿色
鼠标向上:Div变红
我有一个流畅的CSS布局,当我改变方向时,它在iphone上渲染得很糟糕.(刷新时看起来很好).
我正在使用下面的代码刷新方向更改的页面,这很好 - 这只是感觉有点不对.有没有办法实现这一点,而无需重新加载整个页面?这是一个移动网站,我真的不想强迫用户加载页面两次.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
window.location.reload()
}, false);
Run Code Online (Sandbox Code Playgroud)
编辑:
在iphone上测试时的两个主要问题是:
我有一个100%宽度,右对齐的背景图像.当我将方向从纵向更改为横向时,主体宽度保持与在纵向模式下呈现的方式相同,反之亦然.从景观到肖像更是一个问题,因为页面太宽,似乎渲染图像两次.
我必须制作一个微型网站,我想知道在HTML模板中使用徽标的最佳方法.(忽略这是无效代码的事实,如果我使用alt ="",它只是任意的waffle.)
选项1:
<a href="#">
<img src="logo.gif" />
</a>
Run Code Online (Sandbox Code Playgroud)
选项2:
<h1>
<a href="#">
<img src="logo.gif" />
</a>
</h1>
Run Code Online (Sandbox Code Playgroud)
选项3:
<h1>
<a href="#">
</a>
</h1>
h1{background: url(logo.gif);}
h1 a{height: #px; width: #px;}
Run Code Online (Sandbox Code Playgroud)
选项4:
使用h1,h2或h3对SEO更好,因为我知道重复的h1是一个坏主意,公司品牌不是它网站上每个页面的主要主题?
我通常使用的是选项3,如下所示:
<h2>
<span>Company name</span>
<a href="#">
</a>
</h2>
h2{height: #px; width: #px; background: url(logo.gif);}
h2 a{display: block; height: #px; width: #px;}
h2 a span{display: none;}
Run Code Online (Sandbox Code Playgroud) 我正在制作一个带有一长串文章的手风琴.
当我使用以下内容时,我有jQuery工作,只有它会在页面上的每篇文章上滑动/关闭:
$('article a').click(function() {
$('article').find('h3').slideToggle('fast');
});
Run Code Online (Sandbox Code Playgroud)
理论上这应该有用,但它没有做任何事情:
$('article a').click(function() {
$(this).find('h3').slideToggle('fast');
});
Run Code Online (Sandbox Code Playgroud)
你可以在这里看到一个演示:http://jsfiddle.net/CfqGG/
我哪里错了?
我正在处理由第三方创建的Flash文件.它在库中有很多文件夹和文件,我似乎无法在任何地方找到任何ActionScript.
有什么简单的方法可以在作者顽皮并且没有标记它或将它放在合理的位置时找到ActionScript的位置?
我希望在用户输入密码之前有一个密码字段,其中显示"密码"(因此他们知道该字段是什么)
我宁愿只使用Javascript,单独导入jQuery似乎很浪费,但我不知道如何.图像说得很清楚:
它看起来像什么:

我希望它看起来像:

它只是一个非常简单的网站和最基本的登录(没有验证等)
有任何想法吗?
<input id="username" name="username" class="input_text" type="text" value="Username" />
<input id="password" name="password" class="input_text" type="password" value="Password" />
Run Code Online (Sandbox Code Playgroud) 我在我的网站上使用CSS3过渡,-webkit-似乎正在工作,而-moz-则不然.
这是CSS:
article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; }
.mousedown{-webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; }
Run Code Online (Sandbox Code Playgroud)
只需使用jQuery将mousedown类添加到文章中.
知道我哪里错了吗?
我想创建一个类似于标签的文本样式.看这里:

我几乎只能用它来做:http://jsfiddle.net/STApE/
p{display: inline; background: yellow;}
Run Code Online (Sandbox Code Playgroud)
但是,我想添加一些填充.当我这样做的时候,事情会走下坡路.如果我添加边框也会发生同样的情况:http://jsfiddle.net/JN72d/
有什么想法可以通过简单的方法实现这种效果吗?
css ×6
css-content ×2
html ×2
javascript ×2
actionscript ×1
css3 ×1
flash ×1
forms ×1
iphone ×1
jquery ×1
mobile ×1
mozilla ×1
orientation ×1
seo ×1
typography ×1
unicode ×1
webkit ×1