括号里面的别一起复制了 这个放顶栏里 [[a href="#side-bar" class="open-side"]] + ▼（这里放什么都可以，图片也行，到时候打开侧栏就要点它） [[/a]] 这个放侧栏里（如果要左边出来就把带有#side-bar的里面所有的right换成left） [[module css]] .open-side { top: 1.3em;（按钮的高度，要适配的话要自己改大小） right: 30px;（同上，但是是横向移动，要从左边打开就把right换成left） position: fixed; } #side-bar:target { display: block; right: 0; width: 50%;（这里可以改成你侧栏想要的宽度） z-index: 30; background-image:url('http://floatingcloud.wdfiles.com/local--files/test%3Acss/cover.png');（背景图片） background-size:contain;（背景大小，我设置的是覆盖整个侧栏） } #main-content{ margin-left:0px } #side-bar { position: fixed; top: 0; right: -35em; width: 17em; height: 100%; overflow-y: auto; z-index: 30; transition: right 0.5s } [[/module]] 如果要只有手机端用这个的话就按下面的做… 不要删之前的css！ 把所有css部分放在 @media (max-width: 1000px) { (这里) } 把第一个代码放 [[div class="nav-phone"]] (这里) [[/div]] [[/module]]

+ 写在前面：这个文章搬运自[http://floatingcloud.wikidot.com 云站] 原链接[http://floatingcloud.wikidot.com/blog:(数字) (标题)] ------

[!-- Css测试代码写下面(Css,Html只有保存后才会加载)--] [[module css]] [[/module]] [!-- Html测试代码写下面(Css,Html只有保存后才会加载)--] [[html]] [[/html]] [!-- 一下内容可以加但不能删--] [!-- Css测试代码写下面(Css只有保存后才会加载)--] [[module css]] [[/module]] [!-- 一下内容可以加但不能删--] + 常用语句模板列表(Css,Html只有保存后才会加载)(要回档回到77版) [[toc title="目录框模板"]] + 1级标题模板 ++ 2级标题模板 +++ 3级标题模板 ++++ 4级标题模板 +++++ 5级标题模板 ++++++ 6级标题模板 > 1级引用框模板 >> 2级引用框模板 >>> 3级引用框模板 >>>> 4级引用框模板 >>>>> 5级引用框模板 >>>>>> 6级引用框模板 [[tabview]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[tab 切换列表]] 模板 [[/tab]] [[/tabview]] 正常字体模板 **粗体模板** //斜体模板// --删除模板-- ------ 分割线模板 [# 链接模板] [[div]] div模板 [[/div]] [[collapsible show="+ 折叠块模板" hide="- 折叠块模板"]] 折叠内容模板 [[/collapsible]] ||~ 标题 || 内容 || 表格模板 || || cell-content || cell-content || cell-content || || cell-content || cell-content || cell-content ||