【187】◀▶ 编辑博客的文本格式 & 装饰-白红宇

【187】◀▶ 编辑博客的文本格式 & 装饰

阅读量：6247 次

发布时间：2019-06-22

本文共 5810 字，大约阅读时间需要 19 分钟。

参考：

一、文字周围带框框

插入一个代码，要折叠式，如下图所示：
```
史蒂夫
```
示例

选中“示例”，将其拷贝，然后黏贴，就有如下的效果：
示例

接下来就可以进行自由编辑了！

直接通过添加代码然后选中“行内代码”即可
示例

二、文字、方框、颜色、阴影

1. 浅绿色背景框

博客园

在“页面定制CSS代码”中加入如下描述代码

/* 黑框绿景→黑框橙景 */div.fangkuang{  background-color: #66ff66;  border: black solid thin;  padding:15px 15px 15px 15px;  box-shadow: 2px 2px 3px #888888;  border-width:1px;  height:20px;  width:100px;  /* Firefox */  display:-moz-box;  -moz-box-pack:center;  -moz-box-align:center;  cursor: pointer;}div.fangkuang:hover{  text-decoration: none;  background-color: #FFA500;}

博客编写的时候，切换到 HTML 形式，填写如下代码
在当前窗口打开链接：
```
       
        博客园
       
```
在新窗口打开链接：
```
       
        博客园
       
```
注意：为了使上面的代码能够将方块在水平方向显示，将<div>改成了<span>，其他没有变化！
也可以将 CSS 代码写入到 HTML 中，只需将其加入到 <style></style> 中即可，如下所示：
```
       
        你好！
       
```

2. 虚线框 & 阴影框

CSS 代码实现：

上面：利用 id="green_channel"

#green_channel {  padding: 15px;  border: 1px dashed #000;  width: 350px;  text-align: center;}

下面：

.bg_gray { background-color: #FFF; border: black solid thin; padding:15px; box-shadow: 0px 0px 2px #888888; border-width:0px;  width: 350px;}

PART II：复合形式

PowerShell 中文博客 Mater-PowerShell 通过 Win-PS 编写脚本 Win-PS 官网

HTML 代码实现：

PowerShell 中文博客 Mater-PowerShell 通过 Win-PS 编写脚本 Win-PS 官网

3. 标题（示例如下所示）

--测试--

CSS 代码：

.title_h1 {    background-color: #AADDFF;    color: #0000;     font-weight: bold;    padding: 8px 15px;    margin: 0px -11px;    border-top: 1px solid #333;    border-bottom: 1px solid #333;    position:absolute,zIndex:9999;}

HTML 代码：


       
        一、标题栏的设计

4. 标题（示例如下所示）

--测试--

CSS 代码：

/* 钩挂标题栏 */.title_hh {    background:-moz-linear-gradient(top,#F2FBFD,#E5EFF0);    color: #000;     font-weight: bold;    padding: 10px 25px;/* 向左移动 */    margin: 0px -20px;    box-shadow: 2px 2px 4px #888888;    border: 1px solid #CBD9DB;/* 最前显示 */    position:absolute,zIndex:9999;} /* 箭头 */.arrow-left { width:0;  height:0; margin: 0px -19px; border-bottom:9px solid transparent; border-right:9px solid #78979C; position:absolute,zIndex:9998;}

HTML 代码：
```
       
        --测试--
       
       
```

5. 标题（示例如下所示）

--测试--

CSS 代码：

/* 二级标题栏 */.title_hh2 {    background:-moz-linear-gradient(top,#FEF0CD,#FDD9B7);    color: #000;     padding: 5px 25px;    margin: 5px -10px 5px -10px;    box-shadow: 1px 1px 2px #888888;    border: 1px solid #FDD9B7;}

HTML 代码：
```
        
         --测试--
        
```

6. 四周蓝色荧光

博客园

CSS 代码实现：

/* 蓝色荧光绿景→黑框橙景 */.fk_blue{  background-color: #66ff66;  border: black solid thin;  padding:10px 10px 10px 10px;    border-width:1px;  height:20px;  width:100px;  box-shadow: 0px 0px 5px #00F;  /* Firefox */  display:-moz-box;  -moz-box-pack:center;  -moz-box-align:center;   cursor: pointer;} .fk_blue:hover{  text-decoration: none;  background-color: #FFA500; }

7. 大部分字体变细

CSS 代码实现：

/* 超链接不加粗 */A:link { font-weight: 300; TEXT-DECORATION: none}A:visited { font-weight: 300; TEXT-DECORATION: none}A:hover { font-weight: 300; text-decoration: underline;}A:active { font-weight: 300;  text-decoration: underline;}a,td,span,div,li,input,code { font-weight: 300;}

三、挂件

参考：

1. Pattern-1

2. Pattern-2

3. Pattern-3

4. Pattern-4

5. Pattern-5

6. Pattern-6

7. Pattern-7

Pattern-1

Pattern-2

Pattern-3

Pattern-4

Pattern-5

Pattern-6

Pattern-7

8. 绿色光晕

9. 放大版绿色光晕

From Jan 28, 2016

代码：

8. 绿色光晕

9. 放大版绿色光晕

From Jan 28, 2016

参考：

1. Dog

2. Newton’s Cradle

3. Hamster

4. Spider

5. Ball Clock

6. Pendulum Clock

7. Penguins

代码：

1. Dog

2. Newton’s Cradle

3. Hamster

4. Spider

5. Ball Clock

6. Pendulum Clock

7. Penguins

页面定制CSS代码（早期）


     
     div.outset {  border: red solid thin;  padding:10px 10px 10px 10px;  border-radius:10px;  -moz-border-radius:10px; /* Old Firefox */}

博客侧边栏公告（支持HTML代码）

使用编辑器（早期）


     
     
      这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~我的淘宝小店
（销售锁屏壁纸）
    Hello, welcome to my online store.
You Can Follow Me !!!
      <
       <新浪微博>
        >
       
      <
       <人人网>
        >
         <
      <墙外联络方式>
       >

分项代码

超萌小老鼠


        这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~

人体时钟
```
       
       
        
       
       
```

访问统计
```
       
       
        
       
```

微博 & 人人网


       
You Can Follow Me !!!
<
        <新浪微博>
         >
        
       <
        <人人网>
         >

国外社交媒体


        <<其他联络方式>>

侧边分享按钮

回到顶部悬浮
```
       
       
        
       
```

全部


       
       
        这是我的小宠物 Saki~，点击上面的图片就能给它喂食儿了~
       
       
       
        
       
       
       
       
        
       
       
You Can Follow Me !!!
<
        <新浪微博>
         >
        
       <
        <人人网>
         >
        
  
       <
        <其他联络方式>
         >

四、签名档

参考：

1. 普通版

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

代码：

作者：McDelfino

出处：http://www.cnblogs.com/alex-bn-lee/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

2. 头像版

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

代码：


     
      
       
      
      
        作者：
       McDelfino 
       
出处：
       http://www.cnblogs.com/alex-bn-lee/
       
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

3. 添加其他内容版

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，谢谢！

小广告^_^喜欢博主的内容可以扫红包哦，也可以直接支付哦（不会扣您的钱），谢谢支持！

代码：


     
      
       
      
      
        作者：
       McDelfino 
       
出处：
       http://www.cnblogs.com/alex-bn-lee/
       
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，谢谢！
       
       
        小广告^_^喜欢博主的内容可以扫红包哦，也可以直接支付哦（不会扣您的钱），谢谢支持！