-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
.page a{
text-decoration:none;
border:1px solid #e8e8e8;
margin:5px;
padding:5px 10px;
}
.page a:link,.page a:visited{
color:#000;
}
.page a:hover,.page a:active{
background-color:red;
}
</style>
</head>
<body>
<!--在此制作页码的基本结构-->
<div class="page">
<a href="#">首页</a><a href="#"><</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">></a><a href="#">末页</a>
</div>
</body>
</html>
查看全部 -
未完成
查看全部 -
IE 兼容性问题：
list 中 在 a 之后添加 span 时，span 可能会错位
解决：
将 span 放在 a 之前，再 float:right
查看全部 -
焦点图实现方式：
JS/Flash/CSS/JQ
推荐使用 myFocus : https://github.com/koen301/myfocus
（Demo演示：https://logan70.github.io/myfocus/ ）
查看全部 -
所有em的背景图片均为num.gif，通过设置background-position属性来控制不同列表项显示不同的背景图片
查看全部 -
页面区域划分，自顶向下，逐步细化
查看全部 -
页面分区
查看全部 -
网页分块
查看全部 -
网页分块
查看全部 -
代码笔记
查看全部 -
*
{
margin:0;
padding:0;
font-size:12px;
font-family:"微软雅黑";
}
.topList
{
width:300px;
height:180px;
border:1px solid #E8E8E8;
margin:10px auto;
}
ul
{
padding:5px;
}
li
{
list-style-type:none;
height:30px;
}
em
{
width:20px;
height:16px;
background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat;
display:block;
text-align:center;
font-style:normal;
color:#333;
background-position:0 -16px;
float:left;
}
.top em
{
color:#FFF;
background-position:0 0;
}
p{
float:left;
}
a:link,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover,a:active{color:#b52725;text-decoration:underline;}
</style>
</head>
<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
</li>
</ul>
</div>
</body>
查看全部 -
我是好人，不用谢！
<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日——6月16号(17号公布获奖名单)
</p>
<p align="center">
<img src="images/news1.jpg" alt="活动内容" width="500" height="336">
</p>
<p>
<strong>活动内容：</strong>
活动内容结合时下流行的“三行体”来给父亲表达感谢之情。具体内容不限，可以是诗歌，散文，代码文等等，只要你有创意，真实的表达对夫妻的感情即可参与其中，具体的回复格式可参考示例。
</p>
<p> </p>
<p><strong>示例格式参考如下：</strong></p>
<p>爹地：</p>
<p>而在外已多日</p>
<p>请汇钱</p>
<p> </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>
查看全部 -
盒子中的文字垂直居中设置：
将文字盒子的 line-height 设置为文字外盒子的高度
查看全部 -
div 为块级结构，每个DIV默认独占一行，为了使两个DIV在一行显示，可设置float属性
查看全部 -
同一行中两个盒子的宽度不能超过总宽度之和，否则不能容纳两个盒子，会出现下面情况
查看全部
举报