慕课网企业网站综合布局实战

最新推荐文章于 2019-03-17 21:24:27 发布
最新推荐文章于 2019-03-17 21:24:27 发布
阅读量556 收藏 4
点赞数 1
原文链接：http://www.cnblogs.com/Candicecl/p/7504535.html
版权

我用的前端开发神器WebStrom编辑的，下面是我写的部分代码，还有一些兼容没有处理，在本次的布局实战中，很多东西需要去实践才能发现问题，有的模块如果高度有变化就设置一个min-height属性，但是IE不兼容，只能使用_height。图片资源可以去http://www.imooc.com/learn/147下载

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课实战</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
    <script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script>
    <link rel="stylesheet" href="js/mf-pattern/mF_fancy.css" type="text/css">
    <script type="text/javascript">
        myFocus.set({id: "picBox"});
</script>
</head>
<body>
<div class="top">
    <div class="top_content">
        <div class="top_content_left"><img src="img/logo.jpg"></div>
        <div class="top_content_right">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品特色</a></li>
                <li><a href="#">解决方案</a></li>
                <li><a href="#">产品价格</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div><!--top_content_right结束 !-->
</div><!--top_content结束 !-->
</div><!--top结束 !-->
<div id="wrap">
    <div class="ad" id="picBox">
        <div class="loading"><img src="img/loading.gif"></div>
        <div class="pic">
            <ul>
                <li><img src="img/ad2.jpg"></li>
                <li><img src="img/ad3.jpg"></li>
                <li><img src="img/ad4.jpg"></li>
            </ul>
        </div><!--pic结束 !-->
</div><!--picBox结束 !-->
<div class="new_type">
        <div class="new_type_top">
            <div class=" new_type_top_left"><a href="#">新闻</a></div>
            <div class=" new_type_top_right"><a href="#">这是滚动新闻</a></div>
        </div><!--new_type_top结束 !-->
<div class="new_type_bottom">
            <div class=" new_type_bottom_left"><img src="img/bs.jpg">
                <p>玩转Bootstrap</p></div>
            <div class=" new_type_bottom_middle"><img src="img/css.jpg">
                <p>企业网站案例</p></div>
            <div class=" new_type_bottom_right"><img src="img/js.jpg"
style="width: 324px">
                <p>JavaScript基础</p></div>
        </div><!--new_type_bottom结束 !-->
</div><!--new_type结束 !-->
<div class="main">
        <div class="news">
            <h2>新闻中心</h2>
            <div class="news_list">
                <ul>
                    <li>
                        <div class="date">8月20日</div>
                        <div class="news_info"><h3>学习计划之"Andoid"的习惯养成</h3>
                            <p>Andoid哈哈哈哈哈哈你身上的机会很多很好的和事实上还是实话实说还是顶顶顶顶顶不</p>
                        </div>
                    </li>
                    <li>
                        <div class="date">4月23日</div>
                        <div class="news_info"><h3>学习计划之"Andoid"</h3>
                            <p>Andoid哈哈哈哈哈哈你身上的机会很多很好的和事实上还是实话实说还是顶顶顶顶顶不</p>
                        </div>
                    </li>
                    <li>
                        <div class="date">5月24日</div>
                        <div class="news_info"><h3>学习计划之"Andoid"的习惯养成</h3>
                            <p>Andoid哈哈哈哈哈哈你身上的机会很多很好的和事实上还是实话实说还是顶顶顶顶顶不</p>
                        </div>
                    </li>


                </ul>
            </div>
        </div><!--news结束 !-->
<div class="active">
            <h2>热门活动</h2>
            <img src="img/2048.jpg">
            <div class="active_list">
                <ul>
                    <li>慕课网2048游戏源码征集</li>
                    <li>慕课网2048游戏源码征集</li>
                    <li>慕课网2048游戏源码征集</li>
                    <li>慕课网2048游戏源码征集</li>
                    <li>慕课网2048游戏源码征集</li>
                </ul>
            </div>
        </div><!--active结束 !-->
<div class="concat">
            <h2>联系我们</h2>
            <div class="concat_list">
                <div class="teacher_info">
讲师招聘<br/>
邹同学<br/>
电话：19245745<br/>
QQ:576264119<br/>
E-mail:daisy@imcooc.com<br/>
                </div><!--teacher_info结束 !-->
<div class="wang_info">
网站合作<br/>
吕同学<br/>
电话：19245745<br/>
QQ:10598141<br/>
E-mail:lvyang@imcooc.com<br/>
                </div><!--wang_info结束 !-->
</div>
        </div><!--concat结束 !-->
</div>
</div><!--wrap结束 !-->
<div class="footer">
Copyright@2017 By chenli
</div><!--footer结束 !-->
</body>
</html>

index.css
body,ul, h2, li, a, h2,h3 {
margin: 0;
padding: 0;
font-size: 12px;
border: none;
}



.top {
width: 100%;
}

.top_content {
background: white;
width: 1000px;
margin: 0 auto;
height: 70px;

}

.top_content_left {
width: 220px;
float: left;
margin: 0 auto;

}

.top_content_right {
float: left;
width: 760px;
}

.top_content_right li {
list-style: none;
width: 100px;
height: 70px;
line-height: 70px;
float: left;

}

.top_content_right a:link, .top_content_right a:visited {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
text-align: center;

}

.top_content_right a:hover, .top_content_right a:active {
background: firebrick;
}

.ad {
margin: 0 auto;
width: 1000px;
height: 350px;
overflow: hidden;
}

.new_type {
width: 1000px;
margin: 10px auto;

}

.new_type_top {
height: 40px;
margin: 0 auto;
}

.new_type_top_left {
width: 10%;
background: firebrick;
float: left;
line-height: 40px;
text-align: center;

}

.new_type_top_right {
height: 40px;
float: left;
width: 89%;
background: dimgrey;
line-height: 40px;
padding-left: 10px;

}

.new_type_top a {
text-decoration: none;
font-size: 14px;
color: white;
}

.new_type_bottom {
width: 1000px;
margin-top: 10px;
clear: both;
height: 160px;

}

.new_type_bottom_left {
width: 330px;
float: left;
}

.new_type_bottom_middle {
width: 330px;
margin: 0 5px;
float: left;
}

.new_type_bottom_right {
width: 324px;
float: right;
}

.new_type_bottom p {
font-size: 14px;
color: black;
font-weight: bold;
text-align: center;
border: 1px solid #E8E8E8;
}

.main {
_height: 302px;
min-height:302px;
width: 1000px;
margin: 0 auto;
}

.main h2 {
height: 40px;
line-height: 40px;
font-size: 14px;
padding-left: 10px;
background: firebrick;
}

.news, .active, .concat {
border: 1px solid #E8E8E8;
float: left;
}

.news {
width: 330px;
min-height: 300px;
_height: 300px;

}

.news_list {
width: 300px;
margin-top: 10px;

}

.news_list li {
width: 310px;
list-style: none;
border-bottom: 1px solid #E8E8E8;
height:61px;
float: left;
padding: 10px;

}
.news_list li:last-child {
border-bottom: none;
}
.date {
width: 30px;
height: 40px;
padding: 5px;
line-height: 20px;
color: white;
border-radius: 4px;
background: firebrick;
float: left;

}

.date h3 {

font-size: 14px;
font-weight: bold;
}

.date p {
margin-top: 10px;
height: 340px;
line-height:40px;

}

.news_info {
width: 260px;
float: right;
}

.active {
width: 330px;
margin: 0 5px;
min-height: 300px;
_height: 300px;
}

.active img {
height: 100px;
width: 310px;
padding: 10px 10px 0;

}

.active li {
padding-left: 10px;
list-style: none;
height: 25px;
line-height: 25px;
font-weight: bold;
font-size: 14px;
}
.active li:first-child {
margin-top: 10px;
}
.concat {
width: 324px;
min-height: 300px;
_height: 300px;

}

.teacher_info, .wang_info {
line-height: 22px;
font-size: 16px;
font-weight: bold;
color: black;
padding-bottom: 14px;
}

.teacher_info {
padding-top: 10px;
}

.footer {
clear: left;
width: 1000px;
background: #E8E8E8;
text-align: center;
height: 40px;
font-size: 16px;
line-height: 40px;
margin: 20px auto 0;
}

   图片资源



body,ul, h2, li, a, h2,h3 {
margin: 0;
padding: 0;
font-size: 12px;
border: none;
}



.top {
width: 100%;
}

.top_content {
background: white;
width: 1000px;
margin: 0 auto;
height: 70px;

}

.top_content_left {
width: 220px;
float: left;
margin: 0 auto;

}

.top_content_right {
float: left;
width: 760px;
}

.top_content_right li {
list-style: none;
width: 100px;
height: 70px;
line-height: 70px;
float: left;

}

.top_content_right a:link, .top_content_right a:visited {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
text-align: center;

}

.top_content_right a:hover, .top_content_right a:active {
background: firebrick;
}

.ad {
margin: 0 auto;
width: 1000px;
height: 350px;
overflow: hidden;
}

.new_type {
width: 1000px;
margin: 10px auto;

}

.new_type_top {
height: 40px;
margin: 0 auto;
}

.new_type_top_left {
width: 10%;
background: firebrick;
float: left;
line-height: 40px;
text-align: center;

}

.new_type_top_right {
height: 40px;
float: left;
width: 89%;
background: dimgrey;
line-height: 40px;
padding-left: 10px;

}

.new_type_top a {
text-decoration: none;
font-size: 14px;
color: white;
}

.new_type_bottom {
width: 1000px;
margin-top: 10px;
clear: both;
height: 160px;

}

.new_type_bottom_left {
width: 330px;
float: left;
}

.new_type_bottom_middle {
width: 330px;
margin: 0 5px;
float: left;
}

.new_type_bottom_right {
width: 324px;
float: right;
}

.new_type_bottom p {
font-size: 14px;
color: black;
font-weight: bold;
text-align: center;
border: 1px solid #E8E8E8;
}

.main {
_height: 302px;
min-height:302px;
width: 1000px;
margin: 0 auto;
}

.main h2 {
height: 40px;
line-height: 40px;
font-size: 14px;
padding-left: 10px;
background: firebrick;
}

.news, .active, .concat {
border: 1px solid #E8E8E8;
float: left;
}

.news {
width: 330px;
min-height: 300px;
_height: 300px;

}

.news_list {
width: 300px;
margin-top: 10px;

}

.news_list li {
width: 310px;
list-style: none;
border-bottom: 1px solid #E8E8E8;
height:61px;
float: left;
padding: 10px;

}
.news_list li:last-child {
border-bottom: none;
}
.date {
width: 30px;
height: 40px;
padding: 5px;
line-height: 20px;
color: white;
border-radius: 4px;
background: firebrick;
float: left;

}

.date h3 {

font-size: 14px;
font-weight: bold;
}

.date p {
margin-top: 10px;
height: 340px;
line-height:40px;

}

.news_info {
width: 260px;
float: right;
}

.active {
width: 330px;
margin: 0 5px;
min-height: 300px;
_height: 300px;
}

.active img {
height: 100px;
width: 310px;
padding: 10px 10px 0;

}

.active li {
padding-left: 10px;
list-style: none;
height: 25px;
line-height: 25px;
font-weight: bold;
font-size: 14px;
}
.active li:first-child {
margin-top: 10px;
}
.concat {
width: 324px;
min-height: 300px;
_height: 300px;

}

.teacher_info, .wang_info {
line-height: 22px;
font-size: 16px;
font-weight: bold;
color: black;
padding-bottom: 14px;
}

.teacher_info {
padding-top: 10px;
}

.footer {
clear: left;
width: 1000px;
background: #E8E8E8;
text-align: center;
height: 40px;
font-size: 16px;
line-height: 40px;
margin: 20px auto 0;
}

转载于:https://www.cnblogs.com/Candicecl/p/7504535.html

weixin_33862188
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
访慕课网实战页面精致前端代码
05-30
访慕课网前端实战界面，相似度95%以上，还增添了动态图片效果，献给所有初学者，值得下载。创作不易，请支持。
前端学习-企业网站综合布局实战
chiweiya9693的博客
02-14 175
[转]来自于慕课网学习整理。 一、效果展示及分析： 111111 二、头部制作 知识点： 1、布局写好，都在class=top 的div内 2、注意logo和电话左右浮动，分别设置好宽度 3、log中的img元素（行内元素）居中,vertical-a...
企业网站综合布局实战-imooc
weixin_34315665的博客
03-06 152
2 2-1 盒子模型
慕课网-企业/电商网站综合布局实战笔记
Zoe_慕子晴的博客
12-29 989
1、myFocus制作焦点图 step1：在html标签内引入相关文件 step2：创建myFocus标准的html结构，并填充内容 step3：在step1代码之后任意位置调用，建议在head标签结束前调用 //你可以简单的调用---只设置它的盒子id，其它参数全
慕课网网站布局demo
07-06
学完css后，使用css，js等实现慕课网首页网站的布局
基于Python的仿慕课网视频网站设计源码
04-11
本源码提供了一个基于Python的仿慕课网视频网站设计。项目包含1007个文件，其中包括224个PNG图片、181个JavaScript文件、118个Python源文件、117个Python字节码文件、116个HTML文件、116个JPG图片、52个CSS样式文件...
仿慕课网纯HTML网站源码精品大站风格
12-18
仿慕课网纯HTML网站源码精品大站风格模板
在线教育系统（仿慕课网）
07-03
该项目采用B2C商业模块，项目采用前后端分离开发，后端采用SpringCloud微服务架构。主要模块有课程管理、分类管理、文件上传功能模块、权限管理、登录系统等。 主要工作： 1. 文件上传： （1）基于阿里云OSS文件上传...
慕课网电商网站开发实例（11）
qq_39644109的博客
03-17 336
产品分类页主体部分 单词间隔word--spacing 字符间隔letter--spacing 文本转换text--transform 水平对齐方式text---align 文本缩进text---indent 文本行高line---height 人民币符号转义 &amp;yen; css设高度为.hr_15{height:25px; overflow:hid...
Web学习第一个小例子-慕课网企业案例
小菜菜的博客
08-24 1083
在慕课网学了将近一个月的前端开发，这两天根据视频，写出了一个小Demo，没有涉及到JS，基本上都是静态布局，也学习了不少布局的知识。 有一个比较炫的焦点图MyFocus插件，记一下用法; 1.MyFocus包下载地址 利用里面的js文件中的样式来设计不同风格的焦点图。 2.MyFocus的使用注意三点： （1）引入文件：有三个文件需要引入，myfocus库文件和焦点图风格的css和js。
电子、通信、计算机大类学生课程实验的心得体会
05-01
电子、通信、计算机大类学生课程实验的心得体会 电子、通信、计算机大类的学生课程实验是工科教育中非常重要的一环，它不仅能够加深学生对理论知识的理解，还能培养学生的实践能力和创新思维。
【营销】任务一金融产品与金融产品营销认识.docx
05-01
【营销】任务一金融产品与金融产品营销认识.docx
单片机课程实验-秒表实现
05-01
1.了解LED数码管的工作原理，为秒表时钟模块的实现打下基础。 LED数码管是一种常用的数字显示器件，通过控制每个LED的亮灭来显示数字。在秒表时钟模块中，我们需要利用LED数码管的这一特性，通过单片机控制数码管的显示，从而实现时钟的功能。因此，了解LED数码管的工作原理对于实现秒表时钟模块至关重要。 2.掌握51单片机与LED数码管的接口技术，是实现秒表时钟模块的关键。 51单片机是一种常用的微控制器，可以通过接口与外部设备进行通信。在秒表时钟模块中，我们需要通过单片机与LED数码管之间的接口，控制数码管的显示。因此，掌握51单片机与LED数码管的接口技术是实现秒表时钟模块的关键。在实际操作中，我们需要根据接口协议和数据传输方式，编写相应的程序来控制数码管的显示。 3.合理利用定时器/计数器，是实现秒表时钟模块的效率保障。 在秒表时钟模块中，我们需要实现计时功能，这需要使用到定时器/计数器。定时器/计数器可以用来产生计时脉冲，从而控制秒表的计时。通过合理利用定时器/计数器，可以提高秒表时钟模块的计时精度和效率。在实际操作中，我们需要根据具体的应用场景和需求，选择合适的定时器/计数器参
基于LSTM的SDN流量预测与负载均衡python源码+详细注释+数据.zip
最新发布
05-01
个人98分期末大作业项目，代码完整下载可用。主要针对计算机相关专业的正在做课程设计和期末大作业的学生和需要项目实战练习的学习者。包含全部项目源码、该项目可以直接使用、项目都经过严格调试，下载即用确保可以运行！
实验室管理微信小程序设计
05-01
实验室管理微信小程序设计
机械设计CNC自动打孔机（sw18可编辑+工程图）非常好的设计图纸100%好用.zip
05-01
机械设计CNC自动打孔机（sw18可编辑+工程图）非常好的设计图纸100%好用.zip
51单片机使用蜂鸣器来播放音乐蜂鸣器播放音乐-小星星亮晶晶
05-01
51单片机使用蜂鸣器来播放音乐蜂鸣器播放音乐-小星星亮晶晶 通过PWM信号来控制蜂鸣器，改变PWM的频率，可以改变蜂鸣器的发声音调，从而可以播.适合新手使用
机械设计德国6层电万能蒸烤箱（sw21可编辑+cad）非常好的设计图纸100%好用.zip
05-01
机械设计德国6层电万能蒸烤箱（sw21可编辑+cad）非常好的设计图纸100%好用.zip
vue慕课网首页模仿
03-05
2. 设计页面结构：根据慕课网首页的布局和样式，设计好页面的整体结构，包括头部导航、轮播图、课程列表等。 3. 划分组件：根据页面结构，将页面划分为多个组件，例如头部导航组件、轮播图组件、课程列表组件等。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值