我还在学习css,html,PHP等等,如果我在我的代码中犯了错误,请随时与我联系,但请随时向我提供更好/不同的方式来做每一件事情的帮助肯定会教我一两件事
HTML：http://pastebin.com/raw.php?i=bbFsMcwT
CSS：http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle：http://jsfiddle.net/D8SJD/
>问题1 – 左/右滚动图像按钮
>目前我的左和右滚动图像按钮是使用onmouSEOver和onmouSEOut在html中完成的我想要能够将它们转换成基于css的“按钮”
>第2期 – 动态分辨率
>标题和页脚不具有不同分辨率的动态,例如,我创建了一个设计在1680×1050显示器上的页面,看起来像：Desktop 1680×1050,但使窗口更小它看起来像：Desktop Small Window
>在Nexus 4手机上,默认缩放它看起来像：Mobile Original Zoom
>在Nexus 4手机上,尽可能地缩小,看起来像：Mobile Max Distance
>在Nexus 4上放大并滚动到底部(以便浏览器网址栏消失),它看起来像：Zoomed out without URL bar(实际网页的页脚消失)
>在Nexus 4上放大并从底部滚动(使浏览器网址栏可见),它看起来像：Zoomed out with URL bar(页脚返回)
.
>占位符图像和箭头应该位于页脚和标题的中心,并应按照屏幕分辨率缩小.
>移动设备默认缩放(如果可能)需要减少,所以如果接近Mobile Original Zoom,则可以看到更多的(如果可能的话),然后从顶部到顶部,向下键,占位符标志应该消失…
>请看本帖子底部的图片
对于移动设备,我尝试过如下所示的测试,但没有一个工作？
@media (max-width: 640px) {
#header > a img {
display: none;
}
}
编辑14/11/2013 @ 01：58GMT
在1920×1080屏幕上,看起来好像还有一点,文字和占位符之间的差距很大,如下所示：
在一个1680×1050的屏幕上,它大致看起来应该注意“Semi”所在的位置,并与上面的1920×1080图像进行比较.
在600×600屏幕上,如下所示,您可以看到占位符和左箭头之间有很大的差距,但在右箭头上没有间隙,并且其实溢出,因为文本太远了正确的.
解决方法
大多数时候,最好使用相对定位来将元素绝对地放在另一个元素的内部.在你的情况下,有三个不同的字符串,以适应一个300×80的窗口,它有点拥挤.我试图把事情放在逻辑上来展示.
通过将容器放置在相对位置的footimage div中,您可以将footimage div中的每个元素都放在footimage div中,而不是整个页面上.
例如,你有什么：
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
将脚趾的div放置在页面顶部的页面高度的50％的位置,页面左侧的页面宽度的50％的位置：
如果访问您的页面的每个用户具有完全相同的分辨率,那么这将会起作用,但是如果没有,则会导致问题.显然,这不是一个完美的世界,所以不同的决议将访问你的页面.
你可以做的是使用相对定位！
基本上我告诉CSS,而不是从窗口的顶部和左边移动50％,从最近的父元素的顶部和左边移动50％相对定位：
您可以修改my fiddle的底部,左侧和右侧属性,以移动与.footimage大小相同的相对元素.footimageContainer中的脚注元素.
就你的箭头而言,我不太确定你想要完成什么你的问题很模糊,所以当你将鼠标悬停在他们身上时,我会使它们轻微地淡出.任何mouSEOver / out事件都可以使用CSS伪装元素来处理.
.element //Native and mouSEOut {} .element:hover //onmouSEOver {}
请记住,如果使用伪元素,则必须指定将在本机和悬停规则中更改的属性.
.element
{color:red;}
.element
{color:black;}
如果您对箭头有任何其他问题,请告诉我,我会修改我的答案.
