对于小说阅读器，相信兄弟们都很熟悉，那么它是如何实现的呢？早这里分享一些经验之谈。
首先，在我的思路中，在制定多页，和重排版功能的实现，可能需要用到CSS3的一个属性：column-count:3(多列)思路是这样的，也不知道对不对，用HTML5+CSS3写一个可阅读的文本，然后用column-count属性进行分列，在移动端里，那么一本书就相当于一个页面，而每一页则相当于一列，而通过改变column-count的值则实现了重排版功能。不多说分享示例代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>webkit-column测试</title><style type="text/css">body {background: #FFFFFF;}strong {color:#ff0000;}p {margin:0;text-indent:2em;}* {-webkit-transition: all 200ms linear;}#control {position: relative;z-index: -1;}</style></head><body><script type="text/javascript">window.onload = function() { var c_box = document.getElementById("control"); var gCount = document.getElementById("get_count"); var col_num = document.getElementById("column_num"); col_num.onchange = function() { gCount.innerHTML = "<style>.c_count { -webkit-column-count:" + col_num.value + ";}</style><strong>" + col_num.value + "</strong>栏"; c_box.style.zIndex = "1"; } var gGap = document.getElementById("get_gap"); var col_gap = document.getElementById("column_gap"); col_gap.onblur = col_gap.onchange = function() { gGap.innerHTML = "<style>.c_count { -webkit-column-gap:" + col_gap.value + ";}</style><strong>" + col_gap.value + "</strong>"; } var col_rule_c = document.getElementById("column_rule_color"); var col_rule_v = document.getElementById("column_rule_va"); var col_rule_t = document.getElementById("line_type"); var gRule = document.getElementById("get_rule"); col_rule_t.onchange = function() { if(col_rule_c.value == undefined || col_rule_v.value == ""){ col_rule_v.value = "1px"; col_rule_c.value = "#FF0000"; } gRule.innerHTML ="<style>.c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";}</style><strong>-webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + "</strong>"; } col_rule_c.onchange = function() { if(col_rule_t.value == "" || col_rule_v.value == ""){ col_rule_v.value = "1px"; col_rule_t.value = "solid"; } gRule.innerHTML ="<style>.c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";}</style><strong>-webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + "</strong>"; } col_rule_v.onchange = function() { if(col_rule_t.value == "" || col_rule_c.value == undefined){ col_rule_c.value = "#FF0000"; col_rule_t.value = "solid"; } gRule.innerHTML ="<style>.c_count { -webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + ";}</style><strong>-webkit-column-rule:" + col_rule_v.value + " " + col_rule_c.value + " " + col_rule_t.value + "</strong>"; } var cBI = document.getElementById("column_break_inside"); var gBI = document.getElementById("get_break_inside"); var show_b_v = "auto"; var show_b_v_a = "avoid"; cBI.onchange = function() { if(this.value != 0){ gBI.innerHTML = "<style>.c_count p:nth-child(" + this.value + ") {-webkit-column-break-inside: " + show_b_v_a + ";}</style><strong>第" + this.value + "行必须在一栏中 -webkit-column-break-inside: " + show_b_v_a + "</strong>"; }else{ gBI.innerHTML = ""; } } var cBB = document.getElementById("column_break_before"); var gBB = document.getElementById("get_break_before"); var show_bb_v = "auto"; var show_bb_v_a = "always"; cBB.onchange = function() { if(this.value != 0){ gBB.innerHTML = "<style>.c_count p:nth-child(" + this.value + ") {-webkit-column-break-before: " + show_bb_v_a + ";}</style><strong>第" + this.value + "行前开始断开 -webkit-column-break-before: " + show_bb_v_a + "</strong>"; }else{ gBB.innerHTML = ""; } } var cBA = document.getElementById("column_break_after"); var gBA = document.getElementById("get_break_after"); var show_ba_v = "auto"; var show_ba_v_a = "always"; cBA.onchange = function() { if(this.value != 0){ gBA.innerHTML = "<style>.c_count p:nth-child(" + this.value + ") {-webkit-column-break-after: " + show_ba_v_a + ";}</style><strong>第" + this.value + "行之后开始断开 -webkit-column-break-after: " + show_ba_v_a + "</strong>"; }else{ gBA.innerHTML = ""; } } var cS = document.getElementById("column_span"); var gS = document.getElementById("get_span"); var show_S_v = "auto"; var show_S_v_a = "all"; cS.onchange = function() { if(this.value != 0){ gS.innerHTML = "<style>.c_count p:nth-child(" + this.value + ") {-webkit-column-span: " + show_S_v_a + ";padding:10px;background-color:rgb(250, 252, 212);}</style><strong>第" + this.value + "行通栏显示 -webkit-column-span: " + show_S_v_a + "</strong>"; }else{ gS.innerHTML = ""; } }}</script><div>栏数：<input type="range" step="1" min="1" max="10" value="3" id="column_num" /><span id="get_count"></span></div><ul id="control"> <li>分栏之间的间隔：<input type="text" value="" placeholder="数值和单位如：2em" id="column_gap" /><span id="get_gap"></span></li> <li>分栏之间的颜色值：<input type="color" id="column_rule_color" /></li> <li>分栏之间的间隔线大小：<input type="text" value="" placeholder="数值和单位如：1px" id="column_rule_va" /></li> <li>分栏之间的间隔线类型： <select id="line_type"> <option value="" selected="selected">选择线条类型</option> <option value="solid">solid</option> <option value="dashed">dashed</option> </select><span id="get_rule"></span> </li> <li>设置某个段落在分栏时通栏显示：<input type="range" step="1" min="0" max="13" value="1" id="column_span" /><span id="get_span"></span></li> <li>设置某个段落在分栏时是否强制不断开，显示在一栏中：<input type="range" step="1" min="0" max="13" value="0" id="column_break_inside" /><span id="get_break_inside"></span></li> <li>设置某个在某个段落前断开，从该段落开始在新的一栏中显示：<input type="range" step="1" min="0" max="13" value="0" id="column_break_before" /><span id="get_break_before"></span></li> <li>设置某个在某个段落后断开，让后面的段落在新的一栏中显示：<input type="range" step="1" min="0" max="13" value="0" id="column_break_after" /><span id="get_break_after"></span></li></ul><div class="c_count"> <p><strong>第一行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第二行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p><strong>第三行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第四行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第五行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第六行</strong> 第九届力支持，其宗旨是、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/2186">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680010816574.png" alt="小绿鲸英文文献阅读器">
</a>
<div class="aritcle_card_info">
<a href="/ai/2186">小绿鲸英文文献阅读器</a>
<p>英文文献阅读器，专注提高SCI阅读效率</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="小绿鲸英文文献阅读器">
<span>199</span>
</div>
</div>
<a href="/ai/2186" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="小绿鲸英文文献阅读器">
</a>
</div>
<p><strong>第七行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第八行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第九行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第十行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第十一行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第十二行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p> <p><strong>第十三行</strong> 第九届联合国际计算机会议得到广东省科技厅网站、广东省信息产业厅、珠海市人民政府及当地学术界和实业界的大力支持，其宗旨是为IT专业人士提供一个交流最新研究成果，了解本领域最新技术发展趋势，探讨IT产业对全球化趋势日益明显的世界新经济影响与作用的舞台，以达到促进地区IT产业发展的目的。应邀参加此次大会的主讲嘉宾包括微软、英特尔、爱立信、三星电子、甲骨文、戴尔等国际知名公司的高层，以及国家科技部、信息产业部、中科院、清华大学、中山大学、国防科技大学、香港大学、联想研究院等部门的官员、专家和学者。</p></div></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
702
