小编use*_*879的帖子
如何在多行文本中的每一行应用填充？
我有背景颜色应用于<span>标签,也有左右padding设置.问题是:当文本被包裹在几行上时,仅应用于每行padding的左(开始)和右(结束),而<span>不是左(开始)和右(结束).
如何将左右两侧padding应用于中间线？
h1 {
font-weight: 800;
font-size: 5em;
line-height: 1.35em;
margin-bottom: 40px;
color: #fff;
}
h1 span {
background-color: rgba(0, 0, 0, 0.5);
padding: 0 20px;
}<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>推荐指数
解决办法
查看次数
删除col-md-6 Bootstrap上的左/右填充
我有一个使用Bootstrap的站点,但我想覆盖col-md-6列上的左右填充(将它们设置为0px).不确定怎么做,我目前的设置是......
CSS
.fix-gutters > [class^="col-"],
.fix-gutters > [class*=" col-"] {
padding-right: 0px;
padding-left: 0px;
}
并将其应用于
<div id="main" class="row fix-gutters">
.... <div class="col-md-6"> ... etc.
但col-md-6有时会被col-md-12 div替换(Wordpress循环),如果是这样的话我不想要.fix-gutters.
注意:我需要覆盖与col-md-6命令处于同一级别.例
<div class="col-md-6 overide-class">
推荐指数
解决办法
查看次数
从帖子文本中删除块引用 - Wordpress
我有一个Wordpress网站,我想删除帖子中的块引号,只放置常规文本.(也想删除文本中的任何图像,我只想要常规文本)
这段代码执行我想要的OPPOSITE - 取出块引用和帖子.我希望它发布其他文本而不是块引用.
<?php
// get the content
$block = get_the_content();
// check and retrieve blockquote
if(preg_match('~<blockquote>([\s\S]+?)</blockquote>~', $block, $matches))
// output blockquote
echo $matches[1];
?>
推荐指数
解决办法
查看次数
不同的Wordpress特色图像叠加效果
我有一个图像网格(由每个帖子的特色图像创建),并希望将悬停效果应用于每个图像.
我想用彩色叠加显示帖子的标题.整个图像被覆盖/替换为彩色背景,其中标题包含在图像框内.
但重要的是,我希望每个帖子都有不同颜色的背景.
当前代码(content page.php) -
<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-4 col-sm-4 pbox '); ?>>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 750, 560, true ); //resize & crop the image
?>
<?php if($image) : ?>
<a href="<?php the_permalink(); ?>"> <img class="img-responsive" src="<?php echo $image ?>"/></a>
<?php endif; ?>
<div class = "box-ovrly">
<h2 class="box-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php …推荐指数
解决办法
查看次数
在档案中突出显示类别 - Wordpress
我的Wordpress索引/主页上有我的所有帖子.我有以下代码,列出了我的页面上的类别,包括"全部",因为此页面上列出了所有帖子.
HTML
<?php
$args = array(
'show_option_all' => 'All posts'
);
?>
<h3><?php wp_list_categories($args); ?></h3>
CSS - 从您所在的页面开始,突出显示列表中的"全部".
li.cat-item-all a{
font-weight: bold;
}
每个类别链接都会打开存档页面,其中的帖子标记有该类别.
我希望此列表充当导航,当您选择它时,选择"突出显示"类别.与主页在主页上突出显示的方式类似.但所有链接都链接到存档页面,所以我不确定编码
编辑 - 在主页上输出
我希望它出现在我的档案页面上,但是他们选择的类别突出显示而不是"全部"
推荐指数
解决办法
查看次数
当导航栏固定到屏幕顶部时阻止内容“跳跃”
我有一个使用 Bootstrap 3 导航栏的网站。它位于块 div 下方 280 像素处，并在滚动到该点时粘在页面顶部
HTML（在<head>标签中）
<script>
$(document).ready(function() {
var s = $("#nav");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
超文本标记语言
<div id="nav">
<div class="navbar navbar-default navbar-static">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
...
CSS
header {
height:280px;
}
.stick {
position:fixed;
top:0px;
width: 100%;
}
当页面按预期方式滚动时，它会粘在页面上。但是，当“nav”div 获得应用的位置：固定属性时，它不再位于内容流中，并且内容“跳跃”到与导航高度相同的高度。
如何才能让内容不跳转呢？
推荐指数
解决办法
查看次数
填充不在边界div上工作
我试图在带有背景图像的div周围放置一个圆形边框.我希望背景图像与它和边框之间的10px填充一样大.当用户滚动并移除边框时,此图像会转换(缩小)到50像素,因此需要保留尽可能多占用空间的背景图像
CSS
.brand, .brand:visited, .brand:hover {
display: block;
position: relative;
height: 100px; width: 100px;
margin-top: 25px;
background: url('img/logo.png') no-repeat center center;
background-size: 100% auto;
padding: 10px;
border: 1px solid #fff;
border-radius: 50%;
}
一切都有效,除了填充.不知道如何解决它.另外,我不想剪裁背景图像
推荐指数
解决办法
查看次数
更改Bootstrap 3的容器边距
我有一个使用bootstrap框架的站点,我想更改Bootstrap的'.container'类默认的外边距.
我希望外边缘的边距更窄,我希望它不会根据屏幕/分辨率跳转到不同的大小(对于那些使用Bootstrap的人,当屏幕达到一定大小时.container类会自动跳转到另一组利润率.)
我只想在整个过程中保持一致的余量.
推荐指数
解决办法
查看次数
创建一个角按钮 div
我想在我的网站的右上角（固定位置）制作一个三角形按钮。它只是背景颜色之上的一个具有悬停效果的图标。我想知道是否有办法获得有角度的 div 或者它是否需要成为背景图像？
CSS
#top-btn {
position: fixed;
top: 0;
right: 0;
background-color: red;
}
超文本标记语言
...
<div id="top-btn">icon</div>
编辑-视觉表示。位于窗口右上角
推荐指数
解决办法
查看次数
针对过渡延迟指定特定属性
我正在使用以下CSS来为的功能设置动画div。通过Java .shrink添加到.header
.brand, .brand:visited, .brand:hover {
display: block;
position: relative;
height: 100px; width: 100px;
margin-top: 25px;
background: url('img/logo.png') no-repeat center center;
background-size: contain;
border: 1px solid #fff;
border-radius: 50%;
-webkit-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-moz-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-ms-transition: height 0.35s ease, width 0.35s ease, margin 0.35s ease, border-color 0.35s ease;
-o-transition: height 0.35s ease, width 0.35s ease, margin …推荐指数
解决办法
查看次数
用 flex 堆叠 div
我有以下代码垂直居中我的内容
html
<div class="titleHide flex">
<h4>...</h4>
<h1>...</h1>
</div>
css
.titleHide {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background-color: rgba(209,30,93,0.8);
}
.flex {
display: flex;
flex: 1;
align-items: center;
}
.flex 被我网站上的其他 div 使用。但是，在这种情况下，它将 h1 和 h4 标题并排对齐，我希望它们堆叠在一起。
推荐指数
解决办法
查看次数