这个主题有点乱,我正在修复它。我想在左柱柱和右侧柱柱之间放一条2px浅灰色垂直线。这样做有困难吗?拜托,谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<title>{Title}{block:SearchPage} » Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary} » {PostSummary}{/block:PostSummary}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="author" content="{PostAuthorName}">
<meta name="if:Ask Enabled" content="1">
<meta name="if:Show Twitter" content="1" />
<meta name="text:Twitter Username" content="">
<meta name="if:Show Instagram" content="1">
<meta name="text:Instagram ID" content="">
<meta name="if:Show Sidebar1" content="1">
<meta name="text:Header1" content="">
<meta name="text:Content1" content="">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine:700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
font-family:sans-serif;
text-align:center;
}
#wrap{
color:#555;
margin: 0 auto 0;
background:none;
text-align:center;width:950px;
}
.clear{
clear:both;
}
a{
color:007E8B;
text-decoration:none;
}
a:hover{
color:#333;
}
/** HEADER **/
#header{
width:950px;
}
#header .moustache{
background:url('http://www.fogrhg.org/images/Banner-front-weepingcherry_790x150.png') top center no-repeat;
height:155px
}
/** HEADER NAV **/
#header #nav{
background:#ffffff;
font-family: 'Playfair Display', serif;
font-style:italic;
padding:2px 0;
text-transform:uppercase;
}
#header #nav a{
color:#ffffff;
padding:0 38px;
text-decoration:none;
}
#header #nav a:hover{
color:#fb5d68;
}
/** SIDEBAR **/
#sidebar{
padding:10px 8px;
text-align:center;
font-size:20px;
width:250px;
float:right;
}
#sidebar h3{
color:#333;
font-weight:normal;
font-family: 'Roboto Condensed', sans-serif;
text-align:left;
text-transform:none;
border-bottom:2px solid #555;
}
/** PROFILE **/
#sidebar .profile{
font-style:none;
text-align:center;
}
/** SEARCH **/
#sidebar #search{
font-size:11px;
font-family:sans-serif;
text-align:center;
}
#sidebar #search .search,#sidebar #search .button{
font-size:10px;
background:#fff;
border:1px solid #555;
text-transform:none;
}
/** TWITTER **/
#tweets .content{
text-transform:none;
display: block;
padding: 5px;
border-bottom: 1px solid #e1e1e1;
}
#tweets .content:hover {
background: #fafafa;
}
#tweets a {
text-decoration:none;
color:#888;
}
/** CONTENT **/
#content{
padding:10px 8px;
text-align:left;
font-size:11px;
float:right;
width:500px;
}
#content .h1{
margin:5px;
text-align:center;
text-transform:none;
font-size:24px;
font-weight:normal;
font-family: 'Roboto Condensed', sans-serif;
border-bottom:2px solid #555;
width:auto;
}
/** META **/
#content .meta {
color:#999;
margin:10px 0;
padding:2px;
font-size:10px;
text-transform:none;
background:#fafafa;
height:27px;
overflow:hidden;
}
#content .meta a{
color:#555;
text-decoration:none;
}
#content .meta .permalink{
float:right;
}
#content .meta .like{
float:right;
padding-right:2px;
}
#content .meta .reblog{
float:right;
padding-right:2px;
}
#content .quote{
font-family: 'Tangerine', cursive;
font-size:32px;
font-weight:bold;
text-align:center;
}
/** Jump Pagination **/
#pagination {
text-align: center;
font-size: 10px;
border-bottom: 0px;
text-decoration:none;
font-weight: bold;
color: #333;
}
#pagination a {
padding: 3px 7px 3px 7px;
text-decoration:none;
}
#pagination .current_page {
padding: 3px 7px 3px 7px;
background-color: #252525;
color: #FFF;
}
#pagination .jump_page:hover,#pagination .page:hover {
color: #252525;
}
#pagination .jump_page,#pagination .page, #pagination .page:visited {
color:#333
}
/** FOOTER **/
#footer{
background:#464646;
color:#fafafa;
font-family:sans-serif;
font-size:22px;
margin:15px 0 0;
padding:100px;
text-align:left;
text-transform:uppercase;
width:790px;
}
#footer a{
color:#fafafa;
}
#footer a:hover{
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<!-- HEADER -->
<div id="header">
<!-- Moustache -->
<div class="moustache"></div>
<!-- END -->
<!-- NAV -->
<div id="nav">
<table style="margin-left: -3px;" border="0" cellpadding="0" cellspacing="0" width="305"><tbody><tr><td height=" " width="38"> <a href="https://www.facebook.com/" target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/fb2_zps08962e30.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/fb1_zpseba2e1d1.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/fb1_zpseba2e1d1.jpg" alt="fb" /></a></td>
<td height=" " width="38"><a href="https://twitter.com/T"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/twit2_zps9e5648a8.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/twit1_zps01831144.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/twit1_zps01831144.jpg" alt="twitter" /></a></td>
<td height=" " width="38"><a href="http://pinterest.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/pin2_zps3394daf8.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/pin1_zps189133b3.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/pin1_zps189133b3.jpg" alt="pin" /></a>
</td>
<td height=" " width="38"><a href="http://instagram.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/ig2_zpse2504f42.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/ig1_zpsd2e0ab95.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/ig1_zpsd2e0ab95.jpg" alt="instagram" /></a></td>
<td height=" " width="38"><a href="http://www.bloglovin.com/"target="_blank"><img onmouseover="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/blovin2_zpsd500a7d0.jpg'" onmouseout="this.src='http://i1328.photobucket.com/albums/w522/epruckno/social/blovin1_zps5ab0d8a4.jpg'" src="http://i1328.photobucket.com/albums/w522/epruckno/social/blovin1_zps5ab0d8a4.jpg" alt="bloglovin" /></a></td>
</tr></tbody></table>
</div>
<!-- END -->
<!-- SIDEBAR -->
<div id="sidebar">
<!-- DESCRIPTION -->
<div class="profile">
</div>
<!-- Featured Post One -->
<h3>FEATURED POST</h3>
<a href="http://google.com" target=_blank><img src="http://www.29secrets.com/sites/all/files/s_-_gg_250x350.jpg" title="Google Day" width="250px"></a>
<!-- AD -->
<h3>SPONSOR</h3>
<a href="http://google.com" target=_blank><img src="http://hamovhotov.com/advertisement/wp-content/uploads/2007/03/250x250ad-in.gif" title="Google Day" width="250px"></a>
<!-- Featured Post Two -->
<h3>FEATURED POST</h3>
<a href="http://google.com" target=_blank><img src="http://blog.zap2it.com/frominsidethebox/assets_c/2010/12/nikita-shane-west-250x350-thumb-315xauto-19260.jpg" title="Google Day" width="250px"></a>
<h3>TWITTER</h3>
{block:Twitter}
<div id="twitter" style="display:none;height:200px;
overflow:hidden;">
<div id="tweets"></div>
</div>
<script type="text/javascript">
function recent_tweets(data) {
for (i=0; i<data.length; i++) {
document.getElementById("tweets").innerHTML =
document.getElementById("tweets").innerHTML +
'<a href="http://twitter.com/{TwitterUsername}/status/' +
(data[i].id_str ? data[i].id_str : data[i].id) +
'"><div class="content">' + data[i].text +
'</div></a>';
}
document.getElementById("twitter").style.display = 'block';
}
</script>
<br><br>
<center><a href="https://twitter.com/{TwitterUsername}" class="twitter-follow-button" data-show-count="false">Follow @{TwitterUsername}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></center>
{/block:Twitter}
<!-- INSTAGRAM -->
{block:ifShowInstagram}
<h3>INSTAGRAM</h3>
<iframe src="http://widget.stagram.com/in/{text:Instagram ID}/?s=63&w=3&h=3&b=0&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:200px; height: 200px" ></iframe>
{/block:IfShowInstagram}
<!-- SEARCH -->
<h3>SEARCH</h3>
<div id="search">
<form action="/search" method="get">
<input type="text" class="search" size="42" name="q" value="{SearchQuery}"/>
</form>
</div>
<!-- SIDEBAR 1 -->
{block:ifShowSidebar1}
<h3>{text:Header1}</h3>
{text:Content1}
{/block:ifShowSidebar1}
</div>
<!-- CONTENT -->
<div id="content">
{block:ContentSource}
<!— {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} —>
{/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
{block:Posts}
<!-- Text Post -->
{block:Text}
{block:Title}<div class="h1">{Title}</div>{/block:Title}
{Body}
{/block:Text}
{block:ContentSource}
<!-- End Text Post -->
<!-- Photo Post -->
{block:Photo}
<center><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:ContentSource}
<!-- End Photo Post -->
<!-- Quote Post -->
{block:Quote}
<div class="quote">{Quote}</div>
{/block:Quote}
{block:ContentSource}
<!-- End Quote Post -->
<!-- Link Post -->
{block:Link}
<h1><a href="{URL}" {Target}>{Name}</a></h1>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:ContentSource}
<!-- End Link Post -->
<!-- Chat Post -->
{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
<br>
{block:Lines}
<div class="chat"><b>{block:Label}{Label}{/block:Label}</b>
{Line}</div>{/block:Lines}
{/block:Chat}
{block:ContentSource}
<!-- End Chat Post -->
<!-- Audio Post -->
{block:Audio}
{block:AudioEmbed}
{AudioEmbed-500}
{/block:AudioEmbed}
{AudioPlayerGrey}
<br>
{Caption}
{/block:PermalinkPage}
{/block:Audio}
{block:ContentSource}
<!-- End Audio Post -->
<!-- Video Post -->
{block:Video}
<center>{Video-500}</center>
{Caption}
{/block:Video}
{block:ContentSource}
<!-- End Video Post -->
<!-- Tumblr Ask Post -->
{block:Answer}
<i>{Asker}: {Question}</i>
{answer}
{/block:Answer}
{block:ContentSource}
<!-- End Tumblr Ask Post -->
<div class="meta">
{block:IndexPage}
<div class="like">
{LikeButton size="15"}
</div>
<div class="reblog">
<a href="{ReblogURL}" target=_blank><img src="http://static.tumblr.com/l3yukm9/jOCmv0gjk/reblog.png" title="Reblog this post" width="15px"></a>
</div>
{block:date}<a href="{Permalink}">{TimeAgo}</a> {/block:date} {block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
<br>
{block:HasTags}
Tags: {block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags} {/block:HasTags}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="like">
{LikeButton size="15"}
</div>
<div class="reblog">
{ReblogButton size="15"}
</div>
{block:date}{TimeAgo}{/block:date} {block:NoteCount} | {NoteCountWithLabel}{/block:NoteCount}
<br>
{block:HasTags}
Tags: {block:Tags} <a href="{TagURL}">#{Tag}</a>{/block:Tags} {/block:HasTags}
</div>
{/block:PermalinkPage}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{/block:Posts}
<!-- PAGINATION -->
<div id="pagination">
{block:PreviousPage} <a href="{PreviousPage}" class="page">←</a> {/block:PreviousPage}
{block:JumpPagination length="10"}
{block:CurrentPage}
<span class="current_page">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage} <a href="{NextPage}" class="page">→</a>{/block:NextPage}
</div>
</div>
<!-- END -->
<!-- CLEAR -->
<div class="clear"></div>
<!-- FOOTER -->
<div id="footer">
<span style="float:left;">
<a href="/" title="Home">Home</a><br>
<a href="/" title="About">About</a><br>
Contact<br>
<a href="http://janelleski.net">Theme</a>
</span>
<span style="float:right; padding-left:5px; text-align:right;">
<a href="/" title="Archive">Archive</a><br>
<a href="/" title="Design">Design</a><br>
<a href="/" title="Fashion">Fashion</a><br>
<a href="/" title="Interior+Design">Interiors</a><br>
<a href="/" title="Photography">Photography</a><br>
<a href="/" title="Recipes">Recipes</a>
</div>
</div>
{block:Twitter}
<script type="text/javascript" src="/tweets.js"></script>
{/block:Twitter}
</body>
</html>
答案 0 :(得分:0)
你可以给内容div的右边界(尝试#content)
小部件div的或border-left(在#sidebar中尝试)
并给出边框式,边框颜色等样式......