标签：CSS

在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;}