如何将阴影应用于特定边框边缘?
例如,我有以下代码:
header nav {
border-top: 1px solid #202020;
margin-top: 25px;
width: 158px;
padding-top:25px;
}
Run Code Online (Sandbox Code Playgroud)
我想要一个仅应用于border-top的投影(1px 1px 1px #cdcdcd).
实现这一目标的最佳方法是什么?
编辑
这基本上就是我在寻找的东西
div {
border-top: 1px solid #202020;
margin-top: 25px;
margin-left:25px;
width: 158px;
padding-top:25px;
-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
}
Run Code Online (Sandbox Code Playgroud)
但是,阴影似乎受到填充的影响.无论如何都要将阴影单独附加到边框而不调整填充?
我的站点导航需要浮动到容器的右侧,但是处于固定位置,这样每当页面滚动时,导航仍然是从顶部开始的右侧350px.这一直有效,直到我申请position:fixed
,之后导航卡在右边.任何想法如何我可以充分利用这两个世界(右侧和固定位置)?
我有按类别分隔的业务列表.在每个类别名称旁边,从大约20px开始,我希望有一个3px高的边框延伸到div的末尾.我希望这个边界充满图案或图像.最初,我尝试使用图像,但由于每个类别名称的长度不同,这被证明是不切实际的.
我确信有一个相对简单的方法可以解决这个问题,我只是不确定如何实现它.想法?
谢谢.
更新的图像
基本上,无论内容的实际长度如何,我的所有网站内容都集中在指定宽度和预期高度100%的div中.我指定height:100%;
的html
,body
以及#main
但是仍然DIV短出来作为上看到这个页面 -我不希望自己成为之间的任何间隙#main
的灰色框,并在屏幕的底部.这可能吗?怎么样?
我对 HTML 表格和内嵌 CSS 没有太多经验,但我正在尝试创建 HTML 电子邮件签名。理想情况下,我希望左侧有一个小图像,中间有文字,右侧有一个较大的徽标,在所有内容下方居中放置一行文字。
我有基本内容,但是我试图将所有内容与似乎不起作用的浮点数对齐。将所有内容水平排列的最佳方法是什么?
<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<a href='http://example.com' style="border:none;text-decoration:none;"><img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;"></a>
</td>
<td width="10" style="width:10px;"> </td>
<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email@example.com">FIRST LAST</a>
</td>
</tr>
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P …
Run Code Online (Sandbox Code Playgroud) 如何在<p>
标签内设置特定单词的样式?EX:STUDIO X是有史以来最好的工作室.
^^我如何使用CSS使"STUDIO X"成为一种不同的字体而不是"有史以来最好的工作室?"
我有一个标题,左右两边都有边框.理想情况下,我希望这些是垂直对齐的.但是,vertical-align: middle;
不工作,我不太清楚为什么.想法?
CSS
#save-the-date {
margin: 0 auto;
width: 960px;
}
#save-the-date #title {
vertical-align: middle;
}
#save-the-date #title h2 {
font-size: 165%;
margin: 0 auto;
width: 150px;
}
#save-the-date #title .left-border {
float: left;
background:url('img/border.png') repeat-x -10px 0;
width:340px;
height:3px;
}
#save-the-date #title .right-border {
float: right;
background:url('img/border.png') repeat-x -10px 0;
width:340px;
height:3px;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<div id="save-the-date">
<div id="title">
<div class="left-border"></div><!-- end border -->
<h2>Save The Date</h2>
<div class="right-border"></div><!-- end border -->
</div><!-- end title -->
</div><!-- …
Run Code Online (Sandbox Code Playgroud) 这可能是非常简单明了的,但我对Filezilla并不是很熟悉并且承担不起错误.我需要将文件从服务器复制到我的桌面而不实际将其从服务器中删除 - 现场网站需要保持现状.没有"复制"选项,所以我想知道"下载"是否是我需要使用的选项..但我需要确保"下载"文件实际上不会从服务器中删除它们.
基本上,我需要保存网站的副本,而不会在网上实际干扰或破坏它.
我有一个长的单页网站,其中包含部分<div id="#">
.目前,该站点在#services
和之间的底部附近加载/打开#contact
.如果直接输入URL或单击链接,如何将页面始终加载到顶部?
我有一个容器 div,其中的内容有时需要除以class="top"
和class="bottom"
。显然没有float:top
or float:bottom
,那么单独使用 html/css 实现这一目标的最佳方法是什么?
前任:
<div class="content">
<div class="left">
<a href="#"><img src="img/home.jpg" alt="salon home"></a>
</div><!-- end left -->
<div class="center">
<a href="#" class="top"><img src="img/about.jpg" alt="about salon"></a>
<a href="#" class="bottom"><img src="img/services.jpg" alt="salon service"></a>
</div><!-- end center -->
<div class="right">
<a href="#" class="top"><img src="img/products.jpg" alt="salon products"></a>
<a href="#" class="bottom"><img src="img/contact.jpg" alt="contact salon"></a>
</div><!-- end right -->
</div><!-- end content -->
#container .content {
margin-top: 115px;
}
#container .content .left {
float: left;
width: 307px; …
Run Code Online (Sandbox Code Playgroud) 我的造型有问题<p class="wp-caption-text">
.
我试过.detail p.wp-caption-text
,.detail .wp-caption-text
,.wp-caption-text
,等等.似乎没什么用.我错过了什么?
的index.php
<?php get_header(); ?>
<!-- #content -->
<div id="content">
<!-- start of .post -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post<?php if(!has_post_thumbnail()) echo " no-featured"; ?>">
<?php if(has_post_thumbnail()): ?>
<div class="featured">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(700,9999)); ?></a>
<div class="credit"></div>
</div>
<?php endif; ?>
<div class="detail">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if (the_post_thumbnail_caption()) { echo '<p class="wp-caption-text">' . the_post_thumbnail_caption() . '<p>'; }?> …
Run Code Online (Sandbox Code Playgroud) 我想在链接周围创建一个边框,在整个链接上形成一个正方形:hover
.我该如何达到这个效果?
css ×11
html ×6
border ×3
css-float ×2
position ×2
css-position ×1
dropshadow ×1
filezilla ×1
fonts ×1
ftp ×1
height ×1
hover ×1
html-email ×1
html-table ×1
hyperlink ×1
image ×1
javascript ×1
tags ×1