模版制作教程8--10

	模版制作教程8 2.最新日志 　　接下来是最新日志的样式定义，查看代码知道最新日志是使用UL标签的，而且和最新留言，最新回复一样使用UL标签。（其实他们每个都有单独的标签，可以进一步个性化~我们做简单的~~）这样的话我们就设计一个UL定义的层类就可以了。我们使用.sidebar标签类。 　　CSS代码如下： .sidebar ul{ /* 字体色 */ margin: 0 0 0 -5px;  /* 外边距 */ } .sidebar li a{  /* LI连接样式 */ padding: 0 0 0 20px; /* 内边距，左20px的距离。 */ color:#749A23;  /* 连接字体色，使用稍微有些深的绿颜色 */ background: url("liimage.png") no-repeat left top; /* 左边的小圆圈，是图片。本来LI属性自带圆圈这个设置，但是本地测试OK用做模版就不可以了。使用图片的话还可以改成别的小图标，设计灵活。 */ } .sidebar li a:hover{ /* 连接字鼠标拖过 */ padding: 0 0 0 20px;  /* 和上面的一样，也是左边内边距20px，这个不能省略。 */ color:#C1E27D;  /* 鼠标拖过时字体颜色，使用较浅的绿色，相对于上面的连接色，这样的话色彩变换比较柔和。 */ text-decoration:underline;  /* 鼠标拖过时有下划线，在英文网页里面连接一般都有下划线，但是汉字这样做就不好看了，要改。 */ } .sidebar li a:visited {  /* 连接访问后样式 */ text-decoration:underline; /* 有下划线 */ color:#060;  /* 更深的绿色，本来是要用更浅的色凋的，但是发现那样的话字就看不清了，使用灰色就不好看了~所以使用深色绿色。 */ } 　　由于“日志”,“回复”,“留言”是一样的,所以一个栏目测试OK,其他的就都解决了. 　　哈哈！又完成了！看效果！！！ 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index11.htm 3.登陆口 　　接下来是登陆窗口的定义，这个比较简单，开始的登陆表单是用表格做的所以定义表格，登陆后有个小菜单，查看代码得知这是个层，让它居中就可以了，思路是，表单和表格的样式设计。我们设计开始。 　　HTML代码是这样的：（就是居中） <div align="center">$show_login_$</div> 　　CSS代码： table {  /* 所有表格定义 */ font-size: 12px;  /* 字体12px */ } input {  /* 输入框文本字段的定义 */ background-color: #C1E27D; /* 背景色 */ border: 1px #333 solid;  /* 边框，1象素，灰黑色，实线。 */ font-size: 12px;  /* 字体12px */ color: #666; /* 字体色 */ } select { /* 列表框文本字段的定义 */ background-color: #C1E27D;  /* 背景色 */ border: 1px solid #333; /* 边框，1象素，灰黑色，实线。 */ font-size: 12px; /* 字体12px */ color: #666;  /* 字体色 */ } 　　登陆窗口测试不了，就不测试了。登陆口和“BLOG搜索”是一样的，都是表单。下面给个设计好的截图： 　　后面的BLOG信息，以及我的连接样式就不用设计了。前面已经打好基础了。 模版制作教程9 5.7 完成后的代码 　　OK！，现在，我们的模版已经设计完成了！现在把OBLOG提供的相应的代码复制到模版里面。需要做的就是把主模版和副模版分开。 　　主模版HTML代码：(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.) <link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"> <div id="head">$show_subject_l_$</div> <div id="content"> <div id="left"> $show_placard_$ $show_log_$ </div> <div id="right"> <div class="bigtitle">Calendar | 日　历</div> $show_calendar_$ <div class="bigtitle">New BLog | 日　志</div> <div class="sidebar">$show_newblog_$</div> <div class="bigtitle">New Reply | 回　复</div> <div class="sidebar">$show_comment_$</div> <div class="bigtitle">New message | 留　言</div> <div class="sidebar">$show_newmessage_$</div> <div class="bigtitle">User Login | 登　陆</div> <div align="center">$show_login_$</div> <div class="bigtitle">Search | 搜　索</div> $show_search_$ <div class="bigtitle">BLog Info | 信　息</div> $show_info_$ <div class="bigtitle">My Links | 收　藏</div> $show_links_$ </div> <br style="clear: both;"> </div> <div id="footer">$show_xml_$ &copy; $show_blogname_$  All rights reserved.</div> 　　副模版HTML代码：(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.) <div class="contenttitle">$show_topictxt_$</div> <div class="contenttime">$show_author_$ - BY - $show_addtime_$</div> $show_logtext_$ <div class="contentcomments">$show_more_$</div> 　　管理员进入OBLog3.0的后台把相应的代码复制进去就可以了。（可能你注意到主模版里面多了<br style="clear: both;">代码，是为了在FIREXFOX下显示的。现在先不管，反正模版代码就是这么多了，再改就是CSS的事情了。） 5.8  完成后的问题 　　以后，然后就是实际的测试了。问题当然发现不少，首先是BLOG主人回复那，问题如下图所示： 　　看代码知道这同样是表格，修改CSS填加如下代码： table p{ /* 表格内段落的定义，这里一般针对单个文章的“BLOG主人回复”设置 */ padding: 10px 10px 10px 10px;  /* 内边距 */ font-size: 12px;  /* 字体大小 */ color: #749A23;  /* 字体色，为了配合模版，使用绿色 */ border: 1px solid #C2C2C2;  /* 1px的边框。 */ } 看完成效果： 　　接下来的问题是这里：（其实这里并不重要，关键是一种改页面思路，要是明白了这点，这个模版的几乎任何地方都可以改。） 　　找到定义它的CSS属性，#oblog_edit层，还有它里面的这个类.oblog_Btn。 在CSS里面填加代码： #oblog_edit { /* 编辑窗口的定义。 */ background-color: #fff;  /* 背景色为白色，以前是灰色。 */ border: 0px  /* 边框为0，以前是1px，灰色。 */ } #oblog_edit .oblog_Btn { /* 加粗，斜体等小图的设置。 */ background-color: #fff; /* 背景为白色，原来是灰色。 */ } 　　完成效果如图： 　　看到了吧？其实有好多东西都可以自定义设置的。关键是我们得找到它的CSS定义名。至此，我们的模版已经设计完成了。多注意一些小的细节是很重要的，精致的东西才有人喜欢么~~~ 　　如果你只用IE浏览器，并且不在乎使用Mozilla Firefox 浏览器的观众的话，你的模版做到这里也就结束了，如果你在乎那5%的话就继续往下看。 六、在Mozilla Firefox下测试 　　好了，打开Mozilla Firefox，浏览我们已经设置好模版的BLOG。 　　…… 　　…… 　　…… 　　你是不是要问，这TM是我费尽辛苦做出来的模版吗？怎么变成这么个甩样了？这也是我为什么想抛弃那5%的原因了。为什么IE和FF就不能把CSS标准统一一下呢？害我折寿。我告诉你们，改成适合Mozilla Firefox的模版不亚于重新写一遍CSS……有心理准备了么？ 来吧. 6.1 如何兼容 　　首先明确我们的目的，目的很简单，就是如何在适合IE的情况下同样适合Mozilla Firefox？经过无数次的实验发现一种方法，那就是在CSS里面给不适合Mozilla Firefox的CSS标签再加一个标签，一个对应IE，而另外一个对应Mozilla Firefox。（这只是SNAKE发现的方法，如果谁要是还有更好的方法请告诉我，并且我提示你，这肯定不是最好的方法。） 　　我们看一个例子： * html #head {  /* 对应IE浏览器。 */ height: 200px; } #head { /* 对应Mozilla Firefox浏览器。 */ height: 100px; } 　　上面的代码中，* html #head是对应IE浏览器的，而#head是对应Mozilla Firefox浏览器的，这样我们就知道如何对应每个浏览器写CSS的方法了。 模版制作教程10 6.2 HEAD层的问题 　　然后看Mozilla Firefox中我们的BLOG，从上到下，把发现的问题一个一个的修改。 　　先是HEAD层。找到4个问题。 　　我们对原CSS做出修改，修改后代码如下： * html #head {  /* 对应IE的HEAD层。 */ height: 135px; /* HEAD的高。 */ width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */ padding:99px 0px 0px 18px;  /* HEAD的内边距，“我的分类”位置取决于此。 */ text-align: left;  /* HEAD层内所有所有属性居左。 */ background: url("header.png") no-repeat top center;  /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */ } #head {  /* 对应Mozilla Firefox浏览器的HEAD层。 */ width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */ margin: 0 auto;  /* HEAD层居中。 */ padding:105px 0px 30px 40px;  /* HEAD的内边距，“我的分类”位置取决于此。 */ text-align: left;  /* HEAD层内所有所有属性居左。 */ background: url("header.png") no-repeat top center;  /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */ } #head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */ float:left;  /* 内容居左，就是横向显示，LI标签默认是竖向显示。 */ margin:0;  /* 外边距，默认的不是0，所以我们要给它个值。 */ display:block; /* 块级元素，必须有。这个比较难解释，书上是这么写的：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。汗~~ */ } * html #head li a{   /* HEAD LI标签内连接样式。（对应IE浏览器） */ height: 26px;   /* 高度26。 */ padding:3px 5px 0px 20px;   /* 内边距，定义连接文字在LI标签的位置。 */ color: #666;   /* 连接色。 */ background:url("mainli.png") no-repeat left top;   /* 连接的背景，连接到我们设计的背景图片上去，从左上开始显示，并且不重复。 */ border: 1px solid #999;   /* 连接的边框，使用灰色。 */ } #head li a{   /* HEAD LI标签内连接样式。（对应Mozilla Firefox浏览器） */ padding:5px 5px 2px 20px;   /* 内边距，定义连接文字在LI标签的位置。 */ color: #666;   /* 连接色。 */ background:url("mainli.png") no-repeat left top;   /* 连接的背景，连接到我们设计的背景图片上去，从左上开始显示，并且不重复。 */ border: 1px solid #999;   /* 连接的边框，使用灰色。 */ } #head li a:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */ color:#333;   /* 拖过之颜色。 */ background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景，我们使用的图片和连接的背景图片是同一张，这样做的好处是节省带宽。要搞清楚位置，-26是从高位-26的地方开始显示图片，设计的时候要明白为什么这么做。 */ } 　　修改后的效果图： 　　仔细看上面的CSS代码，我们根据BLog在Mozilla Firefox浏览器中显示的结果判断出需要修改#head和#head li a这两个属性（你问我怎么判断出来的？根据原来的CSS代码，哪段代码定义什么，都写的很清楚了，仔细找的话不难，实在不行一个一个测试。），那么在原来的#head和#head li a前面都加上* html（前面提到过，加上* html就对应IE了），在他们的后面分别复制粘贴这两段代码，并且做出修改（只修改#head和#head li a）。 　　在Mozilla Firefox浏览器中，不推荐使用内边距（padding）的同时使用高（height）的定义，因为这样的话Mozilla Firefox会同时把内边距（padding）和高（height）算进去，这样表现出来的结果就比原来高上很多。所以我们去掉它的高（height），去掉高（height）的同时我们要对内边距（padding）进行修改，改成合适的象素为止，这就需要你如炬的眼睛了。 　　另外在IE中它本身是居中对齐的，但是在Mozilla Firefox中却居左显示（在800*600也许看不出什么区别，但是在1024*768 or 1204*1024的分辨率下却很让人不爽，现在液晶普及这么快，大分辨率是趋势 ），我们在#head层中新加入了margin: 0 auto;标签（0代表上下外边距，auto是自动，CSS布局居中都是这么做的），为的是使#head层在屏幕中居中显示。 吉吉只找到这10节,不知是否已做好.因为吉吉也是先收藏再慢慢学习.谁有再好学习教导就贴出来吧!吉吉太想做一个漂亮的模板了!