Skip navigation.

So Easy[@]Opera

原来如此简单

Posts tagged with "css"

当代网络设计的讲演稿

Hlb讨论了当代网络设计的一些内容
主要是介绍了XHTML
下面是pdf的投影文档
看看吧

留点感觉^^

第一日 http://hlb.yichi.org/blog/wp-content/files/wd_intro.pdf 入门介绍
第二日 http://hlb.yichi.org/blog/wp-content/files/wd_xhtml_css.pdf XHTML与CSS
附加 http://www.redmelon.net/tstme/box_model/ CSS模块示意图
...更多附加,我不打算一一列出来了,自己可以查看上面的那份pdf File
第三日 http://hlb.yichi.org/blog/wp-content/files/css_hack.pdf Hack部分

List與Font-Family

- 修改了字體

body { font-family:Tahoma,Helvetica,Sans-Serif;}


記得曾經炎在MSN Space中用的就是這套字體
蠻懷念的~
不過不知道實際效果如何(由於學校的字體支援不怎麼樣﹐無法看到效果)
回家後再看看

- 修改了List的方式

#content ul { margin-bottom:0px; padding-bottom:0px; width:100%; display:inline;}
#content li { margin:0 0 0 0; padding-bottom:0px;}


讓list模塊向下間距為"0",{margin-bottom:0px; padding-bottom:0px;}
display為inline
##默認下面display的值都是inline的﹐不過炎懶得每個都試過去(Padding, margin...)##
##就以格式化方式修改一下了##

li向下padding為"0"

Thumb之后的图片背景

,



在Thumb之后
图片背景自动被设置为黑色
并不是CSS的效果

唉...
没有办法改咯

.pre 的CSS

,

pre 
{ 
margin:0 0 0 0;
word-wrap:break-word;
display:inline; 
width:100%; 
panding:0 0 0 0; 
}


display,inline以后出现code模块内参差不齐的情况
所以这里又添加了"width:100%"

这样代码编写起来习惯很多了;写的时候是什么样子,Post也是什么样,多好^^

BlockQuote的修改

,

blockquote.bbquote, .post blockquote 
{
color:gray;
font-style:normal; 
display:inline;
margin:0; 
padding:5 10 5 33;
line-height:150%;
}


颜色: 黑色;
风格(粗体,斜体...): 一般;
显示:行嵌;
模块间距:0
填行间距:-top -bottom -left -right;
行距:150%

CSS 运用方式,四中

,

第一种:写在Head部分
<html>
  <head>
    <style type="text/css">
    body {
         background: #fff;
         color: #666;
         }
      h1 { 
         font: bold italic sans-serif;
         color: green;
         }
    </style>
  </head>
  <body>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
    <p>普通字。</p>
    <h1 style="color: red; background: green;">
     这个句子用大的、红色斜体字在绿色背景上显示,通用的h1样式在这里被取代了。
     </h1>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
  </body>
</html>


第二种:单一衔入式
<div style="color: red;">Word</div>


第三种:文档Link式
<LINK media=print href="/skins-1.5/common/commonPrint.css" type=text/css rel=stylesheet>


第四种:文档Import式
<STYLE type=text/css>@import "/skins-1.5/monobook/IE60Fixes.css";</STYLE>


想要测试可以尝试这个RealTimeEditor
更多CSS相关内容点击这里

css: display

,

link http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/display.asp

block Object is rendered as a block element.
none Object is not rendered.
inline Default. Object is rendered as an inline element sized by the dimensions of the content.
inline-block Object is rendered inline, but the contents of the object are rendered as a
block element. Adjacent inline elements are rendered on the same line, space permitting.
list-item Microsoft Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
table-header-group Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each page spanned by a table.
table-footer-group Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each page spanned by a table.

Opera Blog的CSS文件

,

Opera Blog的CSS文件有7份

account_white.css //登入后编辑页面的CSS
mobile_white.css //顾名思义,就是手机模式下的CSS
common.css // ratings, spotlights, login and signup
handheld.css //手机页面,这个是流量模式咯
main.css //主CSS,Opera现在提供的有11套模板,设置内容都在这里了
ie.css //特别为IE准备的,毕竟Opera也是浏览器供应商嘛,对CSS处理很细腻
user.css //用户的CSS文件

今天稍微弄了一些CSS
也差不多就这样了
蛮酷的吧^^

Update 10.14.2005
下面是本Space的CSS Link
<link rel="stylesheet" href="/community/css/users/account/account_white.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/account/mobile_white.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="/community/css/users/common.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" href="/community/css/users/9/handheld.css" type="text/css" media="handheld" />
<link rel="stylesheet" href="/community/css/users/9/main.css" type="text/css" media="screen,projection,print" />
<link rel="stylesheet" type="text/css" href="/community/css/users/9/ie.css" />
<link rel="stylesheet" href="http://files.myopera.com/炎藤/user.css" type="text/css" media="screen,projection,print" />

修改Opera的CSS

,

稍微修改了一些Opera的CSS
使用第九套翻案

-修改了Body的FontFamily
-修改了A:hover为灰色
-对BlockQuote颜色和fontSytle进行修改
-去除Sidewarp中的喇叭

body {
font-family:arial,'trebuchet ms',helvetica,sans-serif;
}
A:hover {background: #808080; }

BLOCKQUOTE.bbquote, .post blockquote 
{
color:#999999;
font-style:normal;
}

#sidewrap 
{
background:#161616
} 


下一步对Banner进行修改一下
就Okay啦^^

#top 
{
/*Perpage dropdown in albums
background:#ecd905 url(/image.jpg) bottom left repeat-x;
*/
}


先物色几个不错的Banner先
另外不知道是否可以利用CSS添加其他的内容
比如一些的模块

研究中...
知道的告诉我先^^

Google CSS for Opera Blog

, ,

本来有一个Google版本的OperaCSS
不知道放在哪里去了
在息乐园上看到的
...

不过还是算了
有空自己弄一个CSS吧--
November 2009
S M T W T F S
October 2009December 2009
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30