The sand accumulates to form a pagoda
经常有一些粉丝咨询前端该从什么开始学，那当然是我们的前端基础三件套开始学起，HTML、CSS、javaScript，前端的大部分框架的底层还是围绕着前端三件套来搭建的，相信大家能够在很多平台中去找到一些前端三件套的体系教程，借着原力计划凉哥也为大家带来前端三件套的一些内容分享，只不过这里可不是纯基础知识的输出，而是会结合一些基于前端三件套的基础知识来做一些有趣的小项目、小demo，会由简单到复杂，由静态到动态的过程来帮助大家掌握前端三件套的使用及搭配，所以这里针对的人群是前端初学者或者你还没有开始学前端想感受一些前端代码那这个专栏很适合你。
我们第一个小demo非常简单的一个个人相册的页面，布局简单，帮我们了解基础的前端代码；下面呢是我们demo的效果图，在上篇文章中我们为大家简单的讲解了HTML、CSS的概念以及我们完成了demo中的头部搭建，让我们初体验了一下HTML、CSS代码，今天呢我们就把这个demo剩下的部分完成吧！如果你没有接触过前端你可以看一下上篇文章 👉 手把手教你基于HTML、CSS搭建我的相册（上），我们接着上篇文章中的代码继续搭建；
我们能够看到这部分内容的整体我们可以看成一个大的盒子然后有一个边框，边框的四个角还是圆的，里面有六张图片，好像描述起来也是比较简单的，那下面我们就来通过代码实现一下想要的页面吧！首先我们就先来看这个大盒子，我们在上篇文章中跟大家讲解过盒子我们就可以用div，这里呢也是我们通过在body中新建一个div标签，由于我们的头部是在上面所以我们的div要写上头部div的下面；我们添加div并且通过class设置类名为main。
<body>
<div class="header">
<h1>我的相册</h1>
</div>
<div class="main">
</div>
</body>
然后我们在style中为main类名的盒子设置上下面的样式，首先设置 background-color: #fff;背景颜色为白色，margin: 20px;外边距为20px，padding: 20px;内边距也是20px，border: 2px solid #333;这是设置的边框，值为线条宽度2px 实线 线条颜色为灰色；border-radius: 10px;这个属性是设置的边框为圆角弧度是10px；我们可以看一下效果；
.main {
background-color: #fff;
margin: 20px;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
}
我们上面的外面的大盒子的样式已经搞定了，大家可以会觉得是不是太矮了，要不要高一些，其实这里大家设置高度也可以，因为这个网站的布局比较简单所以我选择让盒子中的内容来撑起盒子高度，所以这也是同样的一个网站在样式搭建的细节上有非常多的选择，只要自己觉得方便就行。我们可以观察一下其实我们的图片的话是一个列表，那我们为了比较好操作我们在创建一个类名为gallery的div来承载图片，另外呢我们为每个图片也装上一个类名为image的盒子来看一下；这里的img呢就是图片标签，其中src就是图片地址我们可以选择本地，这里我用的是网上的图片，大家可以随便找自己喜欢的图片放到这里，alt是文字，图片不展示的时候展示的文字。
<div class="main">
<div class="gallery">
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片1">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片2">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片3">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片4">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片5">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片6">
</div>
</div>
</div>
我们刷新页面，显然不是我们想要的，我们要通过CSS样式来美化一下我们图片的呈现形式吧，首先呢我们的div是行内元素，特点就是每个div都独占一行，所以我们给gallery 盒子添加上flex布局，至于什么是flex布局呢？大家可以下去后自行查阅资料，网上很多讲解比较详细的文章，如果有需要大家可以私聊我为大家出一篇讲解也可以，这里我们先跟着博主来写就行，flex-wrap你可以理解为时候换行，我们通过flex设置后所有的图片都是在一行了，所以我们要让它换行，justify-content是一种对其方式我们可以理解为设置它以后我们的子元素是两端对齐；然后我们为图片的盒子设置上宽度为30%， margin-bottom距离底部20px。
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image {
width: 30%;
margin-bottom: 20px;
}
我们发现图片还是很大，这是因为我们只为图片的div设置了宽度，但是没有为图片设置，所以我们还要给图片设置样式，这里我们看到.image img其实这是我们选中类名为image下面的img标签，因为类名是可以重复的所以我们这里也是选中了所有的img，如果我们直接写img可以么？当然可以在这里，但是在实际项目中我们只写一个标签容易造成样式污染因为img标签可能非常多，我们通过类名里面的img就比较针对性，这里呢我们设置宽度为100%，高度适应即可；这就得到了我们想要的效果。
.image img {
width: 100%;
height: auto;
}
上面呢我们把中间的图片区域搞定了，就剩下我们底部的版权模块了，这个比较简单，跟我们的头部标题差不多，我们首先在我们类名为main的div下面新增一个类名叫做footer的div，然后我们在div中添加一个p标签，p标签呢是段落标签，大家也可以使用其他的div、h标签都可以的哈。
<div class="footer">
<p>版权所有 © 2023 我的相册</p>
</div>
当然我们还是需要定义样式，首先我们跟头部一样还是通过background-color设置背景颜色为灰色，将文字颜色设置为白色，文字对齐样式为居中，通过padding设置我们的内边距为10px；这样就完成了我们底部的样式；我们刷新看一下效果吧！
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
到这里呢我们的特别基础的相册就搭建完成了，样式也极为简单，目的其实是为了让我们的初学者或者是还没有接触过前端的活动能够通过简单的例子来帮助大家感受体验一下前端的代码结构，那也希望各位伙伴给个三联支持，我们本系列会从简单到复杂，通过一个个循序渐进的案例来帮助大家掌握前端基础三件套的同时间也能够做出一些比较有趣好玩的项目，最后呢我也想完整的代码放在下面，大家可以对照来编码；那就让我们 let’s coding！
完整代码
<html>
<head>
<title>我的相册</title>
<meta name="author" content="（作者）几何心凉" />
<meta name="description" content="网页的描述" />
<meta name="copyright" content="这里是版权信息" />
<meta name="keywords" content="网页的关键字" />
<style>
/* 这里编写样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
.main {
background-color: #fff;
margin: 20px;
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
}
h1 {
font-size: 3em;
margin: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image {
width: 30%;
margin-bottom: 20px;
}
.image img {
width: 100%;
height: auto;
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="header">
<h1>我的相册</h1>
</div>
<div class="main">
<div class="gallery">
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片1">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片2">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片3">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片4">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片5">
</div>
<div class="image">
<img src="https://lmg.jj20.com/up/allimg/4k/s/02/210924233115O14-0-lp.jpg" alt="照片6">
</div>
</div>
</div>
<div class="footer">
<p>版权所有 © 2023 我的相册</p>
</div>
</body>
</html>
本期推荐
✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下
👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'