0 0 8 4 - ‘H5交互’神器之滚动类操作 0.0
本帖最后由 不二如是 于 2021-8-11 11:12 编辑H5中要说为什么这么普遍主要原因，不是83图形图像，而是接下来要介绍的：
用户与页面的交互操作
用户与页面的交互操作
用户与页面的交互操作
高清图片 + 高B格页面呈现模式 + 精良用户体验
这次要介绍的滚动类交互主要用在文字较多的页面设计。
从网上自己下载一张高清大图或者用我给你的
文字部分，就用这个帖子里的：谈读书 - 弗兰西斯·培根 | 【极牛翻译】
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
</style>
</head>
<body>
<h1>谈读书-弗兰西斯·培根</h1>
<p>
弗兰西斯·培根（1561一1626），英国文艺复兴时期最重要的散文家、哲学家。他是近代归纳法的创始人，又是给科学研究程序进行逻辑组织化的先驱。代表作有《新工具》、《论科学的增进》以及《学术的伟大复兴》等。</p>
<p>
STUDIES serve for delight, for ornament, and for ability. Their chief use for delight, is in privateness and retiring; for ornament, is in discourse; and for ability, is in the judgment, and disposition of business. For expert men can exe-cute, and perhaps judge of particulars, one by one; but the general counsels, and the plots and marshalling of affairs, come best, from those that are learned.
</p>
<p>
读书足以怡情，足以傅彩，足以长才。其怡情也，最见于独处幽居之时；其傅彩也，最见于高谈阔论之中；其长才也，最见于处世判事之际。练达之士虽能分别处理细事或一一判别枝节，然纵观统筹，全局策划，则舍好学深思者莫属。
</p>
<p>
To spend too much time in studies is sloth; to use them too much for ornament, is affectation; to make judgment wholly by their rules, is the humor of a scholar. They perfect nature, and are perfected by experience: for natural abilities are like natural plants, that need pruning, by study; and studies themselves, do give forth directions too much at large, except they be bounded in by experience. Crafty men contemn studies, simple men admire them, and wise men use them; for they teach not their own use; but that is a wisdom without them, and above them, won by observation. Read not to contradict and confute; nor to believe and take for granted; nor to find talk and discourse; but to weigh and consider.
</p>
<p>
读书费时过多易惰，文采藻饰太盛则矫，全凭条文断事乃学究故态。
读书补天然之不足，经验又补读书之不足，盖天生才干犹如自然花草，读书然后知如何修剪移接，而书中所示，如不以经验范之，则又大而无当。
狡黠者鄙读书，无知者羡读书，惟明智之士用读书，然书并不以用处告人，用书之智不在书中，而在书外，全凭观察得之。
读书时不可存心诘难作者，不可尽信书上所言，亦不可只为寻章摘句，而应推敲细思。
</p>
<p>
Some books are to be tasted, others to be swallowed, and some few to be chewed and digested; that is, some books are to be read only in parts; others to be read, but not curiously; and some few to be read wholly, and with diligence and attention. Some books also may be read by deputy, and extracts made of them bothers; but that would be only in the less important arguments, and the meaner sort of books, else distilled books are like common distilled waters, flashy things.
</p>
<p>
书有可浅尝者，有可吞食者，少数则须咀嚼消化。换言之，有只须读其部分者，有只须大体涉猎者，少数则须全读，读时须全神贯注，孜孜不倦。
书亦可请人代读，取其所作摘要，但只限题材较次或价值不高者，否则书经提炼犹如水经蒸馏，味同嚼蜡矣。
</p>
<p>
Reading make a full man; conference a ready man; and writing an exact man. And therefore, if a man write little, he had need have a great memory; if he confer little, he had need have a present wit: and if he read little, he had need have much cunning, to seem to know, that he doth not.
</p>
<p>
读书使人充实，讨论使人机智，作文使人准确。因此不常作文者须记忆特强，不常讨论者须天资聪颖，不常读书者须欺世有术，始能无知而显有知。
</p>
<p>
Histories make men wise; poets witty; the mathematics subtitle; natural philosophy deep; moral grave; logic and rhetoric able to contend. Abeunt studia in mores. Nay, there is no stand or impediment in the wit, but may be wrought out by fit studies; like as diseases of the body, may have appropriate exercises. Bowling is good for the stone and reins; shooting for the lungs and breast; gentle walking for the stomach; riding for the head; and the like.
</p>
<p>
读史使人明智，读诗使人灵秀，数学使人周密，科学使人深刻，伦理学使人庄重，逻辑修辞之学使人善辩；凡有所学，皆成性格。
人之才智但有滞碍，无不可读适当之书使之顺畅，一如身体百病，皆可借相宜之运动除之。滚球利睾肾，射箭利胸肺，漫步利肠胃，骑术利头脑，诸如此类。
</p>
<p>
So if a man's wit be wandering, let him study the mathematics; for in demonstrations, if his wit be called away never so little, he must begin again. If his wit be not apt to distinguish or find differences, let him study the Schoolmen; for they are cymini sectors. If he be not apt to beat over matters, and to call up one thing to prove and illustrate another, let him study the lawyers' cases. So every defect of the mind, may have a special receipt.
</p>
<p>
如智力不集中，可令读数学，盖演题须全神贯注，稍有分散即须重演；如不能辨异，可令读经院哲学，盖此辈皆吹毛求疵之人；如不善求同，不善以一物阐证另一物，可令读律师之案卷。如此头脑中凡有缺陷，皆有特药可医。
</p>
</body>
</html>
效果图：（太丑不演示了）
先来一个最简单的页面固定类交互操作。
加载本地高清图像,顺便修改下效果：
body{
background: #FF33ff url(1.jpg) no-repeat 50% 0;
margin: 33px;
color: #FFF;
font-family: "Abadi MT Condensed Light";
}
效果图：
大概样子是有了，先解释下background的新玩法。
声明，‘no-repeat’防止恶心的平铺。
50%，表示水平方向位置50%。
0，垂直方向位置为0，自然图片垂直中心即可。
margin，设置文字的外边距33px。
看到那两条粉色了吗？！
当页面滚动到边缘就会出来，很恶心！
怎么办呢？
设置一个属性：
body{
/*其他*/
background-attachment: fixed;
}
效果图：
这样无论怎么滚动，都不会有那个粉色边了。
background-attachment: fixed表示背景固定下来，不随文字滚动而滚动。
好吧，现在还是很丑有木有！
用学过的一些技巧，美化下：
h1{
font-size: 88px;
text-transform: uppercase;
border-bottom:2px solid #FFF;
padding-bottom: 55px;
}
p{
font-size: 33px;
}
效果图：
为了更好的体验，请全屏阅读
就解释下text-transform，用来控制文本的大小写。
**** Hidden Message *****
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 支持支持 最近好忙好忙{:10_249:} 小人 发表于 2017-3-16 19:19
支持支持 最近好忙好忙
是啊，好久没看到你了
可以用手机端签到！ 学到了！！！ 看看怎么弄的 回复看帖 get中 必须在CSS样式加入 background-size: cover; 才能正常显示 回复看帖 好好看好好学 怎样做成苹果那样的效果？ RE: 0 0 8 4 - ‘H5交互’神器之滚动类操作 0.0 [修改] 庚午 发表于 2018-2-27 22:09
必须在CSS样式加入 background-size: cover; 才能正常显示
老铁稳 看看大牛的操作 吾生也有涯，而知也无涯。以有涯随无涯，殆已。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
background: #FF33ff url(1.jpg) no-repeat 50% 0;
margin: 33px;
color: #FFF;
font-family: "Abadi MT Condensed Light";
background-attachment: fixed;
background-size: cover;
}
h1{
font-size: 88px;
text-transform: uppercase;
border-bottom:2px solid #FFF;
padding-bottom: 55px;
}
p{
font-size: 33px;
}
</style>
</head>
<body>
<h1>谈读书-弗兰西斯·培根</h1>
<p>
弗兰西斯·培根（1561一1626），英国文艺复兴时期最重要的散文家、哲学家。他是近代归纳法的创始人，又是给科学研究程序进行逻辑组织化的先驱。代表作有《新工具》、《论科学的增进》以及《学术的伟大复兴》等。</p>
<p>
STUDIES serve for delight, for ornament, and for ability. Their chief use for delight, is in privateness and retiring; for ornament, is in discourse; and for ability, is in the judgment, and disposition of business. For expert men can exe-cute, and perhaps judge of particulars, one by one; but the general counsels, and the plots and marshalling of affairs, come best, from those that are learned.
</p>
<p>
读书足以怡情，足以傅彩，足以长才。其怡情也，最见于独处幽居之时；其傅彩也，最见于高谈阔论之中；其长才也，最见于处世判事之际。练达之士虽能分别处理细事或一一判别枝节，然纵观统筹，全局策划，则舍好学深思者莫属。
</p>
<p>
To spend too much time in studies is sloth; to use them too much for ornament, is affectation; to make judgment wholly by their rules, is the humor of a scholar. They perfect nature, and are perfected by experience: for natural abilities are like natural plants, that need pruning, by study; and studies themselves, do give forth directions too much at large, except they be bounded in by experience. Crafty men contemn studies, simple men admire them, and wise men use them; for they teach not their own use; but that is a wisdom without them, and above them, won by observation. Read not to contradict and confute; nor to believe and take for granted; nor to find talk and discourse; but to weigh and consider.
</p>
<p>
读书费时过多易惰，文采藻饰太盛则矫，全凭条文断事乃学究故态。
读书补天然之不足，经验又补读书之不足，盖天生才干犹如自然花草，读书然后知如何修剪移接，而书中所示，如不以经验范之，则又大而无当。
狡黠者鄙读书，无知者羡读书，惟明智之士用读书，然书并不以用处告人，用书之智不在书中，而在书外，全凭观察得之。
读书时不可存心诘难作者，不可尽信书上所言，亦不可只为寻章摘句，而应推敲细思。
</p>
<p>
Some books are to be tasted, others to be swallowed, and some few to be chewed and digested; that is, some books are to be read only in parts; others to be read, but not curiously; and some few to be read wholly, and with diligence and attention. Some books also may be read by deputy, and extracts made of them bothers; but that would be only in the less important arguments, and the meaner sort of books, else distilled books are like common distilled waters, flashy things.
</p>
<p>
书有可浅尝者，有可吞食者，少数则须咀嚼消化。换言之，有只须读其部分者，有只须大体涉猎者，少数则须全读，读时须全神贯注，孜孜不倦。
书亦可请人代读，取其所作摘要，但只限题材较次或价值不高者，否则书经提炼犹如水经蒸馏，味同嚼蜡矣。
</p>
<p>
Reading make a full man; conference a ready man; and writing an exact man. And therefore, if a man write little, he had need have a great memory; if he confer little, he had need have a present wit: and if he read little, he had need have much cunning, to seem to know, that he doth not.
</p>
<p>
读书使人充实，讨论使人机智，作文使人准确。因此不常作文者须记忆特强，不常讨论者须天资聪颖，不常读书者须欺世有术，始能无知而显有知。
</p>
<p>
Histories make men wise; poets witty; the mathematics subtitle; natural philosophy deep; moral grave; logic and rhetoric able to contend. Abeunt studia in mores. Nay, there is no stand or impediment in the wit, but may be wrought out by fit studies; like as diseases of the body, may have appropriate exercises. Bowling is good for the stone and reins; shooting for the lungs and breast; gentle walking for the stomach; riding for the head; and the like.
</p>
<p>
读史使人明智，读诗使人灵秀，数学使人周密，科学使人深刻，伦理学使人庄重，逻辑修辞之学使人善辩；凡有所学，皆成性格。
人之才智但有滞碍，无不可读适当之书使之顺畅，一如身体百病，皆可借相宜之运动除之。滚球利睾肾，射箭利胸肺，漫步利肠胃，骑术利头脑，诸如此类。
</p>
<p>
So if a man's wit be wandering, let him study the mathematics; for in demonstrations, if his wit be called away never so little, he must begin again. If his wit be not apt to distinguish or find differences, let him study the Schoolmen; for they are cymini sectors. If he be not apt to beat over matters, and to call up one thing to prove and illustrate another, let him study the lawyers' cases. So every defect of the mind, may have a special receipt.
</p>
<p>
如智力不集中，可令读数学，盖演题须全神贯注，稍有分散即须重演；如不能辨异，可令读经院哲学，盖此辈皆吹毛求疵之人；如不善求同，不善以一物阐证另一物，可令读律师之案卷。如此头脑中凡有缺陷，皆有特药可医。
</p>
</body>
</html> 哈哈哈哈
我怎么觉得什么特效都不加的文章清纯美丽干净，{:5_102:}，我这奇怪的审美{:10_279:}
直接选了个超大尺寸的图片（3200*2000）,粉红色直接盖了{:10_279:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
body{
background: #FF33ff url(star.jpg) no-repeat 50% 0;
margin: 33px;
color: #FFF;
font-family: "Abadi MT Condensed Light";
background-attachment: fixed;/*background-attachment: fixed表示背景固定下来，不随文字滚动而滚动。*/
}
h1{
font-size: 88px;
text-transform: uppercase;/*用来控制文本的大小写。*/
border-bottom:2px solid #FFF;
padding-bottom: 55px;
}
p{
font-size: 33px;
}
</style>
</head>
<body>
<h1>谈读书-弗兰西斯·培根</h1>
<p>
弗兰西斯·培根（1561一1626），英国文艺复兴时期最重要的散文家、哲学家。他是近代归纳法的创始人，又是给科学研究程序进行逻辑组织化的先驱。代表作有《新工具》、《论科学的增进》以及《学术的伟大复兴》等。</p>
<p>
STUDIES serve for delight, for ornament, and for ability. Their chief use for delight, is in privateness and retiring; for ornament, is in discourse; and for ability, is in the judgment, and disposition of business. For expert men can exe-cute, and perhaps judge of particulars, one by one; but the general counsels, and the plots and marshalling of affairs, come best, from those that are learned.
</p>
<p>
读书足以怡情，足以傅彩，足以长才。其怡情也，最见于独处幽居之时；其傅彩也，最见于高谈阔论之中；其长才也，最见于处世判事之际。练达之士虽能分别处理细事或一一判别枝节，然纵观统筹，全局策划，则舍好学深思者莫属。
</p>
<p>
To spend too much time in studies is sloth; to use them too much for ornament, is affectation; to make judgment wholly by their rules, is the humor of a scholar. They perfect nature, and are perfected by experience: for natural abilities are like natural plants, that need pruning, by study; and studies themselves, do give forth directions too much at large, except they be bounded in by experience. Crafty men contemn studies, simple men admire them, and wise men use them; for they teach not their own use; but that is a wisdom without them, and above them, won by observation. Read not to contradict and confute; nor to believe and take for granted; nor to find talk and discourse; but to weigh and consider.
</p>
<p>
读书费时过多易惰，文采藻饰太盛则矫，全凭条文断事乃学究故态。
读书补天然之不足，经验又补读书之不足，盖天生才干犹如自然花草，读书然后知如何修剪移接，而书中所示，如不以经验范之，则又大而无当。
狡黠者鄙读书，无知者羡读书，惟明智之士用读书，然书并不以用处告人，用书之智不在书中，而在书外，全凭观察得之。
读书时不可存心诘难作者，不可尽信书上所言，亦不可只为寻章摘句，而应推敲细思。
</p>
<p>
Some books are to be tasted, others to be swallowed, and some few to be chewed and digested; that is, some books are to be read only in parts; others to be read, but not curiously; and some few to be read wholly, and with diligence and attention. Some books also may be read by deputy, and extracts made of them bothers; but that would be only in the less important arguments, and the meaner sort of books, else distilled books are like common distilled waters, flashy things.
</p>
<p>
书有可浅尝者，有可吞食者，少数则须咀嚼消化。换言之，有只须读其部分者，有只须大体涉猎者，少数则须全读，读时须全神贯注，孜孜不倦。
书亦可请人代读，取其所作摘要，但只限题材较次或价值不高者，否则书经提炼犹如水经蒸馏，味同嚼蜡矣。
</p>
<p>
Reading make a full man; conference a ready man; and writing an exact man. And therefore, if a man write little, he had need have a great memory; if he confer little, he had need have a present wit: and if he read little, he had need have much cunning, to seem to know, that he doth not.
</p>
<p>
读书使人充实，讨论使人机智，作文使人准确。因此不常作文者须记忆特强，不常讨论者须天资聪颖，不常读书者须欺世有术，始能无知而显有知。
</p>
<p>
Histories make men wise; poets witty; the mathematics subtitle; natural philosophy deep; moral grave; logic and rhetoric able to contend. Abeunt studia in mores. Nay, there is no stand or impediment in the wit, but may be wrought out by fit studies; like as diseases of the body, may have appropriate exercises. Bowling is good for the stone and reins; shooting for the lungs and breast; gentle walking for the stomach; riding for the head; and the like.
</p>
<p>
读史使人明智，读诗使人灵秀，数学使人周密，科学使人深刻，伦理学使人庄重，逻辑修辞之学使人善辩；凡有所学，皆成性格。
人之才智但有滞碍，无不可读适当之书使之顺畅，一如身体百病，皆可借相宜之运动除之。滚球利睾肾，射箭利胸肺，漫步利肠胃，骑术利头脑，诸如此类。
</p>
<p>
So if a man's wit be wandering, let him study the mathematics; for in demonstrations, if his wit be called away never so little, he must begin again. If his wit be not apt to distinguish or find differences, let him study the Schoolmen; for they are cymini sectors. If he be not apt to beat over matters, and to call up one thing to prove and illustrate another, let him study the lawyers' cases. So every defect of the mind, may have a special receipt.
</p>
<p>
如智力不集中，可令读数学，盖演题须全神贯注，稍有分散即须重演；如不能辨异，可令读经院哲学，盖此辈皆吹毛求疵之人；如不善求同，不善以一物阐证另一物，可令读律师之案卷。如此头脑中凡有缺陷，皆有特药可医。
</p>
</body>
</html>
{:10_277:}
页:
[1]
2