我们在之前的文章中已经掌握了CSS的大部分内容，但仍有一些内容我们没有涉略，这篇文章就是为了补充前面没有涉及的内容，为我们的知识做出补充并且介绍一些布局技巧
当然，如果没有学习之前的知识，可以到我的主页中查看之前的文章：秋落雨微凉 - 博客园。
在我们的网页设计中，也许会有广告的设计部分
广告旁常常存在×号来进行广告的关闭，而这部分内容在CSS中就被称为元素的显示与隐藏
本质：
我们常常提供三种方法：
display
visibility
overflow
让我们分开一一介绍：
display属性用来设置一个元素应如何显示
我们常用的属性有：
注意：当display设置为none时，原有位置不再占用！！！
我们下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 当我们将display变化为none时，不仅元素隐藏，而且其原有位置也不再占有 -->
<style>
.peiqi {
height: 200px;
width: 200px;
background-color: aqua;
/* 当我们把display设置为none，元素隐藏，且原有位置不再占有，下方的div会占用当前div的位置 */
display: none;
}
.qiaozhi {
height: 200px;
width: 200px;
background-color: red;
/* 想让元素重新出现，可以设置为block，block通常为默认选项，不用设置 */
display: block;
}
</style>
</head>
<body>
<div class="peiqi"></div>
<div class="qiaozhi"></div>
</body>
</html>
display常与JS搭配使用，我们在后面章节讲到JS会详细讲述
visibility属性用来表示元素隐藏或者显示
我们常用的属性有：
注意：当visibility元素为hidden时，元素虽然隐藏，但仍保留原来位置，下方元素无法占用！！！
overflow只对盒子中的溢出部分做出反馈
我们常用的属性有：
我们下面给出示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我们分别展示四种情况 -->
<style>
div {
height: 200px;
width: 100px;
font-size: 14px;
background-color: pink;
}
.w1 {
/* 使元素隐藏 */
overflow: hidden;
}
.w2 {
/* 使元素滑动 */
overflow: scroll;
}
.w3 {
/* 使元素自动化滑动 */
overflow: auto;
}
.w4 {
/* 使元素显示 */
overflow: visible;
}
</style>
</head>
<body>
<div class="w1">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
<div class="w2">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
<div class="w3">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
<div class="w4">《原神》是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏，于2017年1月底立项 [28] ，原初测试于2019年6月21日开启 [1] ，再临测试于2020年3月19日开启 [2] ，启程测试于2020年6月11日开启 [3] ，PC版技术性开放测试于9月15日开启，公测于2020年9月28日开启 [4] 。在数据方面，同在官方服务器的情况下，iOS、PC、Android平台之间的账号数据互通，玩家可以在同一账号下切换设备。</div>
</body>
</html>
接下来我们介绍一些CSS中可以帮助美化界面的一些方法
我们会依次介绍到：
我们在网页设计中常常看到三角形标志，而这些标志需要一些小技巧才能够完成
设计三角的要求：
我们下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我们来设计一个三角形 -->
<style>
div {
/* 首先不需要高和宽 */
height: 0;
width: 0;
/* 整体边框设计为透明，粗细看需求设计 */
border: 10px solid transparent;
/* 然后我们根据需求设计三角朝向和颜色 */
border-top-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们在网页中常常会看到鼠标的各种样式
最常见的就是鼠标，然后我们可以看到小手，包括移动，文字和禁止符号
在CSS中有专门的语法来控制鼠标样式
div {
cursor：deafult; 默认
cursor：pointer；小手
cursor：move； 移动
cursor：text； 文本
cursor：not-allowed；禁止
}
我们直接采用行内CSS来讲解以上鼠标样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li style="cursor: default;">我是默认</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本选择</li>
<li style="cursor: not-allowed;">禁止符号</li>
</ul>
</body>
</html>
我们在使用input的框架时，通常会有默认的蓝色框架，但这样并不美观
所以我们常常去除掉这个蓝色框架：
input {
outline : none;
}
我们在使用textare时，在右下角文本域是可以进行拖拽的
但我们在网页设计时不能随意让用户更改界面，所以我们同样提供了方法禁止用户拖拽文本域：
textare {
resize ； none；
/* 当然，如果想要去除掉文本域的蓝色边框，我们也可采用outline方法*/
outline ： none；
}
官方解释：
语法：
以上vertical-align常用于使表单内的图片与文本对齐
问题来源：
解决方法：
当我们的框架承受不住过多文字时，可能出溢出或者突然终止，这样的网页设计都是不合标准的
所以我们希望采用省略号来使整个文本不显得过于生硬
我们分别讲述单行文本溢出和多行文本溢出的解决方法：
单行文本溢出：
强制文本一行显示：
white-space：nowrap；
超出部分省略：
overflow：hidden；
省略部分用省略号显示：
text-overflow：ellipsis；
多行文本溢出：(方法过于复杂且兼容性不好，不推荐使用)
设置省略超出部分且让省略部分让省略号代替：
overflow：hidden；
text-overflow：ellipsis；
弹性伸缩盒子模型显示：
display： -webkit-box；
限制在一个块元素显示的文本的行数：
-webkit-line-clamp: 2;
设置或检索伸缩盒对象的子元素排列方法:
-webkit-box-orient: vertical;
我们下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 首先我们先讲解单行文本溢出 -->
<style>
.lone {
/* 我们先设计一下盒子大小和bcc */
height: 20px;
width: 100px;
font-size: 10px;
line-height: 20px;
background-color: pink;
/* 第一步,单行文本当然要先设置文本强制在一行内显示 */
white-space: nowrap;
/* 第二步:将超出内容省略 */
overflow: hidden;
/* 第三步:我们要用省略号来代替省略内容 */
text-overflow: ellipsis;
}
</style>
<!-- 然后我们来介绍一下多行文本溢出 -->
<style>
.more {
/* 我们先设计一下盒子大小和bcc */
/* 注意,这里需要手动设置高度,使多余行数内容不显示出来 */
height: 40px;
width: 100px;
font-size: 10px;
line-height: 20px;
background-color: pink;
margin-top: 20px;
/* 1.设置省略超出部分且让省略部分让省略号代替： */
overflow: hidden;
text-overflow: ellipsis;
/* 2.弹性伸缩盒子模型显示： */
display: -webkit-box;
/* 3.限制在一个块元素显示的文本的行数： */
-webkit-line-clamp: 2;
/* 4.设置或检索伸缩盒对象的子元素排列方法: */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="lone">游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。</div>
<div class="more">游戏发生在一个被称作“提瓦特”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。</div>
</body>
</html>
我们可以采用一些技巧帮助我们更好地布局：
我们在横向排版采用float时，在存在边框时，左右两个边框会导致中间边框变粗
这时我们就可以采用margin方法使整体向左移动，使边框进行覆盖，从而减小边框粗细程度
我们给出案例解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我们希望去除中间边框粗大的部分 -->
<style>
ul>li {
float: left;
list-style: none;
height: 200px;
width: 100px;
background-color: pink;
border: 1px solid red;
/* 我们使外边距为-1,相当于向左移动 */
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
在上方我们使用margin去除掉边框变粗问题后
如果我们希望在hover该盒子后使边框发生颜色变化，但后方边框会压住前方边框导致效果失效
所以我们给出两种方法来解决：
我们下面给出代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 我们希望去除中间边框粗大的部分 -->
<style>
ul>li {
float: left;
list-style: none;
height: 200px;
width: 100px;
background-color: pink;
border: 1px solid red;
/* 我们使外边距为-1,相当于向左移动 */
margin-left: -1px;
}
ul>li:hover {
border-color: yellow;
/* 使用positon或者z-index来解决 */
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
当我们文字和图片同时使用时，为了防止图片压住文字导致文字显示不全，我们常常采用文字围绕图片的形式
而实现这一目的的主要解决方法是采用float的浮动原理
我们通过一个案例来解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 100px;
width: 200px;
background-color: pink;
margin: 100px auto;
}
.img {
/* 设置浮动,使文字和图片在同一行且不覆盖 */
float: left;
height: 90px;
width: 50px;
/* 我们可以稍微设计边框使图片和字体相差一些距离使其更加美观 */
margin-right: 5px;
}
.img img {
/* 设置图片和图片盒子一样大 */
width: 100%;
}
</style>
</head>
<body>
<!-- 首先我们创建一个大盒子来同时装图片和文字 -->
<div class="box">
<!-- 创建一个装图片的盒子来控制大小 -->
<div class="img"><img src="../../../Resources/picture/1.jpeg" alt=""></div>
<div class="chinese">纱雾老师,你好鸭</div>
</div>
</body>
</html>
我们常常需要用到页面控制框架,我们将给出一个案例用来讲解行内块应用于页面控制框架
案例图片:
案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 对整体去除边距 */
* {
padding: 0;
margin: 0;
}
/* 对大盒子进行设计 */
.box {
/* 使全部元素水平居中 */
text-align: center;
}
/* 对盒子的a做出设计 */
.box a{
/* 当a作为行内块元素,就可以设计高宽,并受水平居中影响 */
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
text-decoration: none;
color: #333;
}
/* 对最前面和最后面的单独设计宽度使其放下内容 */
.box .prev,
.box .next{
width: 85px;
}
/* 对两个需要单设的元素设计 */
.box .current,
.box .cls{
border: 1px solid transparent;
background-color: transparent;
}
/* 设置跳转框的大小 */
.box input{
width: 45px;
height: 36px;
outline: none;
border: 1px solid #ccc;
}
.box button{
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="cls">...</a>
<a href="#" class="next">下一页>></a>
<!-- 我们还需要一个跳转页面设计 -->
跳转到
<input type="text">
页
<input type="button" value="确定">
</div>
</body>
</html>
我们在进行网页设计时,CSS本身会有很多不美观的设定
我们需要在开始前就对CSS进行初始化以便于我们后期的网页设计
我们将给出CSS框架中所有需要初始化的部分并给出相关解释,下面给出代码:
/* 所有标签需要清除内外边距 */
* {
margin: 0;
padding: 0;
}
/* em斜体操作 */
em {
font-style: normal;
}
/* li需要去除前方小圆点 */
li {
list-style: none;
}
/* 图片需要设置无边框(照顾低版本浏览器),并设置垂直对齐用来解决图片底部有缝隙问题 */
img {
border: 0;
vertical-align: middle;
}
/* 我们希望经过button时,鼠标变为小手 */
button {
cursor: pointer;
}
/* 对于链接我们去除底部线,设置颜色 */
a {
color: #666;
text-decoration: none;
}
/* 对于链接我们经过时换色 */
a:hover {
color:#333;
}
/* 对于button和input,我们希望进行设置好字体需求 */
button,input {
font-family: 微软雅黑;
}
/* 对于body整体我们可以先定好字体的相关设置 */
body {
background-color: #fff;
font: 12px/1.5 微软雅黑;
color: #333;
}
/* 最后我们需要设置clearfix,在设计时可以直接使用 */
.clearfix {
*zoom: 1;
}
.clearfix::after{
visibility: hidden;
clear: both;
display: block;
content: "";
height: 0;
}
好的,那么关于CSS的补充内容就到这里,希望上面的讲解能给你带来帮助!
我需要读入一个包含数字列表的文件。此代码读取文件并将其放入二维数组中。现在我需要获取数组中所有数字的平均值，但我需要将数组的内容更改为int。有什么想法可以将to_i方法放在哪里吗？ClassTerraindefinitializefile_name@input=IO.readlines(file_name)#readinfile@size=@input[0].to_i@land=[@size]x=1whilex 最佳答案 只需将数组映射为整数:@land边注如果你想得到一条线的平均值，你可以这样做:values=@input[x]
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s
是否可以为特定(或所有)项目使用多个布局？例如，我有几个项目，我想对其应用两种不同的布局。一个是绿色的，一个是蓝色的(但是)。我想将它们编译到我的输出目录中的两个不同文件夹中(例如v1和v2)。我一直在玩弄规则和编译block，但我不知道这是怎么回事。因为，每个项目在编译过程中只编译一次，我不能告诉nanoc第一次用layout1编译，第二次用layout2编译。我试过这样的东西，但它导致输出文件损坏。compile'*'doifitem.binary?#don’tfilterbinaryitemselsefilter:erblayout'layout1'layout'layout2'
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我正在尝试提取方括号内的内容。到目前为止，我一直在使用它，它有效，但我想知道我是否可以直接在正则表达式中使用某些东西，而不是使用这个删除功能。a="Thisissuchagreatday[coolawesome]"a[/\[.*?\]/].delete('[]')#=>"coolawesome" 最佳答案 差不多。a="Thisissuchagreatday[coolawesome]"a[/\[(.*?)\]/,1]#=>"coolawesome"a[/(?"coolawesome"第一个依赖于提取组而不是完全匹配；第二个利用前瞻和
使用Ruby1.8.6/Rails2.3.2我注意到在我的任何ActiveRecord模型类上调用的任何方法都返回nil而不是NoMethodError。除了烦人之外，这还破坏了动态查找器(find_by_name、find_by_id等)，因为即使存在记录，它们也总是返回nil。不从ActiveRecord::Base派生的标准类不受影响。有没有办法追踪在ActiveRecord::Base之前拦截method_missing的是什么？更新:切换到1.8.7后，我发现(感谢@MichaelKohl)will_paginate插件首先处理method_missing。但是will_pa