Question

我创建了一个博客，我希望为我的每篇文章添加一个漂亮的框架（比如图片）。 app / views / articles / index.html.erb列出了所有文章。我想使用bootstrap-sass在每篇文章周围制作一个框架，就像一个相框一样。这是我的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>

这是我的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>

这是我的app / views / layouts / 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>

Answer 1

您可以使用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;
}

如何在CSS中创建一个可见的矩形框以包含我的视图的某些部分？

1 个答案: