在Codecademy学习HTML+CSS

Codecademy.com一个免费学习编程语言的网站,虽然界面的英文的,但是不妨碍使用。偶看花了三天时间学习了Web Fundamentals课程,一共12个单元,包括

  • HTML Basics — Introduction to HTML
  • Build Your Own Webpage — Introduction to HTML
  • HTML Basics II — HTML Structure: Using Lists
  • Social Networking Profile — HTML Structure: Using Lists
  • HTML Basics III — HTML Structure: Tables, Divs, and Spans
  • Clickable Photo Page — HTML Structure: Tables, Divs, and Spans
  • CSS: An Overview — Introduction to CSS
  • Design a Button for Your Website — Introduction to CSS
  • CSS Selectors — CSS Classes and IDs
  • Sorting Your Friends — CSS Classes and IDs
  • CSS Positioning — CSS Element Positioning
  • Build a Resume — CSS Element Positioning

codecademy-web-fundamentals

偶看在三天的学习中共获得21个勋章,160分。

勋章和分数

Codecademy中学习的知识应该算入门,让用户能够对一项编程语言有基本的了解,所见即所得的编程方式很给力,接下来偶看要学习Jquery。

萧涵主题模版将comments修改成评论

萧涵主题模版在标题右边默认显示评论是使用英文“comment”而不是使用,中文字“评论”。其实默认的也是可以的,如果要修改成“评论”的话,只需要进行如下修改:

需要修改的文件均在萧涵主题模版目录下,包括:archvie.php、author.php、category.php、index.php、search.php、single.php、tag.php找到代码

<span class="comments"><?php comments_popup_link('<em>0</em> Comments', '<em>1</em> Comment', '<em>%</em> Comments', 'Comments off'); ?></span>

修改成

<span class="comments"><?php comments_popup_link('<em>0</em> 评论', '<em>1</em> 评论', '<em>%</em> 评论', '评论关闭'); ?></span>

将“comments”修改成“评论”修改完成达到的效果对比

萧涵主题模版评论修改

偶看建立了关于萧涵主题修改交流的QQ群:已经解散,大家有问题可以在“问答板块”提问。,欢迎大家加入。

有更多关于萧涵主题需要修改的部分,请查看萧涵主题修改

萧涵主题的导航栏栏间距修改

如果您的wordpress博客栏目有很多个,而且都想显示在导航栏上,而且您使用的是萧涵主题,其他主题也是可以的,大同小异。

偶看介绍两种方法实现导航栏多放置几个栏目:

一、自定义栏目名称时使用简写,如果启用了“菜单”可以直接在菜单中修改,例如:wordpress简写成WP,那么无形中就可以多放置几个栏目了。

萧涵主题导航栏栏间距修改

二、修改模板下的CSS文件

 打开/wp-content/themes/xiaohan3/style.css,找到

#nav li a span{padding:0 14px;display:block;float:left;cursor:pointer;}

注意其中的一个数字14,您只需修改它即可缩短栏目的间距,例如修改成

#nav li a span{padding:0 8px;display:block;float:left;cursor:pointer;}

顺便介绍下padding,这是简写属性在一个声明中设置所有内边距属性。这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

萧涵主题的导航栏栏间距就修改完成了,您可以放置更多的栏目在导航栏上了。

点击查看萧涵主题修改全记录

偶看个人博客CSS修改


 

为了让网页排版更加美观,今天修改了网页的首行缩进,直接修改CSS文件,实现了全部的修改,但是,以前的文章有很多都是空了四格的,只要修改数据库。打开数据库,将“&nbsp;”全部替换为空,但是这样替换还有个问题,就是会留出空格。看来要一篇篇改了!

span.oblog_text { font-family: cursive; font-size: 13pt; word-spacing: 0; line-height: 150%; text-indent: 36; letter-spacing: 1pt; margin: 0 } .oblog_text a:link{ color:#FF0000; text-decoration:none} .oblog_text a:visited{color:#FFCC00; text-decoration:none;} .oblog_text a:hover {color:#FFCC00; text-decoration:underline;}