边学边改blog--把标题栏变成3列的格式

本打算昨天写的东西，一拖就拖到今天了。。。昨天在《边学边改blog--简单修改标题栏》一文里写了要把标题栏变成3列的格式。HATA就接着昨天的话题说吧。记得在简单修改标题栏的步骤1中
HATA找出了标题栏的代码

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

并修改为：

<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

HATA现在要继续在上面做修改。
1，首先，如果你在标题栏里挂上了除标题外其他的widget（标题栏的代码会多出其他的widget），先把它们安置到其他的位置，例如尾栏或者边栏上。以免在修改标题的时候把这些widget删掉了。

2，修改完毕后，查看一下标题栏的代码，是不是恢复到简单修改标题栏的步骤1中修改后的代码一样：

<div id="header-wrapper">
<b:section class="header" id="header" showaddelement="yes">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

现在HATA要再次修改这段代码增加一些内容：

<div id='header-wrapper'>
<div class='header' id='header'>
<b:section id='header1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='博客名称' type='Header'/>
</b:section>
<b:section id='header2' showaddelement='yes'/>
<b:section id='header3' showaddelement='yes'/>
</div>
</div>

看清楚大小写哦，这样就在header里面多加了两个section，然后还要在css区上添加一些代码才能正常显示，因为这3个section是同一列的关系，别急着保存，我们先下拉一下模板，看一看下一段是不是<div id='content-wrapper'>,要是不是content-wrapper的话，就把它的id名字记下来，一会要用上。现在可以保存了。
再看一看布局-》页面元素 里，是不是变成这样了：是的话就可以继续下一步。
3，记得在简单修改标题栏的步骤3中放的代码吗？HATA把自己加的代码都放在两个/* ---添加--- */的里面，现在在/* ---添加--- */里加上这段代码：

#header1 {width:220;float:left;}/* ---HATA之前没有加上宽度width，ie的排版立刻乱了，ff确没有乱，可见ff是多么的优秀>. <，这里网要感谢一下NS兄的帮助--- */
#header2 {width:220;float:left;}
#header3 {float:right;}/* ---以上3句就是把步骤2里的3个session变成横向关系的关键语句--- */
#content-wrapper {clear:both;}/* ---这个是消除浮动--- */
#header {height:60px;} /* ---70px是我标题栏背景的高度，不加这一句的话在某些浏览器里会排版出错（忘记是ie还是ff了）--- */

记得HATA在步骤中叫你记下的id吗？就是用在消除浮动上面。把你记下的id替换掉content-wrapper字样吧。不使用消除浮动，浏览器的位置排版就会出错。HATA现在基本上是完成任务了。HATA现在挂个插件上去看看效果：


HATA之前因为blog在ie下显示错位的问题发表了的疑问已经得以解决了，在这里要感谢NS兄的帮助，谢谢。

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

边学边改blog--简单修改标题栏

记得HATA前几天曾经交待过在看css，今天HATA初试修改模板，目标是在原有的模板上修改标题栏的排版，使得标题栏可以横向并排3个widget，经过一番调试后终于成功了，暂时先说说在标题栏里加上一个简陋的导航菜单。
方法很简单：
1，进入布局-》修改HTML，把修改模板里面的代码备份一下，然后在修改模板里查找<div id="header-wrapper">
找到类似以下代码：

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="博客名称" type="Header">
</b:section>
</div>

在这里，修改showaddelement值为"yes"，删除maxwidgets="1"字段。

2，回到布局-》页面元素看看效果，头部分是不是增加了"添加小工具"按钮，这就是HATA第一部分修改的目的了，然后我们点击“添加小工具”，添加一个名为"HTML/JavaScript"的widget，摆放到标题widget的下方（注意，不知道其他的官方模板结构和HATA用的一不一样，HATA这里有可能会把widget拉到crosscol-wrapper层里，就是整个标题栏的下方，再拉多一次调整一下吧，效果应该是在标题栏里面，刚好在标题的下方）
在widget里面输入

<ul id="headnav">
<li><a href="链接地址1" target="blank">名称1</a></li>
<li><a href="链接地址2" target="blank">名称2</a></li>
</ul>

li部分可以输入若干行，如果想加入图片的话可以把名称部分修改为：<img alt="叙述" src="图片地址"/>，到这里，我们就做好一个竖式的导航菜单了。
3，把竖式的导航菜单变成横式，方法很简单，我们先回到修改模块的版面，找到里面的css区（就是有放着类似#header，.post这些字样的地方），加入以下代码：

/* ---添加--- */
#headnav {margin:0px; padding:0px;}/* ---margin是修正高度位置--- */
#headnav img {border:0;}
#headnav li {display:inline;/* ---这个是把竖式变横式的关键--- */
margin-right:5px;/* ---这个是间距--- */
}
/* ---添加--- */

可以把margin写成 margin:0px 0px 0px 0px;分别代表上右下左的位移。这部分我是借用了NS兄的代码，用div写横向列表一般都是这样写的。
得出的效果图：

一些想法：
但是HATA这几天看过很多的blog，他们都喜欢把导航菜单放到标题栏的最右边，与标题字样对称。难道要使用属性margin把列表强行位移到最右面吗？
这也是其中一个方法，但是HATA觉得这个方法有点自欺欺人了，要是把头部分（标题栏的位置）改为可以挂放两列或者3列的widget，把导航菜单放到最后一列不就把问题解决了吗？HATA第一次去NS兄的blog时就对这个长草了，可惜一直不能把NS兄提供的模板导入成功，正好这两天把css的基础知识一口气看完了，瞎弄了半天终于搞出来了，方法同样不难。

HATA这里先休息下，忙其他的事情。稍后把方法写出来，大约2～3步就能搞定它。

写好了，边学边改blog--简单修改标题栏

原创文章如转载，请注明：转载自HATA菜谱

阅读全文...

广州“瘦肉精”事件

自三鹿，蒙牛OMP事件后，日前又出现了食品问题。
这几天，瘦肉精事件把广州的新闻炒得沸沸扬扬。据新华网广州２月２１日电（记者 车晓蕙）１９日开始出现的广州市“瘦肉精”中毒事件目前已得到有效控制，发病人数逐日下降，２１日已无新的发病报告。自１８日以来，广州“瘦肉精”中毒发病人数逐日下降，１８日发病人数最多，达４６人，１９日、２０日分别为２１人、３人，事件累计发病人数７０人。毒猪源头已查明。这是广州市食品安全办公室２１日２２时发布的消息。

广州电视台新闻报道（视频）

什么是瘦肉精
瘦肉精是一类动物用药，有数种药物被称为瘦肉精，例如莱克多巴胺（Ractopamine）及克伦特罗（Clenbuterol）等。属于乙类促效剂（β-agonist），将瘦肉精添加于饲料中，可以增加动物的瘦肉量、减少饲料使用、使肉品提早上市、降低成本。

猪在吃了瘦肉精之后，瘦肉精主要积蓄在猪肝、猪肺等处。如果不依照规定使用使得残余量过高，食用大量的猪肝、猪肺后—就算是熟食也一样，可能会立即出现恶心、头晕、肌肉颤抖、心悸、血压上升等中毒症状。
起源

据广州市食品安全办公室介绍，目前已查明导致本次“瘦肉精”中毒的生猪由生猪个体经营者分别收购自湖南省冷水江市、涟源市、新化县、衡阳县，通过天河牲畜批发市场进入广州市天河、增城的肉菜市场进行售卖。

本次“瘦肉精”中毒事件发生的原因是由于外省个别不良生猪养殖户使用违禁“瘦肉精”喂养生猪，生猪经销者伪造检疫合格证逃避检验，导致含“瘦肉精”残留的猪肉流入广州市零售市场，最终导致大范围的中毒事件。

有业内人士透露，生猪出栏时的证照很容易地就可买到赝品，“5元一张证，5角一个耳标。”

政府对此重视

广州市政府在次此事件中非常重视，“瘦肉精”中毒事件发生后，广州市高度重视，迅速部署有关职能部门开展调查处理工作，坚决堵住“瘦肉精”生猪进入广州市场。

目前，天河区政府已对天河牲畜市场采取严密的监控措施，工商部门已对广州市三大生猪批发市场采 取２４小时驻场管理措施，配合驻场农业部门开展检测和生猪来源控制工作，特别加强对来自湖南冷水江市、涟源市、新化县、衡阳县的生猪的重点监控，严禁不合 格猪肉进入广州生猪交易市场销售。公安机关对涉案的６名生猪经营者进行传讯，对涉嫌生产、销售不符合卫生标准食品的３名嫌疑人呈批刑事拘留，并对其他涉案 人员进行积极追踪调查。

工商、农业、卫生等职能部门对全市所有生猪批发市场、生猪定点屠宰场、农贸市场、肉菜市场、超市、肉品经营店档、流动熟食店、学校周边食杂 店、学校及幼儿园集体食堂、餐饮经营单位等开展地毯式清查工作，同时要求各农贸市场、肉菜市场和超市及餐饮经营业户开展自检工作，发现问题猪肉及时送检。 截至２１日，全市共出动２３２６人次、食品检测车２５台次，检查生猪经营业户１６０个次、生猪定点屠宰场４６个次、农贸市场和肉菜市场８３１个次、猪肉经 营业户７４１１个次、学校周边食杂店和流动熟食店４０户次、餐饮经营单位和集体食堂９９９间次。

广州市各级畜牧兽医部门特别加强了对全市生猪批发市场、生猪定点屠宰场、各区养殖场及个体养殖户的生猪“瘦肉精”残留的监测，加派技术人员 驻场开展采样和监测。１８日以来，除了继续每年必须进行的例检外，共检测生猪２９６５头。对于检出“瘦肉精”阳性的生猪，每发现一头，立即销毁一头。

为了确保猪肉市场供应秩序的稳定，广州市经贸部门也加强了宏观调控准备，一旦出现猪肉供应紧缺的情况，立即可以组织一批来源可靠、质量可控的规模生猪养殖企业和基地优先供应广州市场，确保广州猪肉市场的供应稳定。

同作为一名广州市民，HATA觉得在这次事件中市政府处理得相当有效率，距事发短短3天就能查明“问题猪”的来源并进行处理和做好紧急措施。但同样值得我们深思的是，就凭一纸伪造的检疫合格证为何能让这批问题猪一路畅通无阻呢？相信市政府在日后还需要努力做好整治工作，特别是受市民担心的食物食品的标准和卫生的监管方面。

编辑自HATA菜谱

阅读全文...