模版制作教程5

	模版制作教程5 然后是“我的分类”CSS样式的制作。 　　我说明一下，写CSS的习惯每个人都不一样，有的人喜欢先写大布局代码，然后是其他的代码，SNAKE喜欢按照顺序写，也就是从上到下的方式，下面就按照SNAKE喜欢的方式写。 　　在#head的类下面插入下面的代码： #head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */ float:left;  /* 内容居左，就是横向显示，LI标签默认是竖向显示。 */ margin:0;  /* 外边距，默认的不是0，所以我们要给它个值。 */ display:block;  /* 块级元素，必须有。这个比较难解释，书上是这么写的：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。汗~~ */ } #head li a{   /* HEAD LI标签内连接样式。 */ 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:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */ color:#333;   /* 拖过之颜色。 */ background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景，我们使用的图片和连接的背景图片是同一张，这样做的好处是节省带宽。要搞清楚位置，-26是从高位-26的地方开始显示图片，设计的时候要明白为什么这么做。 */ } 　　刷新页面，看看我们网页。效果如下图： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index3.htm 　　每个分类挨的比较近，我们不需要改，因为根据SNAKE的经验：OBLog3.0的分类，系统默认会分开一些。所以最终效果不是这样的。 5.3 LEFT的制作 　　左边是显示文章标题、内容等的位置，我们要根据图片的设计来完成它。 　　先是定位。因为LEFT在CONTENT层内，所以代码写在#CONTENT样式下面。因为内容比较重要，所以要做的细一些，我们连接字的色，拖过，访问后都要定义，区别文章内颜色。 #left { float: left; /* LEFT层在CONTENT中的位置，要居左。 */ width: 520px;  /* LEFT层宽度。 */ padding: 0px 20px 0px 20px;  /* 内边距，左右要留下间隙。 */ color: #333;  /* LEFT层内所有字体的颜色，SNAKE使用深灰色，比纯黑色要舒服。 */ text-align: justify;  /* LEFT层内容的文字两端对齐，这在OFFICE里面经常用到，是细节，不要也可以。 */ border-right: 1px dotted #999;  /* LEFT层右侧加一条灰色的虚线，LEFT和RIGHT的分界线。 */ } #left a{ color:#749A23;  /* LEFT层内连接字体色。 */ text-decoration: none;  /* LEFT层内连接字体去掉下划线。 */ } #left a:hover { color:#C1E27D;  /* LEFT层内鼠标拖过连接字体色。 */ text-decoration:underline;  /* LEFT层内鼠标拖过连接字带有下划线。 */ } #left a:visited { color:#666; /* LEFT层访问后的连接字体色。 */ } 　　在LEFT内随便打几个字，测试，效果如下： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index4.htm 　　打几个带有连接的字，并且分别测试：连接字体字体色，鼠标拖过连接字体色，访问后的连接字体色。 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index5.htm 5.4 公告栏 　　进展好快！已经到公告栏了！这个比较简单~先在模版页面LEFT层内新建一个公告栏的层，和LEFT一样，也要测试连接字体色等等。 　　现在的HTML如下： <link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"> <div id="head"></div> <div id="content"> <div id="left"> <!-- 下面的就是公告栏的层 --> <div id="placard">涡虫我草<a href="3">敌素活圣诞节</a>巴斯德看<a href="4">见发表苦不管</a>客观内<a href="7">可是地方</a>病感反对看见</div> </div> <div id="right"></div> </div> <div id="footer"></div> 　　我们开始定义公告栏的CSS： #placard { margin: 10px 10px 10px 10px;  /* 公告层外边距。 */ padding: 10px 5px; /* 公告层内边距。 */ color: #3A5014; /* 公告层内字体色。 */ background: #C1E27D url("placard.png") no-repeat top right;  /* 公告层内背景色，背景图，背景图从右上开始显示，不重复。就是哪个双引号。 */ border-top: 1px solid #666;  /* 公告层上面的灰黑色实线。 */ border-bottom: 1px solid #666;  /* 公告层下面的灰黑色实线。个人觉得上下各一条线比较有个性，当然也可以是灰黑色边框。 */ } #placard:first-letter {  /* 公告层内第一个字样式定义。 */ margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */ padding: 3px;  /* 公告层内第一个字的内边距。 */ font: 20px bold;  /* 公告层内第一个字的字体大小，粗体。 */ float: left;  /* 公告层内第一个字居左对齐，排版的人知道，至于为什么加你可以把这个样式属性去掉试试。 */ border : 1px dotted #fff;  /* 公告层内第一个字的边框，1象素，虚线（好象是虚点），线颜色。 */ } #placard p:first-letter {  /* 和上面的定义是一样的，但是这个段落的定义（注意多了个P），因为有的人在加公告的时候弄成段落格式的了，所以也需要定义一下。 */ margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */ padding: 3px;  /* 公告层内第一个字的内边距。 */ font: 20px bold;  /* 公告层内第一个字的字体大小，粗体。 */ float: left;  /* 公告层内第一个字居左对齐，排版的人知道，至于为什么加你可以把这个样式属性去掉试试。 */ border : 1px dotted #fff;  /* 公告层内第一个字的边框，1象素，虚线（好象是虚点），线颜色。 */ } #placard a{ color: #666;  /* 公告层内连接字体颜色。 */ } #placard a:hover { color: #698B23;  /* 公告层内连接字体鼠标拖过的颜色。 */ } 　　因为背景是浅绿色，所以我们不能使用LEFT的CSS定义了，需要另外定义。需要说明的是#placard:first-letter（#placard p:first-letter）属性要不要都行，只要您觉得漂亮。 　　完成效果图如下： 点击这里预览 http://skin.midicn.cn/jc/mbjc/htm/index6.htm