关于朗文双解排版问题

毛小驴 · 发表于 2020-9-11 19:57:26

在论坛上看到有朗文英文版的精美排版（上图）（https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=14312&extra=&page=1），hanyl05大后面发过朗文双解的6++V3.0（译文完整版）（下图）（https://www.pdawiki.com/forum/thread-38318-1-1.html?x=3963），无奈hanyl05大就是感觉排版不好看，自己好像也不会排版，想请教各位大神，有没有可以将hanyl05大版的按照这样给排个版呢，当然也不会悬赏什么的，纯粹是看到这个排版很完美而已，提一嘴。

Jiangxi · 发表于 2020-9-11 23:50:41

这是mg100的排版，的确漂亮

baodi · 发表于 2020-9-12 08:00:55

如果html 树也完全相同,那直接替换里面的css文件估计就能完成排版.

毛小驴 · 发表于 2020-9-12 08:45:23

baodi 发表于 2020-9-12 08:00
如果html 树也完全相同,那直接替换里面的css文件估计就能完成排版.

这个排版是英文的，而且有的内容并不相同，所以感觉直接替换怕是不行，还得有大神给调整一下

helloit · 发表于 2020-9-12 10:53:00

毛小驴发表于 2020-9-12 08:45
这个排版是英文的，而且有的内容并不相同，所以感觉直接替换怕是不行，还得有大神给调整一下 ...

不如图中排版，只会一点皮毛，不再修改。不喜欢的话另找大佬～

ldoce6ec.zip (3.5 KB, 下载次数: 7, 售价: 5 粒米)

毛小驴 · 发表于 2020-9-12 11:01:33

helloit 发表于 2020-9-12 10:53
不如图中排版，只会一点皮毛，不再修改。不喜欢的话另找大佬～

可以啊兄弟！

，这个比原来的看来已经顺眼许多了，放一张你这个的效果图，让大家羡慕下，想要的可以看看效果，是比mg100的有点距离，感觉是有点乱？看来没事儿得学学怎样排版了，还是根据自己的要求自由调整来的爽快点

dfliaoyue · 发表于 2020-9-12 14:14:01

我觉得lz可以琢磨下css。照着w3school的文档改就好，选一个词条粘出来弄个单独的html文件在浏览器里看效果。别人的排版不会总有合心意的。
我其实也是从0开始折腾的，不管咋说css比js好弄多了，更不用说和整理词典文本比。仅仅改动font-size、color、line-height、background、border、margin、padding这几个属性就能把别人的排版改头换貌了。

毛小驴 · 发表于 2020-9-12 22:23:00

dfliaoyue 发表于 2020-9-12 14:14
我觉得lz可以琢磨下css。照着w3school的文档改就好，选一个词条粘出来弄个单独的html文件在浏览器里看效果 ...

是的，我这两天也下载了些好的排版样式，对照着在学习调整，希望可以调个好的样式出来，共同进步吧

thinkinginlast · 发表于 2020-9-14 11:31:05

本帖最后由 thinkinginlast 于 2020-9-14 12:31 编辑

@Jiangxi，@helloit最好请@mg100放出css试试。不仅仅是好看，好久之前我就模仿了一个，不大搞得定自适应排版，只是有个意思，其实是可以用的。放哪里了，我得找一下，找到就发个私货，聊且体验下。

，不喜欢五彩，要改，请自己改。有意思的是，屏幕大小不同，意项单列可变多列，时间过久，我也忘记咋弄的，这半成品和@mg100大佬可比不了，见笑了，码很乱。
服务报错，zip，jpg都贴不上来了。直接用txt，拷贝复制，请自己改正确的CSS名字，搞完，可以帮我补个图哈。

*{word-wrap:break-word!important}
.entry{line-height:150%;color:black;display:block;font-family:Arial,sans-serif;color:#000}
.abbr{font-weight:bold}
.ac,.ac{padding-left:2px;padding-right:2px;border-radius:2px 2px 2px 2px;border-style:solid;border-width:1px;font-variant:small-caps;font-size:80%;font-weight:bold;color:blue}
.amequiv{font-weight:bold}
.brequiv{font-weight:bold}
.collo{font-weight:bold}
.colloexa{display:block}
.colloinexa{font-style:italic;font-weight:bold}
.comp{font-weight:bold}
.deriv{font-weight:bold;color:blue}
.errorbox{display:block}
.etymsense{display:block}
.etymrefhwd{font-style:italic}
.etymrefhom{font-size:80%;vertical-align:super;font-style:normal}
.etymorigin{font-style:italic}
.etymtran{font-weight:bold}
.etymbox{margin-top:1em;display:block}
.example{font-style:italic;display:block;color:blue}
.freq,.freq{padding-left:2px;padding-right:2px;border-radius:2px 2px 2px 2px;border-style:solid;border-width:1px;font-variant:small-caps;font-size:80%;font-weight:bold;color:red}
.level{color:red;font-size:160%}
.fullform{font-weight:bold}
.geo,span.geo{font-weight:normal;font-style:italic;color:purple}
.gloss,.collgloss{font-weight:normal;font-style:normal;color:black}
.gram{color:green}
.hintbold{font-weight:bold}
.hintitalic{font-style:italic}
.homnum{vertical-align:super;font-size:8pt;color:blue;font-weight:bold}
.hwd{display:none}
.hyphenation{font-weight:bold;font-size:120%;color:blue}
.frequent{color:red}
.lexunit{font-weight:bold}
.lexvar{font-weight:bold}
.linkword{font-style:italic}
object{font-weight:normal}
.opp{font-weight:bold}
.orthvar{font-weight:bold}
.pastpart{font-weight:bold}
.pasttense{font-weight:bold}
.phrvbentry{display:block;margin-top:10px;margin-left:10px}
.phrvbhwd{font-weight:bold;color:blue}
.pluralform{font-weight:bold}
.pos{font-style:italic;color:green;font-weight:normal}
.prespart{font-weight:bold}
.propform{font-weight:bold;display:block}
.propformprep{font-weight:bold;display:block}
.ptandpp{font-weight:bold}
.refhomnum{vertical-align:super;font-size:60%}
.refhwd,.refsensenum{font-style:normal;font-variant:small-caps;text-transform:lowercase}
.refsensenum{font-size:80%}
.reflex{font-weight:bold}
.registerlab{font-style:italic;color:purple}
.relatedwd{font-weight:bold}
.runon{display:block;margin-top:8px}
.sense{display:block}
.signpost{color:white;background-color:#35a3ff;margin-left:.5em;font-weight:bold;font-variant:small-caps;text-transform:uppercase;font-size:80%;padding:1px 2px 1px 1px}
.spokensect{border-top:solid;border-bottom:solid;border-width:2px;display:block;margin-bottom:1ex;clear:both;margin-top:1ex;border-color:#00a2e8;padding:3px}
.spokensecthead{display:block;color:#00a2e8;font-weight:bold}
.pronstrong{font-style:italic}
.subsense{display:block}
.superl{font-weight:bold}
.syn{font-weight:bold}
.t3perssing{font-weight:bold}
span.neutral{font-style:normal;font-weight:normal;font-variant:normal;color:black;text-decoration:none}
.cross{color:red;font-weight:bold}
span.italic{color:black;font-style:italic;font-weight:normal}
.badexa{text-decoration:line-through;font-style:italic}
.hint .expl{display:inline}
span.infllab{font-style:italic;font-weight:normal}
span.warning{font-style:normal;font-weight:bold;color:red}
span.sensenum{font-style:normal;font-weight:bold;margin-right:3px;color:blue}
span.synopp{padding-left:3px;padding-right:3px;border-radius:2px 2px 2px 2px;border-style:solid;border-width:1px;font-variant:small-caps;font-size:80%;font-weight:bold;color:blue}
.subheading,.secheading{display:block;font-weight:bold;font-weight:bold;color:white;background-color:#8187bf;margin-left:-3px;margin-right:-3px;font-variant:small-caps;padding-left:3px}
.collocate,.exponent{display:block;margin-top:5px}
.collocate.inline{display:inline}
.expl{display:block;padding:0 3px}
.colloc{font-weight:bold}
.exp{font-weight:bold}
.expr{font-weight:bold}
.colloc.key{color:blue}
span.keycollo{font-weight:bold;color:blue}
.thespropform{font-weight:bold}
.goodcollo{font-weight:bold}
.badcollo{text-decoration:line-through}
.defbold{font-weight:bold}
.thesref.newline{display:block}
.heading.newline{display:block}
.thesref span.thesaurus{color:blue;font-variant:small-caps}
.thesref .refhwd,.thesref .refhomnum{color:blue;font-weight:bold}
i{font-style:italic}
.imgholder{cursor:pointer;display:block;margin-bottom:1ex;padding:2px;
//clear:both;
//float:right;
}
.imgholder img{
max-height:25em;
//display:inline-block;
}
.buttons{display:block}
.popup-button{background-color:#f0f2fc;border-radius:2px;border:1px solid #7e92c7;color:#7e92c7;text-transform:uppercase;font-size:66%;padding:2px 3px;text-decoration:none}
.popup-button-hover{background-color:#dfe3f8;cursor:pointer}
.popverbs{display:block;color:white;font-weight:bold;background-color:#ec008d;padding-left:3px;margin-bottom:5px}
.verbtable .lemma{color:blue;font-size:120%;font-weight:bold}
.verbtable table{border-collapse:separate;border-spacing:1px;margin-top:10px}
.verbtable td{padding:0 5px 0 2px;border-style:solid;border-width:1px;border-color:#d2d2d2}
.header{font-weight:bold;font-variant:small-caps}
.verbtable td.col1{font-weight:bold}
.verbtable td.col2{font-style:italic}
.verbtable .geo{font-style:italic;color:#000;font-size:100%;font-weight:normal}
.verbtable .aux{font-weight:bold}
.verbtable .verb_form{color:blue;font-weight:bold}
.collocations .last{margin-bottom:20px}
.collocations .colloc{display:inline-block;font-weight:bold;margin-left:-2px}
.collobox,.thesbox,.usagebox,.grambox,.f2nbox{border-radius:9px 9px 9px 9px;border-style:solid;border-width:2px;display:block;margin-bottom:1ex;clear:both;margin-top:1ex}
.f2nbox{border-color:#00a2e8}
.f2nbox .heading{color:#00a2e8}
.heading{color:white;font-weight:bold;line-height:100%;padding:3px}
.section{display:block;padding:0 3px}
.last{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
.thesbox{background-color:#652d91;border-color:#652d91}
.thesbox .section{background-color:#e8e2f0}
.collobox{background-color:#1d3e99;border-color:#1d3e99}
.collobox .section{background-color:#e2f4fd}
.usagebox{background-color:#00a2e8;border-color:#00a2e8}
.usagebox .expl{background-color:#e2f4fd}
.grambox{background-color:#00adee;border-color:#00adee}
.grambox .expl,.grambox .compareword{background-color:#e2f4fd;display:block;padding-left:3px}
.compareword{padding-top:5px;padding-bottom:5px}
.gramrefcont{display:block;text-transform:lowercase;font-variant:small-caps;padding-left:3px;padding-bottom:1px}
.thesaurus .sense{padding-left:3px;padding-right:3px;margin-top:0}
.thesaurus .section,.collocations .section{margin-bottom:10px}
.thesaurus .secheading,.thesbox .secheading{background-color:#a186bd}
.add_exa{font-style:italic;display:block}
.nodeword{color:blue;font-weight:bold}
.phrase{display:block}
.phrasetext{font-weight:bold}
.expandable{cursor:pointer}
.entry div.content{display:none;margin-bottom:10px}
.group,.w{display:block}
.group .pos{font-weight:bold;display:block}
.item{display:block}
.w{font-weight:bold}
.popheader{display:block;color:white;font-weight:bold;padding-left:3px}
.popheader.popexa{background-color:red}
.popheader.popphrase{background-color:purple}
.popheader.popcollo{background-color:#1d3e99}
.popheader.popthes{background-color:#652d91}
.popheader.popetym{background-color:green}
.popheader.popwf{background-color:#ffd448}
.popheader.pope_menu{background-color:#57c0e0}
.ws-head{font-weight:bold;color:blue;font-size:larger}
.ws-head.ref{display:block;margin-top:10px}
.wswd{font-weight:bold;display:block}
.cyan{color:#00a2e8;font-size:larger}
.menuitem{display:block}
ul.exas{margin-top:.5em;margin-bottom:.5em;padding-left:2em;padding-right:1em}
ul.exas li{font-style:italic;color:blue}
.grammar{display:block}
.str{font-size:large;font-weight:bold}
.etymology{margin-top:10px}
.group{margin-top:10px}
.menuitem .signpost{background-color:transparent;color:black;margin-left:0;font-size:90%}
.phrvbs{display:block;margin-top:10px;margin-left:5px}
.phrvbs .heading{display:block;color:blue;font-weight:bold}
.phrv{font-weight:bold}
.secheading,.subheading{font-variant:normal;text-transform:uppercase}
.secheading.no_convert{text-transform:none}
.grambox .heading.newline{background-color:#6cd0f6}
img[src*="img/spkr_"]{max-height:1em}
img[src*="img/spkr_g"]{max-height:.7em}
.chwd{margin-top:10px}
.chwd a{display:inline-block;background-color:green;color:white;padding-top:2px;padding-bottom:3px;padding-left:5px;padding-right:5px;margin-right:3px;margin-bottom:3px;text-decoration:none;font-size:80%;border-radius:2px}
.chwd .hw{color:white}
.entry,.entry.lozenge,.verbtable{margin-top:.5em}
a[nattr="no-sound-file"] img{border:1px solid gray;border-radius:3px;max-height:.9em}
div[nattr="at-link"]{border:1px solid #e4e4e4;border-radius:9px;padding:.1em .5em;margin:.5em 0;background-color:rgba(199,110,6,0.1)}
div[nattr="at-link"]{display:none}
.popup-button:hover{cursor:pointer}
.popup-button{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently not supported by any browser */
}
span[onclick*="toggle"]{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently not supported by any browser */
}
/*-----------------2019-0425-----------*/
// div{font-size: 13px;}
.newline span.sensenum {font-size:0.9em;font-style: normal;font-weight: normal;margin-right: 5px;color: white;background-color: darkblue;border-radius: 3px ;border: 1px solid gray;padding:0px 3px;}
/* .entry{ display: grid!important;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
*/
.sense.newline{
border-top: 1px solid #c0c0c0;
//border-right: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
}
/*.grambox,.collobx,.thesbox,*/
.sense.newline{
//display: table-cell;
display:inline-block;
float:left;
//min-width:100px;
//max-width:399px;
width:399px;
min-height:25px;
//height:auto;
//max-height:100px;
padding:5px;
//position: relative;
}
//.grambox{display:inline;}
.crossref,.deriv{
display:block;
//float:none;
clear:both;
}
.entry{
//max-width:1280px;
//overflow: hidden;
}
.subsense{padding-left:13px;padding-right:1px;}
.subsense span.sensenum{color:darkblue;background-color:transparent;border:none;}
.signpost{margin-left:0px;
padding-left:0px;
}
//.button{color:Gray!important;background-color:#c0c0c0!important;}
.popup-button
,.popup-button-entrymenu,.popup-button-etymologies
,.popup-button-verbs,.popup-button-examples
,.popup-button-thesaurus,popup-button-collocations
,.popup-button-phrases,.popup-button-wordfamilies
{color:#808080;background-color:#ececec;
border: 1px solid #808080;
border-radius: 5px;
text-transform: capitalize;
padding-left: 1px!important;
padding-right:1px!important;
font-family: "Sitka Small",verdana;
padding: 0px;
font-weight: bold;
font-size:11px;
}
.phrvbentry,.entryhead{display:block;clear: both!important;}
.chwd a{background-color: #5bcf80;border-radius:1.5em;font-family:Verdana;text-transform: uppercase;}
//.def_c,.example_c{display:none;}

复制代码

thinkinginlast · 发表于 2020-9-14 17:15:00

本帖最后由 thinkinginlast 于 2020-9-14 17:25 编辑

thinkinginlast 发表于 2020-9-14 11:31
@Jiangxi，@helloit最好请@mg100放出css试试。不仅仅是好看，好久之前我就模仿了一个，不大搞得定自适应排 ...

现在上传附件越发艰难。喜欢这种自适应屏幕像素排版的，请自行拷贝上面的txt，弄弄，非3.0版，这是好早的L6，5汉译融合版，如有不适，自行改改。附件，图片传不上来了。当然最好大家请求，让@mg100大大看到，分享原版，学习一下。我的多列排版记得是有点对齐问题的。

alanpoon · 发表于 2020-10-1 08:54:12

copy代码后，LDOCE6.css文件名，没有出现楼主的排版，乱排一通。

thinkinginlast · 发表于 2020-10-10 11:36:22

本帖最后由 thinkinginlast 于 2020-10-10 11:41 编辑

alanpoon 发表于 2020-10-1 08:54
copy代码后，LDOCE6.css文件名，没有出现楼主的排版，乱排一通。

我这边是可以的，非常久远的融合版本L6，不是新出的朗文6，不过是CSS结构命名不同而已，效果不同完全可能，只是抛砖，不敢说能引玉。代码段对老双解L6有效，有趣的是屏幕大小自动调节多列排版。有话在先，如有不适，自行调整，CSS的名称可能不同。我是懒得再弄。

[求助] 关于朗文双解排版问题