如何在CSS中制作可见的矩形框以包含我的视图的某些部分？

我做了一个博客，我想为每篇文章添加一个漂亮的框架（如图片）。 app/views/articles/index.html.erb列出了所有文章。我想用bootstrap-sass在每篇文章的周围制作一个框架，就像一个相框。这里是我的应用程序/视图/文章/ index.html.erb：如何在CSS中制作可见的矩形框以包含我的视图的某些部分？

<h1>All Articles</h1> 
<ul id="articles"> 
<% @articles.each do |article| %> 
<li> 
    <h4><%= link_to article.title, article_path(article) %></h4> 
    <% if article.image.exists? %> 
<%= image_tag article.image.url %> 
    <% end %> 
    <p> 
    <%= article.body %></p> 
    <p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small> 
    </li> 
    <% end %> 
    </ul> 
    <h6> 
    <% if logged_in? %> 
    <%= link_to "Create a New Article", new_article_path, class: "new_article" %> 
    <% end %> 
    </h6>

这里是我的cutomstyling.css.scss

@import "bootstrap-sprockets"; 
    @import "bootstrap"; 
    /* mixins, variables */ 
    /* universal */ 
html { 
overflow-y: scroll; 
} 
body { 
padding-top: 60px; 
} 
section { 
overflow: scroll; 
} 
textarea { 
resize: vertical; 
} 
.center { 
text-align: center; 
h1 { 
margin-bottom: 10px; 
} 
} 
/* typography */ 
h1, h2, h3, h4, h5, h6 { 
line-height: 1; 
} 
h1 { 
font-size: 3em; 
letter-spacing: -2px; 
margin-bottom: 30px; 
text-align: center; 
} 
h2 { 
font-size: 1.2em; 
letter-spacing: -1px; 
margin-bottom: 30px; 
text-align: center; 
font-weight: normal; 
color: #777 
} 
p { 
font-size: 1.1em; 
    line-height: 1.7em; 
    } 
/* 
footer{ 
background-color: #222; 
div ul li{ 
display:block; 
vertical-align: top; 
width: 50%; 
float: left; 
} 
} 
*/ 
@mixin box_sizing { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing:   border-box; 
} 
/* miscellaneous */ 
.debug_dump { 
clear: both; 
float: left; 
width: 100%; 
margin-top: 45px; 
@include box_sizing; 
    } 
/* forms */ 
input, textarea, select, .uneditable-input { 
border: 1px solid #bbb; 
width: 100%; 
    margin-bottom: 15px; 
@include box_sizing; 
    } 
input { 
    height: auto !important; 
} 
#error_explanation { 
color: red; 
ul { 
color: red; 
    margin: 0 0 30px 0; 
} 
} 
.field_with_errors { 
@extend .has-error; 
.form-control { 
color: $state-danger-text; 
} 
} 
/* article */ 

And here is my layouts app/views/articles/index.html.erb 

<h1>All Articles</h1> 
<ul id="articles"> 
<% @articles.each do |article| %> 
<li> 
    <h4><%= link_to article.title, article_path(article) %></h4> 
<% if article.image.exists? %> 
<%= image_tag article.image.url %> 
<% end %> 
    <p> 
    <%= article.body %></p> 
    <p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small> 
    </li> 
    <% end %> 
    </ul> 
    <h6> 
    <% if logged_in? %> 
    <%= link_to "Create a New Article", new_article_path, class: "new_article" %> 
    <% end %> 
    </h6>

这里是我的应用程序/视图/布局/ application.html .erb

<!DOCTYPE html> 
<html> 
<head> 
<title><%= full_title(yield(:title)) %></title> 
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
<%= render 'layouts/shim' %> 
</head> 
<body> 
<%= render 'layouts/header' %> 
<div class="container"> 
<div class="row"> 
<div class="col-md-9"> 
<% flash.each do |message_type, message| %> 
    <div class="alert alert-<%= message_type %>"><%= message %></div> 
    <% end %> 
    <%= yield %> 
    </div> 
    <div class="col-md-3"> 
    <h3> My Side Bar</h3> 
    Here I am going to add all the links I want, including search bar, the blog archives, the tags, 
    and recent posts, and finally an email subscription to our newsletter. 
     <ul> 
     <li> Search Bar :keywords </li> 
     <li> Archives: more styling</li> 
     <li> Sign Up for newsletter</li> 
     <li> Recent Posts</li> 
     <li> Reader's favorite</li> 
     <h3>Archives </h3> 
<% if @posts.to_a.empty? %> 
<div class="post"> 
<p>No articles found...</p> 
</div> 
<% else %> 
<% current_month = 0 %> 
<% current_year = 0 %> 
<% for article in @posts %> 
<% if (article.created_at.year != current_year) 
current_year = article.created_at.year %> 
<h3 class="archiveyear"><%= article.created_at.year%></h3> 
<% end %> 
<% if (article.created_at.month != current_month || article.created_at.year != current_year) 
current_month = article.created_at.month 
current_year = article.created_at.year %> 
<h4 class="archivemonth"><%= (Date::MONTHNAMES[article.created_at.month]) %></h4> 
<% end %> 
<div class="archivepost"> 
<%= link_to article.title, article_path(article) %> posted on <%= article.created_at.strftime('%A')%> - <%= article.created_at.strftime('%d') + "th"%> 
</div> 
<% end -%> 
    <%end %> 
    </ul> 
    </div> 
    </div> 

    </div> 
    <%= render 'layouts/footer' %> 
    <%= debug(params) if Rails.env.development? %> 
    </body> 
    </html>

来源

2014-11-05 codigomonstruo

您可以使用CSS，DIV哪里有content和overflow: scroll;在它上面的框架。偏序课程可能是一些透明部分（PNG）的图像。我希望它有帮助。

http://jsfiddle.net/m4eaa6p2/

<div id="content">Your article text here.Your article text here.Your article text here.Your article text here.Your article text here.Your article text here.</div> 
<div id="frame"></div> 


#content { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
    border: 1px solid black; 
} 

#frame { 
    position: absolute; 
    top: 45px; 
    left: 45px; 
    width: 105px; 
    height: 105px; 
    border: 5px solid red; 
}

来源

2014-11-05 12:09:48 GibboK

感谢Gibbok！我唯一担心的是如何让内容容器与视图中的其他特性和文本不重叠。现在，内容和框架与其他所有内容重叠。 – codigomonstruo 2014-11-05 22:31:14

您想将图片作为内容的边框（框架）吗？如果是的话，尝试这种方法http://www.w3schools.com/cssref/css3_pr_border-image.asp – GibboK 2014-11-06 08:58:41

如何在CSS中制作可见的矩形框以包含我的视图的某些部分？

回答

相关问题