小编Jed*_*dda的帖子

我正在开发响应式设计,我正在考虑将导航图标创建为.svg文件.什么是当前的浏览器支持,是否有旧浏览器版本的变通方法/插件？

所以我正在研究一个纯粹的CSS语音泡泡http://bit.ly/zlnngM但是我希望边界环绕整个语音泡泡,如http://bit.ly/zUgeZi所示.我正在使用以下标记;

<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div

到目前为止,我的样式如下;

.speech-bubble {
margin: 3em;
width: 320px;
padding: 10px;
background-color:rgba(250, 250, 250, 0.95);
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}

.speech-bubble:before
{
content: "";
border: solid 20px transparent; /* set all borders to 10 pixels width */
border-top: 0; /* we do not need the top …

将图像添加到 Bootstrap3 中的默认导航栏下拉列表中的最佳方法是什么？我想重新创建下图中的布局，其中图像填充到下拉菜单中项目的右侧。有什么想法吗？

编辑：我计划在移动设备上隐藏图像以获得更好的可用性，因此我只想在桌面上使用此布局。

这是我目前所处的位置的小提琴

.dropdown-menu {
padding-right: 150px; /* width of img */
position: relative;
}

.dropdown-menu:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px; /* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
}

所以我有一个div应该扩展以显示切换时的列表.在这里可以看到前后状态http://reversl.net/box/但是我需要添加到我的样式中才能实现这一点？我想使用css过渡来增加效果.我并不担心浏览器兼容性,因为它仅用于学习目的.有小费吗？

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div Before</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
</div><!--.box-->

<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
        <div class="section progress">
            <h4>
                <a href="#">Div After</a>
            </h4>
            <div class="metrics">
                <div class="meter">
                    <span style="width: 75%"></span>
                </div><!--.meter-->
            </div><!--.metrics-->
        </div><!--.section-progress-->
        <div class="sub_section">
            <ul class="list">
                <li>Item 1</li>
                <li class="last">Item 2</li>
            </ul>
        </div><!--.sub_section-->
</div><!--.box-->

.boxes {
width: 100%;
padding: 1%;
}

.box {
width: 20%;
padding: 1%;
background: #fff;
-moz-box-shadow: 2px 3px …

我正在开发一个响应式设计,其中徽标需要位于页面的顶部/中心并覆盖其下方的内容.... http://reversl.net/demo/我可以通过给出这个所需的布局标志绝对的位置

position: absolute;
top: 0;
left: 50%;
margin-left: -98px; /*--half the width of the logo--*/

为了达到最佳标准......我有什么理由不采取这种方法吗？从环顾四周,人们倾向于不喜欢使用绝对定位.为徽标设置负上边距和自动左/右边距会更好吗？主要的是,当媒体查询断点开始时,徽标仍然是顶级中心.

所以我正在开发一个下拉菜单,我希望每个菜单项都有一个自动宽度.即背景扩展到菜单项的宽度,而不是具有所有UL的整体固定宽度.我认为给ul li一个自动宽度会对它进行排序,但似乎没有.我错过了什么？

<ul id="nav">
<li><a class="last" href="#">MENU &#9660;</a>
    <ul>
        <li><a href="#">Short</a></li>
        <li><a href="#">Very Long</a></li>
    </ul>
</li>

#nav { 
height: 1; 
list-style-type: none; 
padding-top: 1.25em; 
margin-top: 0em;
}

#nav li { 
float: right; 
position: relative; padding: 0;
} 

#nav li a { 
display: block; 
font-size: 14px; 
padding: 0 1em;  
margin-bottom: 1em; 
color: #333; 
text-decoration: none; 
border-left: 1px solid #333; 
}

#nav .last, #nav li ul li a {
border-left: none;
}

#nav li a:hover, #nav li a:focus {
color: #666;
} …

试图让这里显示的布局http://www.reversl.net/zindex/看起来像附加的图像澄清.....徽标(标题的一部分)需要覆盖图像.图像需要与标题的底部完美对齐.我知道这可以使用z-index实现,但我究竟能怎么做呢？

header {
width: 100%;
height: 30px;
background: #222;
position: relative;
z-index: 3000;
}

#login {
width: 30%;
float: right;
text-align: right;
padding: .5em 0;
z-index: 5000;
}

#logo {
    width: 25%;
    float: left;
    padding: 3em 3em 1em 3em;
    text-align: center;
    z-index: 9999;
    background: #222;
}

.logo-text {
font: 2em/1em "lucida grande";
display: inline-block;
color: #777;
}  

#bg {
margin: -2em 0 0 0;
clear: both;
}