# Goldendict-ng的默认模板article-style.css样式分享

**URL:** <https://forum.freemdict.com/t/topic/28276>\
**Category:** GoldenDict-ng\
**Tags:** css\
**Created:** [2024 年4 月 22 日 06:19 UTC](https://forum.freemdict.com/t/topic/28276 "2024-04-22T06:19:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

作者： ![cyda2155](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/c/a5b964/32.png) [@cyda2155](https://forum.freemdict.com/u/cyda2155)\
发布日期： [2024 年4 月 22 日 06:19 UTC](https://forum.freemdict.com/t/topic/28276/1 "2024-04-22T06:19:23Z")

</div>

直接这里贴代码。根据需要追加到C:\Users...\AppData\Roaming\GoldenDict\article-style.css尾部  
1、同词典不同词条分割优化

```css
/*同词典不同词条分割*/
div.mdict {
    margin-top:6px;
    padding-top: 6px;
}
div.mdict {
    border-top: 2px solid transparent;
    border-image: radial-gradient(circle,transparent,rgba(131, 144, 98, 0.25)) 1 !important;
}
.gdarticlebody {counter-reset:entry;}
div.mdict::before{counter-increment:entry;content:"Entry " counter(entry);font-variant: small-caps;color:rgba(131, 144, 98, 0.4);background:rgb(228, 230, 218);padding-left: 12px;padding-right: 12px;
    font-size: 12px;display: block;float:right;border-radius:4px;line-height:12px;}
div.mdict::before{position:relative;right: 49%;top: -12px;}
div.mdict:first-child{margin-top:0;}
div.mdict:only-child{border-top:none;border-image:none;}
div.mdict:only-child::before{content:none;}
.gdarticle{padding-bottom: 12px;}

```

2、每本词典文章页_Neumorphism_风格

```css
div.gdarticlebody > iframe {border-radius:10px;border:0px dotted grey;}
.gdarticle
{
    margin-bottom: 10px;
    transition: 0.1s background-color;

    background: linear-gradient(145deg, #edededee, #f0f0f0);
    border-radius: 20px;
    box-shadow: 20px 20px 60px #bebebe,
                -5px -5px 30px #ffffff;
}
.gdactivearticle
{
    background:rgba(250,240,230,0.7);
    box-shadow: 2px 2px 5px #ADD8E6;
}
.gdinactivearticle
{
    background: linear-gradient(145deg, #FFFFF3, #f0f0f0);
}
body
{
    padding-left: 1%;
    padding-right: 2%;
}

```

3、鼠标交互

```css
.control span {
    border-radius:0.2em;
    opacity:1;
    filter: alpha(opacity=0.9);
    transition: 3ms linear;
}
.control span:hover {
    opacity:0.9;
}
span.active{
    font-size:120%;
    padding:0.1em;
}
a {
	color:#9394e7;
	transition: color 0.3s ease;
	text-decoration: none;
}
a:hover {
    color: #ffbe7a ;
    text-shadow: 0 0 2px #99999980;
    background:rgba(125, 245, 255, 0.03);
}

```

4、在线维基百科显示优化

```css
.noprint, .editsection, .mw-editsection, .mwiki table.navbox,
#donate, #coordinates {
    display: none;
}
.metadata{
    display: none;
}
.mwiki #toc{width:20%;min-width: 100px;max-width: 200px;float:left;margin-right:0.8em;}
.mwiki .infobox {width:20%;min-width: 100px;float:right;margin-left:0.8em;}

```

5、图片防溢出

```css
img{object-fit: contain;max-width: 100%;text-align: center;}

```

6、文字防溢出边框

```css
/*解决文章溢出问题*/
div.gdarticle > div.mdict{
    display: block;
    float:left;
}

```

7、宽屏自适应两栏输出

```css
/*宽屏分2栏显示*/
@media (min-width:100em) {
    .gdarticlebody > div, div.gdarticle > div.mdict{
        width: 48%;
        display: block;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: flex-start;
        align-self: left;
        align-content: start;
        margin-bottom:1em;
        margin-top:0;
		margin-left:0.76%;
        margin-right:0.76%;
        box-shadow: 0 1px 3px lightgray;
        border-radius: 3px;
        overflow: hidden;
        overflow-x: hidden;
        padding: 5px;
    }
    .gdarticlebody > div::before, div.gdarticle > div.mdict::before{
        top: -9px;z-index:-1;
    }
    .gdarticlebody > div:nth-child(odd), div.gdarticle > div.mdict:nth-child(odd) {
        float:left;
    }
    .gdarticlebody > div:nth-child(even), div.gdarticle > div.mdict:nth-child(even) {
        float:right;
    }
    .gdarticle:not(:has(>.mdict)) > .gdarticlebody > .mdict:only-of-type {
        width: 99%;
        box-shadow:none;
    }
}
/*会误伤维基百科，改回来*/
.gdarticlebody > .mwiki {
    width: 99%;
    box-shadow:none;
}

```

` .gdarticlebody > div::before, div.gdarticle > div.mdict::before{ top: -9px;z-index:-1;`这行代码是对应调整词条分割的绿色"Entry"框框的。不用那个可以去掉

---

<div class="post-metadata">

作者： ![cyda2155](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/c/a5b964/32.png) [@cyda2155](https://forum.freemdict.com/u/cyda2155)\
发布日期： [2024 年4 月 22 日 06:25 UTC](https://forum.freemdict.com/t/topic/28276/2 "2024-04-22T06:25:30Z")

</div>

0、字体集中处理  
在该目录下新建fonts文件夹，直接用font-face引入全局加载大字符集中文字体。简单比如

```css
@font-face {
    font-family: LXGWWenKaiMono;
    src: url("C:/Users/.../AppData/Roaming/GoldenDict/fonts/LXGWWenKaiMono-Bold.ttf") format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: LXGWWenKaiMono;
    src: url("C:/Users/.../AppData/Roaming/GoldenDict/fonts/LXGWWenKaiMono-Light.ttf") format('truetype');
    font-weight: light;
}
@font-face {
    font-family: LXGWWenKaiMono;
    src: url("C:/Users/.../AppData/Roaming/GoldenDict/fonts/LXGWWenKaiMono-Regular.ttf") format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: SourceHanSerif;
    src: url("C:/Users/.../AppData/Roaming/GoldenDict/fonts/SourceHanSerif.ttc") format('opentype');
}

```

---

<div class="post-metadata">

作者： ![weshor](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/w/e19adc/32.png) [@weshor](https://forum.freemdict.com/u/weshor)\
发布日期： [2024 年4 月 22 日 09:40 UTC](https://forum.freemdict.com/t/topic/28276/3 "2024-04-22T09:40:12Z")

</div>

您好，多谢分享，希望能够分享一个google网站[%GDWORD%的页面调整样式，目前的显示不完整。多谢了。 - Google Search](https://www.google.com/search?q=%25GDWORD%25%E7%9A%84%E9%A1%B5%E9%9D%A2%E8%B0%83%E6%95%B4%E6%A0%B7%E5%BC%8F%EF%BC%8C%E7%9B%AE%E5%89%8D%E7%9A%84%E6%98%BE%E7%A4%BA%E4%B8%8D%E5%AE%8C%E6%95%B4%E3%80%82%E5%A4%9A%E8%B0%A2%E4%BA%86%E3%80%82)

 ![捕获0422](https://forumcdn.freemdict.com/uploads/default/original/3X/3/1/31150f8d613a285b107754d100812d923f0fa8cd.png)