为了账号安全,请及时绑定邮箱和手机立即绑定

企业网站综合布局实战

zkpplpp PHP开发工程师
难度初级
时长 2小时55分
学习人数
综合评分9.73
544人评价 查看评价
9.8 内容实用
9.8 简洁易懂
9.6 逻辑清晰
为什么这么多人给第一个评论点赞。。。<li>的位置都错了
一直让我觉得神奇的一点是,老师尽管用了很多浮动布局,但显式的清楚浮动只有一处,而且效果完全一样。让习惯于浮动后就clearfix的我 惊呆了。另外在课程里学习了myfocus 轮播图库的使用,以及怎样设计代码以尽量实现代码的复用 加快开发,减少代码量。
<h1>【有奖活动】给父亲的三行书信</h1>

<p>发布人:Admin 发布时间:2014-08-01 浏览:5321次</p>

<div class="list_box_newscontent">

<p>
父亲这个角色,一直给人的印象都是不善言辞、默默守护。
为了你和这个家付出了很多很多。也许从前的你太过年少,
说不出对父亲的肉麻感谢,也许现在的你,已为人父母,能
切身体会得到父爱的伟大。那么,正值父亲节来临之际,对
于深爱你的父亲,请勇敢的表达出你对他的爱吧
</p>
这里要说下: 上面老师给的网址,或百度到的myfocus官网已经不能用了,因为这个项目原来是托管在googlecode上的,但是googlecode已经停止服务了(被github打败了)。

所以项目要到github上找,百度: myfocus github就能找到。 或者试下这个地址:

http://koen301.github.io/myfocus/
可以把myfocus看成一个造好的轮子, 除了没有html结构外与组件没有差别,关键只需要小白操作。
谢谢老师!
多谢各位的文字,为咋们节省了不少时间!
卧槽 这也太方便了。 其实只要引入myfocus.js库 把它的 pattern 开动就可以了

最新回答 / 破戒僧
而且图片不动啊!!!!!!!
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
.newsTitle{
font-size:18px;text-align:center;
}
.newsInfo{
font-size:14px;font:"微软雅黑";
color:#E8E8E8;
text-align:center;
border-bottom:1px solid #E8E8E8;
}
.newsContent{
line-height:25px;
font-size:14px;
text-indent:2em;
}
.newsContent p img{
display:block;
margin:0 auto;
}
(1)在线代码测试工具:http://www.lvyestudy.com/tools/run_code.aspx;
(2)在线调色板:http://www.lvyestudy.com/tools/color_picker.aspx;
(3)CSS3圆角生成器:http://www.lvyestudy.com/tools/border_radius.aspx
li{float:left;width:50px;
list-style-type:none;
text-align:center;
line-height:40px;
}
a:active,a:visited,a:hover,a:link{
text-decoration:none;
}
a:visited,a:link{
color:black;
}
a:hover
{
background-color:red;
width:50px;
height:40px;
color:#FFF;
display:block;
}
<h2> 520 慕女神喊你来表白</h2><p>活动时间:5月20日-5月25日<br>获奖公布时间:5月26日<br>Learn More>></p>
老师这个方法挺简单的,如果不想倒过来可以用flex布局。
.top_content ul{
list-style-image: url(../images/li_bg.gif);
display: flex;
justify-content: flex-end;
line-height: 27px;
}
.top_content li{
width: 70px;
}
课程须知
1. 您已具备HTML 常用标签和属性。 2. 您已具备CSS 常用属性和值。 3. 您想提升网页布局技能。
老师告诉你能学到什么?
1.CSS中盒子模型的使用 2.网页三列布局方法 3.两列自适应高度布局方法 4.幻灯片切换效果的制作方法 5.导航菜单的制作方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消