扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
下载作业帮安装包
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
s=(1×2×3×…×n)+(4k+3),这里n>=3,1
作业帮用户
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
这个题看似复杂,但如果找到了方法,就不难解决.若n≥4,则1×2×3×…×n必然是4的倍数.此时s可以写成4m+3的形式,但是,一个完全平方数只可以写成4m或(4m+1)的形式,因此当n≥4时,任何一个k都不能使s写成完全平方数.因此n=3,此时s=4k+9,则k分别取4、10、18、28、40、54、70、88时,s取25、49、81、121、169、225、289、361.这就是所有的k的取值.
为您推荐：
其他类似问题
扫描下载二维码1000px&990px&980px&960px&常用栅格布局
页面的布局方式是页面构成的主骨架，其重要性你们懂的～
拿到一个PSD，一般情况下你会：
看整体布局方式，是列式布局还是通栏式布局？ 列式布局是2列还是3列？
通栏式布局一共有多少个通栏？每个通栏有多少列？
总的来说，看PSD就要像看MM，先要知道她PP大还是MM大。。。
所以在切页面前，先要写页面的主要布局的代码，和建楼房先搭地基的道理是如出一辙滴。布局代码确定后，再开始在布局上做“填空”游戏。
布局对于设计师来说也很重要，当开发员和设计师都遵循统一的布局规范时，可以大大的降低两者的沟通成本。同时保证页面风格的统一性。
适用期限 年
常用栅格布局方案
下面介绍的布局方案的示例代码使用
参照自动生成。
页宽1000px
20列的组合(每列40px)，10像素间隔，实际宽度990px
20列的组合(每列30px)，20像素间隔，实际宽度980px
25列的组合(每列30px)，10像素间隔，实际宽度990px
25列的组合(每列20px)，20像素间隔，实际宽度980px
11列的组合(每列80px)，10像素间隔，实际宽度980px
18列的组合(每列35px)，20像素间隔，实际宽度970px
25列的组合(每列45px)，10像素间隔，实际宽度980px
33列的组合(每列20px)，10像素间隔，实际宽度980px
14列的组合(每列60px)，10像素间隔，实际宽度970px
14列的组合(每列50px)，20像素间隔，实际宽度960px
28列的组合(每列25px)，10像素间隔，实际宽度970px
12列的组合(每列70px)，10像素间隔，实际宽度950px
12列或16列的组合(每列60px或40px)，20像素间隔，实际宽度940px
...天哪这种数字究竟有神马用！！！！
我那990_33_5_5的栅格布局来解说吧～～
990px和33列的关系
很简单的一个数学公式：
90=33(列)20(像素/列)+33*2*5(每列左右边距5像素)
神奇的列组合
3可以拆成X个整数相加，每种加法可以构成总宽990px的布局！！
例如,33=21+12，可以构成两列布局，其中右边一列的宽度为21x20+21*2*5=630px，右列的宽度为12*20+12*10=360px
& &div class="w-33"&
& & &div class="g-21"&&/div&
& & &div class="g-12"&&/div&
其中w-33表示你采用33列的布局！！g-21表示grid-21，即一个宽度630px的栅格；
空白HTML页
& &!DOCTYPE html&
& & & &head&
& & & & & &meta charset="utf-8" /&
& & & & & &title&Untitled Document&/title&
& & & & & &!--[if lt IE 9]&
& & & & & &script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&&/script&
& & & & & &![endif]--&
& & & & & &!--样式文件--&
& & & & & &link rel="stylesheet" type="text/css" href="css/reset.css" /&
& & & & & &link rel="stylesheet" type="text/css" href="css/text.css" /&
& & & & & &link rel="stylesheet" type="text/css" href="css/layout.css" /&
& & & & & &link rel="stylesheet" type="text/css" href="css/site.xxx.css" /&
& & & & & &!--JQuery--&
& & & & & &script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&&/script&
& & & &/head&
& & & &body&
& & & & & &!--页面交互的js文件--&
& & & & & &script type="text/javascript" src="js/AppFac.js"&&/script&
& & & & & &script type="text/javascript" src="js/site.xx.js"&&/script&
& & & & & &script type="text/javascript"&
& & & & & & & &AppFac.init({
& & & & & & & & & &uid:'xxx'
& & & & & & & &});
& & & & & &/script&
& & & &/body&
两列布局示例
代码比较多。。
这个还是直接看吧～
直接在wiki上看下代码，请猛击
三列布局示例
代码比较多。。
这个还是直接看吧～
直接在wiki上看下代码，请猛击
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。栅格系统，以及为什么需要栅格系统 - 简书
栅格系统，以及为什么需要栅格系统
栅格系统：以规则的网格阵列来指导和规范版面排布以及信息分布。
栅格系统最早应该是出现在设计上面，后来前端开发也做出了自己的栅格系统布局（Css Grid)。
什么是栅格化设计
在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，“参考线”），将平面划分成有规律的一系列“格子”（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。
栅格化设计 就是把网页的宽度分成固定的相同宽度，然后列出各种组合的可能，以方便在进行页面呈现的时候能够快速的进行布局，通常分成12等分或者24等分
以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
Q2-有哪些栅格系统
960gs 、不固定宽（bootstrap）等
栅格系统中，有12列、24列、16列等
栅格系统的公式：
//总宽度标记为W
//列的宽度标记为c
//列的个数标记为N
//Gutter（槽宽）标记为G
W = C * N-G
那么就有了以下结果
950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10
栅格系统的优势
能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。
基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。
以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
前端的应用(Css Grid)
早期HTML5规范没有定稿之前，大部分应用基于自己设计的百分比or固定宽式的方式来约定了一套class，开发者调用不同的class来完成栅格化布局。960GS/ bootstrap的栅格系统/等等都是这类思路来实现。
在16年，HTML5规范已经被各大浏览器实现，基本上flexbox已经落地到业务中，也出现了很多模块来提供栅格布局。
我要自律和自由
写在开头：关于网页栅格布局的概念已经无需再进行描述，一般来说，有经验的web ui 设计师都应该听说并运用过。但网上有些关于栅格化系统的文章讲的非常理论化，又是算法又是模块，而且和响应式布局混在一起，让新晋的网页设计师们简直无从下手，所以这里以案例来说明何时采用以及怎么最快...
Liya - 日 当女神潘潘导师问我是否了解网页设计中的栅格系统，为什么要使用栅格系统时，脑中能想到的只有，“遵循栅格使网页看起来整齐规范”，“方便重构”，“有利于响应式布局”。。。其实对栅格系统只是一知半解，并没有系统深入的理解，于是做了些功课，整理出这...
栅格系统的形成 1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
一、概念 1、栅格系统（grid systems），也叫“网格系统”。栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。 2、栅格系统运用固定的格子设计版面布局，风格工整简洁。 二、网页栅格系统...
有时候 我想在屋外的墙上 画一双眼睛 任凭破碎的阳光 穿过无人的小巷 然后独自站在 冬天的街道 眺望着南方 想象着迷人的村庄 以及雪花飘落的夜晚 如今我是多么希望 当我无尽的思念 穿过叹息的海 到达远方的堤岸时 有一个人 也想起了我
本文源自《谈谈状态机》。 我经常在工作中听到状态机的概念，尤其是我们公司的支付系统，订单状态在接收到某个事件后需要从一个状态迁移到另一个状态。目前公司内的通用写法是定义一系列DAO，在需要状态迁移的时候调用这些DAO来改变状态。说实话，这种方式把状态的迁移分散在代码的各个角...
影子练习（shadowing），也即跟读，指的是在滞后于音频原文2、3个词的情况下跟读，注意是跟词语而不是跟句子，不要一句话播完了再跟读，你的声音就像是原文音频的影子一样。当然这个过程是“盲听”，也就是不能看听力的文本材料。 “影子练习”这个概念对于一些英语学习者来说，可能...
（一） 我把你写进诗里 把诗写进云里 把云写进海里 把海写进梦里 把梦写进爱里 把爱写进时光里 （二） 你言语中带着的笑意 是浓度最高的糖 我是贪吃的孩子 （三） 如果生命只剩三天 我要用 一天去路过 一天去邂逅 一天去爱你 End 安安，90后教师一枚～ 立志内在有逻辑，...
明知今天的夕阳很美，可是在楼群里，找不到。 还好，看得见飞机飞过。 看得见小朋友的笑脸，每张都灿烂。 看得见打篮球的人们。 热闹的熙攘的努力的生活。 偷拍了牵手的一对夫妇。面容早已和美没什么关系。可是她们的笑容很美。 风吹起黄色的布衣。 鸟儿在天空飞过。 鸟儿是否归巢？孩子...请使用支持脚本的浏览器！
你访问的博客设置了访问权限，你暂时不能查看。博主可在此
不如去逛逛吧。
网易公司版权所有&&&Bootstrap 教程
Bootstrap 网格系统
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
摘自维基百科：
在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
Bootstrap 官方文档中有关网格系统的描述：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。
移动设备优先策略
决定什么是最重要的。
优先设计更小的宽度。
基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
随着屏幕大小的增加而添加元素。
响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
让我们来看下面这行代码：
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。
下表总结了 Bootstrap 网格系统如何跨多个设备工作：
超小设备手机（&768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列数量和12121212
最大列宽Auto60px78px95px
间隙宽度30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）30px（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes
基本的网格结构
下面是 Bootstrap 网格的基本结构：
&div class="container"&
&div class="row"&
&div class="col-*-*"&&/div&
&div class="col-*-*"&&/div&
&div class="row"&...&/div&
&div class="container"&....
让我们来看几个简单的网格实例：
以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。
为了解决这个问题，可以使用 .clearfix class和 来解决，如下面实例所示：
&div class=&container&&
&div class=&row& &
&div class=&col-xs-6 col-sm-3&
style=&background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit.&/p&
&div class=&col-xs-6 col-sm-3&
style=&background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.
&div class=&clearfix visible-xs&&&/div&
&div class=&col-xs-6 col-sm-3&
style=&background-color: #dedef8;
box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&p&Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
&div class=&col-xs-6 col-sm-3&
style=&background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim
浏览器上调整窗口大小查看变化，或在您手机上查看效果。
偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
在下面的实例中，我们有 &div class="col-md-6"&..&/div&，我们将使用 .col-md-offset-3 class 来居中这个 div。
&div class=&container&&
&h1&Hello, world!&/h1&
&div class=&row& &
&div class=&col-md-6 col-md-offset-3&
style=&background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&p&Lorem ipsum dolor sit amet, consectetur adipisicing
结果如下所示：
为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
在下面的实例中，布局有两个列，第二列被分为两行四个盒子。
&div class=&container&&
&h1&Hello, world!&/h1&
&div class=&row&&
&div class=&col-md-3& style=&background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&h4&第一列&/h4&
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
&div class=&col-md-9& style=&background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&h4&第二列 - 分为四个盒子&/h4&
&div class=&row&&
&div class=&col-md-6& style=&background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
&div class=&col-md-6& style=&background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
&div class=&row&&
&div class=&col-md-6& style=&background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
&div class=&col-md-6& style=&background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
结果如下所示：
Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
&div class=&container&&
&h1&Hello, world!&/h1&
&div class=&row&&
&div class=&col-md-4& style=&background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&div class=&col-md-8& style=&background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&div class=&row&&
&div class=&col-md-4 col-md-push-8& style=&background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
&div class=&col-md-8 col-md-pull-4& style=&background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;&&
结果如下所示：
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
记住登录状态
重复输入密码