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

企业网站综合布局实战

zkpplpp PHP开发工程师
难度初级
时长 2小时55分
学习人数
综合评分9.73
544人评价 查看评价
9.8 内容实用
9.8 简洁易懂
9.6 逻辑清晰
* {
margin: 0;
padding: 0;
}
.newsBox {
width: 800px;
min-height:300px;
_height:300px;
border: 1px solid #E8E8E8;
background-color: #FFFFFF;
margin: 10px auto;
}
.newsTitle {
font-family: "微软雅黑";
font-size: 20px;
text-align: center;
margin: 10px 0;
}
.newsInfo {
color: #666666;
text-align: center;
border-bottom: 1px dotted #666666;
}
.newsContent {
font-size: 14px;
text-indent: 2em;
line-height: 25px;
padding: 20px;
}
.newsContent img {
display: block;
margin: 10px auto;
}
.titleBold {
font-weight: bold;
margin: 10px 0;
}
<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" width="500" height="336" alt="活动内容、" /></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>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><p>3.小伙伴们提交的内容不得违反相关道德、法律规定</p>
<p>4.一个ID仅有一次中奖机会,不可重复中奖</p><p>5.所有文字类书写错误的问题不计入有效的活动回帖范围</p><p>(注:最终解释权归慕课网所有)</p>
a {
font-family: "微软雅黑";
font-size: 14px;
text-decoration: none;
border: 1px solid #e8e8e8;
margin: 3px;
padding: 3px 10px;
display: inline-block;
}

a:link,a:visited {
color: #000;
}

a:hover,a:active{
background-color: #c00;
}
.
.
.
<a href="#" style="background-color: #c00;">1</a>
<ul>
<li>首页</li>
<li>
课程中心
<ul>
<li>
Web前端
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</li>
<li>Android开发</li>
<li>PHP开发</li>
</ul>
</li>
</ul>
li{
list-style-type:none;
float:left;
width:50px;
height:30px;
text-align:center;
font-size :15px;
line-height:30px;
}
li:hover{
color:#fff;
background:red;
}
em{
display:block;
width:20px;
text-align:center;
height:16px;
line-height:16px;
font-size:12px;
font-style:normal;
background:url( "http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg") no-repeat;
background-position:bottom;
color:#333;
float:left;
}
.top em{
background-position:top;
color:#fff;
}
*{
margin: 0;
padding: 0;
}

.topList{
width:300px;
height:180px;
border:1px solid #e8e8e8;
font-size:12.5px;
margin:10px auto;
}

li{
list-style-type:none;
margin:12px auto;
padding-left:5px;
}

a:link,a:visited{
color: #6C6C6C;
text-decoration: none;
}

a:hover,a:active{
color:#09f;
}

最新回答 / ChangerHe
你要把picBox这个ID加在轮播图片的那个DIV上,就可以实现了,记得引用jQuery.js
我发现了,是插件库的原因 我找其他网站的插件 瞬间打开不需要加载 要的加我的Q 四一五七六三四六九
.newsBox{
min-height:300px;
}
.bold{
font-weight:bold;
}
.newsContent p{
line-height:25px;
text-indent:2em;
}
.newsInfo{
color:#666;
border-bottom:1px dotted #ccc;
}
.newsBox h1,.newsInfo{
text-align:center;
}
.newsBox p img{
margin:0 auto;
display:block;
}
课程须知
1. 您已具备HTML 常用标签和属性。 2. 您已具备CSS 常用属性和值。 3. 您想提升网页布局技能。
老师告诉你能学到什么?
1.CSS中盒子模型的使用 2.网页三列布局方法 3.两列自适应高度布局方法 4.幻灯片切换效果的制作方法 5.导航菜单的制作方法

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消