威尼斯人线上娱乐

基于CSS3的网易原创核心,css3试行之图片轮播

7 7月 , 2019  

  在css3油然则生在此以前手风琴的服从一般都是经过js或然jquery写,无论是哪个种类艺术,都相比较繁琐,css3的连结:transition既简约又周密的兑现了这一功能!     demo图:

直白想把搜狐的宗旨不错改改,也不枉本身想当前端程序员的心。终于花了两日时间能够惩罚了一下博客园的样板,当!当!当!终于出炉了,得四角俱全写三遍博客记录一下。

一贯想把博客园的主旨可以改改,也不枉自身想当前端技术员的心。终于花了二日时间好好收拾了一晃搜狐的人之常情,当!当!当!终于出炉了,得美丽写二回博客记录一下。

  楼主喜欢追求视觉上的享用,虽常以捐躯质量不能够同盟为代价却也津津乐道。本文就通过三个个的demo演示来回顾领会下css3下的Transform,Transition和Animation。

威尼斯人线上娱乐 1

  • ### 向大拿致敬
  • ### 向大拿致敬

  本文需求贯彻效果与利益:(请用chrome打开

  关于css3transition这一属性的详解英特网有大多,不驾驭的童鞋能够搜一下~那些意义是透过hover来改造图片在鼠标步向和出入时的来得范围,正如繁琐的一项专业是一个钱打二14个结放大学一年级张图纸时别的图片平均占用突显区域的肥瘦和尚未松开任何一张图纸时(即起来状态)每种图片占用展现区域的肥瘦,为了优良立体效果,本例还设置了展示区域的影子和每张图片的阴影,还会有七个细节部分便是:css3未出现在此之前,大家设置威尼斯人线上娱乐 2其一成效是一定麻烦的,今后啊,大家只需求一条命令就可以减轻:background:rgba(0~255,0~255,0~255,0~1),那一个a就是安装光滑度用的,也等于opacity,rgb就是大家平日设置颜色用的。要求小心的地方大致正是这个,代码是超轻便的,相信你见到会很喜悦!

最初的愿景是探访二个拾贰分酷的博客Qing Wang
,特别喜欢这种轻便的品格,也想把天涯论坛的作风塑产生这一个样子。商讨了各样配色和背景图片,依旧认为原本笔者搭配的最舒服,只可以先没新意的萧规曹随了,如有版权难题,立即修改。依旧得抽空拍几张姿态高的肖像才成。

初志是来看一个极其酷的博客Qing Wang
,特别心爱这种简易的风格,也想把今日头条的风骨营变成这些样子。钻探了种种配色和背景图片,如故感觉原本作者搭配的最舒服,只好先没新意的模拟了,如有版权难点,立时修改。照旧得抽空拍几张姿态高的照片才成。

  1. 图片轮播
  2. 图形自动轮播

威尼斯人线上娱乐 3威尼斯人线上娱乐 4View
Code

  • ### 布局规划
  • ### 布局设计

Transform

  依照自家的精晓,transform和width、height、background同样,都以dom的属性,区别的是它是css3旗下的,异常厉害,能够对原先的dom成分进行运动、缩放、转动、扩大或拉伸,跟canvas上的一点api神似,这么说来transform好像能干些js本领干的事。

  transform分2D退换和3D调换,w3school中有很好的牵线和例子,具体请猛戳:CSS3
2D 调换  CSS3 3D 转变

  为了方便寻觅,笔者把w3school上的截图在这里保留一份:威尼斯人线上娱乐 5

威尼斯人线上娱乐 6

 1 <!DOCTYPE html>   2 <html lang="en">   3     <head>   4         <meta charset="utf-8" />   5         <title>css3 switchingImage</title>   6         <style>   7             *{margin:0;padding:0;border:0;}   8             ul,li{list-style-type:none;}   9             a{font-size:20px;color:#fff;font-weight:bold;line-height:50px;text-decoration:none;}  10             body{background:#319CC7;font-family: arial, verdana, tahoma;}  11             .out{width:760px;height:433px;margin:100px auto;overflow:hidden;  12                 box-shadow:0 0 10px 1px rgba(0,0,0,0.25);  13                 -o-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);  14                 -webkit-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);  15                 -moz-box-shadow:0 0 10px 1px rgba(0,0,0,0.25);  16             }  17             .in{width:2000px;}  18             .in li{position:relative;display:block;float:left;border:1px solid #BBBBBB;width:158px;  19                 box-shadow:0 0 25px 10px rgba(0,0,0,0.25);  20                 -o-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);  21                 -webkit-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);  22                 -moz-box-shadow:0 0 25px 10px rgba(0,0,0,0.25);  23                 transition:all  0.5s;  24                 -o-transition:all  0.5s;  25                 -webkit-transition:all  0.5s;  26                 -moz-transition:all  0.5s;  27             }  28             .in img{display:block;}  29             .attention{width:600px;height:50px;position:absolute;background:rgba(0,0,0,0.5);bottom:0;}  30             .attention a{display:block;cursor:pointer;}  31              ul:hover li{width:38px;}  32              ul li:hover{width:598px;}  33              .gray{position:absolute;z-index:-1;}  34         </style>  35     </head>  36   37     <body>  38         <div class='out'>  39             <ul class='in'>  40                 <li>  41                     <div class='attention'>  42                         <a href='###' title='马尔代夫'>马尔代夫</a>  43                     </div>  44                     <img src="images/switch1.jpg"/>  45                 </li>  46                 <li>  47                     <div class='attention'>  48                         <a href='###' title='惠州建筑'>惠州建筑</a>  49                           50                     </div>  51                     <img src="images/switch2.jpg"/>  52                 </li>  53                 <li>  54                     <div class='attention'>  55                         <a href='###' title='平寨水库'>平寨水库</a>  56                           57                     </div>  58                     <img src="images/switch3.jpg"/>  59                 </li>  60                 <li>  61                     <div class='attention'>  62                         <a href='###' title='瑞士风光'>瑞士风光</a>  63                           64                     </div>  65                     <img src="images/switch4.jpg"/>  66                 </li>  67                 <li>  68                     <div class='attention'>  69                         <a href='###' title='蓝色海洋'>蓝色海洋</a>  70                           71                     </div>  72                     <img src="images/switch5.jpg"/>  73                 </li>  74             </ul>  75         </div>  76     </body>  77 </html>

完全都是反正布局。侧边四个fixed的导航栏;侧边是能够向下滑动的主页容器,用于小说列表的来得、具体小说的展现。

一体化是反正搭架子。左侧多个fixed的导航栏;右边是能够向下滑动的主页容器,用于小说列表的来得、具体著作的突显。

Transition

  transition的演讲是对接,作者的了然是css之间的调换,但是那些转变十分厉害很平整,类似动画。举个栗子,一开首有些dom的类是classA,通过某种操作(比如被点击了)后成为了classB,若无transition,类之间的调换是快速的,机械般瞬间完成,可是有了transition,那便会是一个很减轻平滑的历程。

  大家经过demo来说解transition的行使方式。

  写好如下的html文件:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css">  </style>    <img src='http://hanzichi.github.io/img/img0.png' />

  展开来是特别简单的一张图,加上css:

img {    -webkit-transition: all 1s ease-in-out 0s;  }    img:hover {    -webkit-transform:       rotate(360deg)      scale(0.5, 0.5);      opacity: 0;  }

  效果请猛戳:transition调换 (ps:全部demo都没有做协作请用chrome伸开

  是或不是很简短?demo中,你只需设定好图片(img标签)原先的性质和hover后的习性,中间的调换进度全由transition解决!而transition加在有些成分下(demo的transition加在img标签下),就好像设置了壹个监听器,一旦该因素的属性值即就要爆发变化,就能活动物检疫查transition中的设定的天性,一旦发掘相匹配,则进行平整的连片。

  transition有4个属性,语法:transition: property duration
timing-function ***
delay*
 
基于CSS3的网易原创核心,css3试行之图片轮播。以前到后4个性格依次可明白成“过渡动画调换的本性”、“过渡开销时间”、“过渡进程的快慢变化”和“过渡开首前的等候时间”(暗中认可值:all
0 ease 0 前七个是必须的 后多少个可粗略)。

  如若不是持有属性都要拓展平整对接,或然各属性过渡的时间、速度等设置各有要求,能够把要对接的天性用逗号隔离,demo可写成:

img {    -webkit-transition:       -webkit-transform 1s ease-in-out 0s,      opacity 1s ease-in-out 1s;  }    img:hover {    -webkit-transform:       rotate(360deg)      scale(0.5, 0.5);      opacity: 0;  }

  假使非得把transition的多少个属性分开来写,能够如此:

img {    -webkit-transition-property: -webkit-transform, opacity;    -webkit-transition-duration: 1s;    -webkit-transition-timing-function: ease-in-out;    -webkit-transition-delay: 0s;  }  

  笔者把后八个本性放在一同只写了一个值(因为值同样),你也能够像property同样分开来写用逗号隔离。

  这里再介绍下timing-function的取值。六大取值:(依旧盗图w3cschool)

威尼斯人线上娱乐 7

威尼斯人线上娱乐 8

  • transition中的hover

  相信大家施行了transition后,对于transition到底是一贯写在选拔器上,依旧写在选择器的hover上会表示思疑,就好像效果等同。其实不然,假若对于一般的hover,也正是鼠标hover前后的经过是为逆进度的话,二种写法效果一样,不过只要hover前后效果差异样的话,transition须求各自加在选用器的hover前后,比方这一个demo:猛戳看demo

  也正是说假诺hover前后须求不均等的功用,就能够独家写多少个transition。例如鼠标hover时颜色渐入2s,hover后渐出5s->猛戳demo

   

  小结:一般transition应用在dom的class转变中,可先行写好机械的转变,然后增加过渡效果。

  由于无偿空间申请比较费心,所以一时还木有申请到,未有章程上传demo,请见谅!(本例中用到的图片大小是宽600高433的,风乐趣的童鞋能够依照这些尺寸弄几张图纸看一下效果与利益。)

  • 右侧固定导航栏
  • 右边固定导航栏

Animation

  Animation的演讲是卡通片,做实版的transition。

  假诺说transition能促成某个js效果,animation就更疑似js了。类似于写三个canvas特效,特效总共比方说多少日子,大家能鲜明在如几时候该出现什么的情状,而相继场景间的转变则统统由css3自家承担,而keyframes好比定义了一个js方法。

   重要利用在有个别成分要求张开连接的n次css调换。一个轻易易行的demo如下:animation动画

  我们在@keyframes
中创设动画时,请把它包扎到有个别选拔器,不然不会发出动画效果。

  通过规定至少以下两项 CSS3 动画属性,就能够将动画片绑定到采取器:

  1. 规定动画的称呼
  2. 明确动画的时长

demo代码:

威尼斯人线上娱乐 9威尼斯人线上娱乐 10

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <style type="text/css">    img {      /*-webkit-animation: myfirst 5s;*/    }        @-webkit-keyframes myfirst    {      0% {        -webkit-transform:           rotate(0deg)          scale(1, 1);        opacity: 1;      }            50% {        -webkit-transform:           rotate(360deg)          scale(0.5, 0.5);        opacity: 0.5;      }            100% {        -webkit-transform:           rotate(0deg)          scale(1, 1)          translate(300px, 200px);        opacity: 1;      }    }      img {      -webkit-animation: myfirst 5s linear 0s 1 alternate;      /*停在结束位置*/      -webkit-animation-fill-mode: forwards;    }  </style>    <img src='http://hanzichi.github.io/img/img0.png' />

View Code

更加多请猛戳 CSS3 动画


侧面导航栏固定,即便侧边内容赶过页面大小必要向下滚动时,导航栏也不会趁机滚动。实现格局是安装positon为fixed,生成相对定位的成分,相对于浏览器窗口实行一定。
要素的地方通过 “left”, “top”, “right” 以及
“bottom”属性进行规定,私下认可伊始定位是top=0,left=0。宽度为百分之二十,也正是占页面包车型地铁的肆分三。

右侧导航栏固定,固然左侧内容超越页面大小需求向下滚动时,导航栏也不会趁机滚动。落成方式是安装positon为fixed,生成相对定位的因素,相对于浏览器窗口实行定点。
要素的地点通过 “left”, “top”, “right” 以及
“bottom”属性进行规定,暗许早先定位是top=0,left=0。宽度为百分之三十三,也便是占页面包车型大巴的肆分之一。

具体运用:图片轮播

  类似利用可先写好无连接的代码,然后再在class调换之间增添transition。

  该demo(图片自动轮播)和transition有关的中坚代码就几行,而js只是简单的对成分的class举办赋值,动画进度全由css3做到!

img {    position: absolute;    -webkit-transition: all 2s ease-out;  }    .disappear {    opacity: 0;  }    .show {    opacity: 1;  }  

  当img的class从show转变到disappear或许从disappear转变来show时(img标签下的class调换),就能够进行transition设置的联网动画。

  另三个demo的落到实处也差不离,风乐趣的能够参照源码:源码请猛戳

    font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif";
    position: fixed;
    height: 100%;
    width: 30%;    
    background: url(images/1.jpg) no-repeat;
    box-shadow: 2px 2px 1px #888888;
 font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif";  position: fixed;  height: 100%;  width: 30%;      background: url(images/1.jpg) no-repeat;  box-shadow: 2px 2px 1px #888888;

总结

  总的来讲,transform只是为dom增加部分天性,而一旦搭配transition大概animation则能成就部分动画效果,笔者认为其实应用非常多的应当依然transition,可相当伪类大概click等事件。

  楼主对以上的敞亮不深,如有出入,还请建议。

  如需驾驭越多,能够参照那篇 CSS3 Transitions,
Transforms和Animation使用简单介绍与运用显示


  • 右边手主页容器
  • 左边主页容器

由于是反正布局,很轻松想到用float属性完毕。可是导航栏已经安装position:fixed,右侧的主页容器尽管设置float:left,也会”无视”左侧的导航栏,覆盖掉它。化解办法是给左边的主页容器设置三个侧边的margin,大小也为20%,为左侧的领航栏留出地点。

是因为是反正布局,很轻易想到用float属性完毕。可是导航栏已经安装position:fixed,侧面的主页容器即便设置float:left,也会”无视”右边的导航栏,覆盖掉它。解决办法是给左边的主页容器设置二个右侧的margin,大小也为六成,为左侧的导航栏留出地点。

    float:left;
    margin-left: 30%;
    width: 60%;
    height: 100%;
    min-width: 950px;
    text-align: left;
    padding: 5% 5.7% 7% 4%;
 float:left;  margin-left: 30%;  width: 60%;  height: 100%;  min-width: 950px;  text-align: left;  padding: 5% 5.7% 7% 4%;
  • “阉割”侧边栏
  • “阉割”侧边栏

威尼斯人线上娱乐 11

威尼斯人线上娱乐 12

如上海教室所示,官方的腾讯网模板都有侧边栏那些div,在主页容器内部。可是思考到即使步入左侧栏会使一切布局很挤,索性全体去掉,追求极简的风骨,办法相当粗略,设置display:none就可以。

如上海教室所示,官方的新浪模板都有左侧栏那些div,在主页容器内部。不过思索到即便参预左侧栏会使一切布局很挤,索性全体去掉,追求极简的作风,办法异常粗略,设置display:none即可。

  • ### 导航细节 – css3动画
  • ### 导航细节 – css3动画片

布局设置好了随后,给bloglogo和导航栏增加一点小动画。

布局设置好了未来,给bloglogo和导航栏加多一点小动画。

威尼斯人线上娱乐 13

威尼斯人线上娱乐 14

鼠标悬停在“smoothLily”上会有二个拓宽,变亮的效应。选择css3的transform和transition完毕。

鼠标悬停在“smoothLily”上会有叁个加大,变亮的成效。接纳css3的transform和transition达成。

transform属性的浏览器接济情形

transform属性的浏览器辅助意况

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 帮衬代表的 -ms-transform 属性(仅适用于 2D
调换)。
Safari 和 Chrome 扶助代表的 -webkit-transform 属性(3D 和 2D
转变)。
Opera 只支持 2D 转换。

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 援救代表的 -ms-transform 属性(仅适用于 2D
转变)。
Safari 和 Chrome 帮忙代表的 -webkit-transform 属性(3D 和 2D
转变)。
Opera 只支持 2D 转换。

在本例中,设置tranfrom:scale(1.02),就能够落成放大功用。不过借使独有放大作用,当鼠标悬停上去时,logo直接放大,未有松手的历程,效果不好。用transition属性增多“补间动画”。将初阶颜色折射率设置为0.85,悬停动作后的发光度为1,达成变亮的效用。

在本例中,设置tranfrom:scale(1.02),就可以完成放大效应。可是假设独有放大成效,当鼠标悬停上去时,logo直接放大,未有放手的历程,效果不佳。用transition属性增添“补间动画”。将起始颜色折射率设置为0.85,悬停动作后的折射率为1,完成变亮的效果。

transition属性的浏览器辅助意况

transition属性的浏览器帮助意况

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition
属性。
Safari 支持代表的 -webkit-transition 属性。
讲明:Internet Explorer 9 以及更早版本的浏览器不匡助 transition 属性。

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition
属性。
Safari 支持代表的 -webkit-transition 属性。
疏解:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

代码如下

代码如下

h1 {
    font-size: 320%;
    font-weight: bolder;
    line-height: 2em;   
    padding-top: 50%;
    width: 100%;
    text-align: center;
    transition:0.3s ease-out;
    -webkit-transition:0.3s ease-out;
    -o-transition:0.3s ease-out;
    -moz-transition:0.3s ease-out;
}

h1:hover{
    transform: scale(1.02);
    -ms-transform: scale(1.02);
    -webkit-transform:scale(1.02);
    -moz-transform:scale(1.02);
    -o-transform:scale(1.02);
}
h1 {  font-size: 320%;  font-weight: bolder;  line-height: 2em;   padding-top: 50%;  width: 100%;  text-align: center;  transition:0.3s ease-out;  -webkit-transition:0.3s ease-out;  -o-transition:0.3s ease-out;  -moz-transition:0.3s ease-out; }  h1:hover{  transform: scale(1.02);     -ms-transform: scale(1.02);  -webkit-transform:scale(1.02);  -moz-transform:scale(1.02);  -o-transform:scale(1.02); }

变亮效果

变亮效果

 h1 a.headermaintitle{
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

 h1 a.headermaintitle:hover{
    color: rgba(255,255,255,1);
    text-decoration: none;

}
 h1 a.headermaintitle{  color: rgba(255,255,255,0.85);  text-decoration: none;  text-shadow: 0 1px 1px rgba(0,0,0,0.4); }   h1 a.headermaintitle:hover{  color: rgba(255,255,255,1);  text-decoration: none;  }

专注transition属性加在标签的始发状态上。

在意transition属性加在标签的伊始状态上。

  • ### 导航细节 – 阴影
  • ### 导航细节 – 阴影

透过设置text-shadow和box-shadow属性给blogLogo和一切左边导航栏加影子。

经过设置text-shadow和box-shadow属性给blogLogo和万事侧面导航栏加影子。

text-shadow

text-shadow

负有主流浏览器都辅助 text-shadow 属性。
评释:Internet Explorer 9 以及更早版本的浏览器不帮忙 text-shadow
属性。

具备主流浏览器都帮衬 text-shadow 属性。
表明:Internet Explorer 9 以及更早版本的浏览器不帮忙 text-shadow
属性。

    color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
 color: rgba(255,255,255,0.85);  text-decoration: none;  text-shadow: 0 1px 1px rgba(0,0,0,0.4);

box-shadow

box-shadow

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow
属性。

IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow
属性。

header {
    font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif";
    position: fixed;
    height: 100%;
    width: 30%;    
    background: url(images/1.jpg) no-repeat;
    box-shadow: 2px 2px 1px #888888;
}
header {  font-family: "verdana","Arial","微软雅黑", "Helvetica", "sans-serif";  position: fixed;  height: 100%;  width: 30%;      background: url(images/1.jpg) no-repeat;  box-shadow: 2px 2px 1px #888888; }
  • ### 导航背景 – 图片遮罩
  • ### 导航背景 – 图片遮罩

村生泊长导航栏的图片为:
威尼斯人线上娱乐 15

原有导航栏的图片为:
威尼斯人线上娱乐 16

当今效果与利益:
威尼斯人线上娱乐 17

后天效劳:
威尼斯人线上娱乐 18

威尼斯人线上娱乐 ,拍卖措施是在导航栏背景上加一个div,大小和导航栏同样,况兼带有导航栏的源委。给那些div设置渐变的半透明背景,不只能够给原来的图形背景加四个遮罩。

管理办法是在导航栏背景上加二个div,大小和导航栏同样,而且包涵导航栏的源委。给那个div设置渐变的半透明背景,不仅能够给原来的图纸背景加八个遮罩。

.header-cover{
    height: 100%;
background-color: rgba(61,66,96,0.6);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,rgba(61,66,96,0.6)),color-stop(100%,rgba(21,23,34,0.8)));
background-image: -webkit-linear-gradient(-410deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8));
background-image: linear-gradient(140deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8));
}
.header-cover{  height: 100%; background-color: rgba(61,66,96,0.6); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,rgba(61,66,96,0.6)),color-stop(100%,rgba(21,23,34,0.8))); background-image: -webkit-linear-gradient(-410deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8)); background-image: linear-gradient(140deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8)); }
  • ### 导航背景 – jQuery修改html结构
  • ### 导航背景 – jQuery修改html结构

幸好因为必要在导航div之内增多二个包裹导航内装有标签的div,用来设置图片渐变,要求修改html结构。可是腾讯网的html模板是不改变的,由此不得不通过jQuery实现div的增加。
留心:须要向乐乎管理员申请JS
权限。

幸好因为急需在导航div之内增多叁个封装导航内具有标签的div,用来安装图片渐变,需求修改html结构。然则天涯论坛的html模板是不改变的,由此只好通过jQuery落成div的拉长。
瞩目:供给向果壳网管理员申请JS
权限。

<scriptsrc="prettify.js"type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#blogTitle").next().andSelf().wrapAll('<div class="header-cover"></div>');
$("h3").css("margin-top","10px");
});
</script>
<scriptsrc="prettify.js"type="text/javascript"></script> <script> $(document).ready(function() { $("#blogTitle").next().andSelf().wrapAll('<div class="header-cover"></div>'); $("h3").css("margin-top","10px"); }); </script>
  • ### 导航按键 – 幽灵按键
  • ### 导航按键 – 幽灵按键

幽灵按键是近来很盛行的一类开关,多数壮烈上的网站都用那类开关。按键无背景,轻便线框暗暗表示开关的尺寸,只怕干脆未有边框。以按键上的文字申明按键作用,未有复杂的阴影、字体效果。

幽灵按键是近来很盛行的一类按键,非常多光辉上的网址都用这类开关。开关无背景,轻巧线框暗指开关的轻重,或许干脆未有边框。以按键上的文字注解按键成效,未有复杂的阴影、字体效果。

  • ### 后续

    博客的雏形已经产生,可是还可能有一部分不佳听的地方,留待未来优化。

  • 什么样把侧面栏增添进去,做到满足功能,布局舒服。

  • 代码部分的css效果不太精粹,想最后做成sublime text这种代码高亮效果。
  • 小说正文增加关键字高亮效果。
  • 在博客园商城公布模板。
  • ### 后续

    博客的雏形已经产生,可是还大概有一点不合意的地方,留待现在优化。

  • 哪些把左侧栏加多进去,做到满足功效,布局舒服。

  • 代码部分的css效果不太优良,想最终做成sublime
    text这种代码高亮效果。
  • 小说正文增多关键字高亮效果。
  • 在博客园市镇揭橥模板。

最终,祝我们2015.12.25圣诞快乐…^^

末段,祝咱们二零一五.12.25圣诞欢跃…^^



相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图