我是好人，不用谢！

<h1>【有奖活动，给父亲的三行书信】</h1>

<p>发布人：admin 发布时间：2014-6-1 浏览次数：123次</p>

<div class="list-box-newsContent">

<p>父亲的这个角色，给人的感觉就是，不善言辞，默默守护，为了你和这个家付出了很多很多，也许从前的你太过年少，说不出对父亲肉麻感谢;也许现在的你已为人父母，能切身体会得到父爱的伟大。那么，正直父亲节来临之际，对于深爱你的父亲，请勇敢的表达出，你对他的爱吧！</p>

<p>

<strong>活动题目：</strong>

<u>给父亲大人的三行书信</u>

</p>

<p>

<strong>活动时间：</strong>

6月6日&mdash;&mdash;6月16号(17号公布获奖名单)

</p>

<p align="center">

<img src="images/news1.jpg" alt="活动内容" width="500" height="336">

</p>

<p>

<strong>活动内容：</strong>

活动内容结合时下流行的&ldquo;三行体&rdquo;来给父亲表达感谢之情。具体内容不限，可以是诗歌，散文，代码文等等，只要你有创意，真实的表达对夫妻的感情即可参与其中，具体的回复格式可参考示例。

</p>

<p>&nbsp;</p>

<p><strong>示例格式参考如下：</strong></p>

<p>爹地：</p>

<p>而在外已多日</p>

<p>请汇钱</p>

<p>&nbsp;</p>

<p><strong>奖励：</strong>父亲专属(邮寄给自己的父亲)</p>

<p><strong>获奖名额：</strong>八名</p>

<p><strong>抽奖规则：</strong></p>

<p>最逗比奖:4名(ZOBO水烟壶)</p>

<p>最煽情奖:4名(崩腾剃须刀)</p>

<p>(注，可以不搬示例内容，否则视为无效回复)</p>

<p align="center">

<img src="images/news.jpg" alt="奖品展示" width="500" height="452">

</p>

<p><strong>活动规则：</strong></p>

<p>1、反慕课网注册用户均可参加</p>

<p>2、小伙伴提交格式需严格按照要求，任何违反版规的帖子都将按版规相关规定处理</p>

<p>3、小伙伴提交的内容，不得违反相关道德，法律规定</p>

<p>4、一个ID仅有一次中奖机会，不可重复中奖</p>

<p>5、所有文字类书写错误的问题，不计入有效的活动回帖范围</p>

<p>注：最终解释权归慕课网所有</p>

<h2>新闻中心</h2> <h1>[有奖活动] 给父亲的三行书信</h1> <p>发布人：Admin 发布时间：2014-08-01 浏览：5321次</p> <div class="list_box_newsContent"> <p>父亲这个角色，一直给人的印象都是不善言辞、默默守护。为了你和这个家付出了很多很多。也许从前的你太过年少，说不出对父亲的肉麻感谢，也许现在的你， 已为人父母，能切身体会得到父爱的伟大。那么，正值父亲节来临之际，对于深爱你的父亲，请勇敢的表达出你对他的爱吧</p> <p><strong>活动题目：</strong><u>给父亲的三行书信</u></p> <p><strong>活动时间：</strong>6月6日&mdash;&mdash;6月16日（17号公布获奖名单）</p> <p align="center"><img src="images/news1.jpg" width="500" height="336" alt="活动内容、" /></p> <p><strong>活动内容：</strong>活动内容结合时下流行的&ldquo;三行体&rdquo;来给父亲表示感谢之情。具体内容不限，可以是诗歌、散文、 代码等等，只要你能出其不意、真实的表达自己对父亲的感情即可参与其中。具体的回复形式参考示例！</p> <p>&nbsp;</p> <p><strong>示例格式参考如下：</strong></p> <p>爹地，</p> <p>儿在外多日，</p> <p>请汇钱！</p> <p>&nbsp;</p> <p><strong>奖励：</strong>父亲专属（邮寄给父亲的奖品）</p> <p><strong>获奖名额：</strong>8名</p>

1.下划线可以使用border-bottom或者自定义class来实现 2.float可以直接加在ul上面，加在li上还要调整html代码，而且反向调整也不太好 （建议用display:inline） 3.list-style可以直接定制三角形或者使用counter计数器，用图片不太好 4.去除a标签的默认事件，写成href='javascript:;'比较合理 5.宽高不建议写死，否则在多终端下表现糟糕 6. a:link超链接初始状态 a:visit超链接访问之后的状态 a:hover鼠标经过超链接的状态 a:active按下鼠标之后超链接的状态 7.利用js脚本文件添加“设为首页”，“加入收藏”的功能 8. 获取本页url:window.location 获取本页title:document.title

妈蛋搞了两个小时，还以为出bug了！T T

nav左部分独占一行的原因 ：

上面logo_left的img将logo_left的高度多撑开了4px，使得下面nav_left不能正确float：left。

至于为什么img会多撑开几个像素的空白：

img作为内联元素，会和文字一样具有行高和字号属性，默认对齐baseline.通过截图可以看到，nav部分实际高是83px>80px，溢出了。 

解决方案有： 以下四种（根据情况任选其一）： 

1、.logo加上overflow:hidden; 

2、.logo_left img 设置display:block; 

3、.logo_left img 设置vertical-align:middle/bottom/top 都可以；*

4、.logo_left 设置 font-size:0; *

*vertical-align：top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数（比如1.2）。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

作者：尤雨溪
链接：https://www.zhihu.com/question/21558138/answer/18615056
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<p><strong>获奖名额：</strong>8名</p> <p><strong>抽奖规则：</strong></p> <p>最逗比奖：4名（zobo水烟壶）</p> <p>最煽情奖：4名（奔腾剃须刀）</p> <p>（注：不可明搬示例内容，否则视为无效回复）</p> <p align="center"><img src="images/news2.jpg" width="500" height="452" alt="奖品展示" /></p> <p><strong>活动规则：</strong></p> <p>1.凡慕课网登录用户均可参加。</p> <p>2.小伙伴提交格式须严格按照活动要求，任何违反版规的帖子都将按版规相关规定处理。</p>

myFocus插件实现焦点图轮播效果 1.下载myFocus,拷贝js文件夹到项目，在html页面中引入必要的文件。 <script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script> <script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script> <link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/> 2. <div class="ad" id="picBox"><!--必须自定义的div,在css配置时只需配置这个id--> <div class="loading"><img src="" alt="图片加载中"/></div><!--使用myFocus,图片未加载完成前的提示图片配置即载入画面--> <div class="pic"><!--使用myFocus必须要定义的固定div--> <ul> <li><img src=""> <li><img src=""> <li><img src=""> </ul> </div> </div> 3.在script中配置myFocus如此： myFocus({ id:'picBox'}) 4.详细教程http://demo.jb51.net/js/myfocus/tutorials.html

由于 img （也就是慕课网那个 img ）把父块 div 撑大了 3px ，而父块 div 又是向左浮动 ，所以后面的元素继续 向左浮动的时候，就顶到了 img的父块div，所以没有向左顶 到最左边，而后面的导航条div因为长度太长，自然就跳到了下一行， 解决方法： 1、给 父块div 设置和 img 一样的高度，这里就是 height: 80px;如图，就可以了 2、给 img 设置 display: block; 3、给 img 设置 vertical-align: middle; 4、这个案例里具有特殊性，所以还有其他办法，比如，给后面的元素 加 clear:left; 原理就是后面元素往左浮动的时候直接放在 img 父块 div 的下面了，认为这个 img 把 div 撑大的几 px 是存在的 （这是和其他四种方法不一样的地方）； 5、给包含慕课网 img 父块 div 的整个大盒子 div 加上 overflow: hidden; 原理：就是隐藏 img 父块 div 溢出大盒子的部分； 当然我是推荐 前3种方法的，动的是元素本身，不大会对后续存在可能的影响；

设计技巧： 1、让元素在横向页面居中，可使用：margin:0 auto; 2、让列表文本垂直居中，可设置相等的高与行高，即：height:*px;line-height:*px;； 3、改变列表的项目标点，可使用list-style-img:url("图标地址");； 4、让列表显示在同一行，可使用：display:inline;； 5、让列表元素浮动，而又不改变列表顺序，可直接对整个列表（即<ul>或<ol>）设置浮动； 6、设置超链接样式默认样式，链接样式：“a:link”、“a:visited”，焦点样式：“a:hove”、“a:active”；

左右圆角边缘如果没有出现，注意检查一下元素的高度。 设置了float的元素，最好一并将width，height全设定好，不然有时可能会因为没有内容撑开盒子而导致盒子不见！ backgroud:url() no-repeat; 等同于background-image:url(); background:no-repeate; 1、IE不支持圆角样式，所以使用背景图片的方法来实现，且设置左、中、右浮动； 2、在盒子中有浮动元素时，当div没有内容时，div框架很可能会不显示出来，这时设置高度可以把div框架撑开 3、对于多个重复的样式时，可将其组合起来，仅写一个样式。 解决导航栏li标签错位问题： 解决1：不使用html5; 使用html5较早版本的doctype 解决2：在浮动之前清除浮动： .nav{clear:left;height:40px;}

盒子在页面中所占的宽度 计算公式=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距. 盒子在页面中所占的高度\ 计算公式=上边距+上边框+上填充+内容高度+下填充+下边框+下边距.

style标签内不能有<!-- -->的注释符 否则会把css的样式给注释掉

固定div内容长度过高，可用min-height:**px 属性把其div长度给撑开。 ie6浏览器不识别此代码，可加_height：**px来识别。 以下受影响版块可用清除浮动属性clear:both; 来控制。 如是双列并排的过高长度块，要同时设置最小高度属性，不然底部块会偏向未设置最小高度的一边。

浮动框脱离了普通的文档流

logo加overflow:hidden用来清除浮动，不加，nav_left处会出现问题

为什么我按照课程编的代码，发现nav_left的背景图片上去了没和和mid和right在一行