纯css实现慕课网的布局

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>慕课网首页</title>    <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>   <style>
div, h2, ul, p, img, li, a {    padding: 0;    margin: 0;    font-size: 12px;}

body {    background: #F5F5F5;    font-family: "Microsoft YaHei", Verdana, sans-serif, "SimSun";}

#top {    width: 100%;    height: 27px;    background: url("../images/top_bg.jpg") repeat-x;}

#top_content {    width: 1000px;    margin: 0 auto;}

#top_content li {    list-style-image: url("../images/li_bg.gif");    width: 70px;    line-height: 27px;    float: right;    font-size: 12px;}

#top_content a:link, #top_content a:visited {    text-decoration: none;

}

#top_content a:hover, #top_content a:active {    text-decoration: none;    color: red;}

#wrap {    width: 1000px;    margin: 0 auto;}

#logo {    height: 80px;    background: #FFFFFF;}

#logoLeft {    width: 200px;    float: left;}

#logoRight {    width: 300px;    float: right;    margin-top: 30px;    height: 28px

}

#logoRight img {    vertical-align: middle;    margin-right: 10px;

}

.tel {

color: red;    font-size: 16px;

}

#nav {    height: 40px;    clear: both;

}

#nav_left {    width: 10px;    background: url("../images/nav_left.jpg") no-repeat;    float: left;    height: 40px;}

#nav_middle {    height: 40px;    width: 980px;    background: url("../images/nav_bg.jpg") repeat-x;    float: left;}

#nav_right {    width: 10px;    background: url("../images/nav_right.jpg") no-repeat;    float: left;    height: 40px;}

#nav_middle-left {    width: 680px;    float: left;

}

#nav_middle-right {    width: 300px;    float: left;

}

#nav_middle-left li {    float: left;    line-height: 40px;    width: 100px;    list-style: none;    text-align: center;

}

#nav_middle-left a:link, #nav_middle-left a:visited {    text-decoration: none;    color: white;    font-size: 16px;

}

#nav_middle-left a:hover, #nav_middle-left a:active {

font-size: 16px;    color: yellow;    text-decoration: none;}

.seacher {    width: 190px;    height: 25px;    margin-top: 5px;    padding-right: 25px;    background: url("../images/search.jpg") no-repeat right center white;    border: 1px solid white;}

.ad {    height: 243px;    overflow: hidden;}

#main {    height: 330px;    margin-top: 5px;}

#new {    width: 340px;

}

#course {    width: 410px;    margin-right: 7px;    margin-left: 7px;}

#sidebar {    width: 230px;

}

#new, #course, #sidebar {    height: 300px;    float: left;    border: 1px solid #ffffcc;}

.title {    height: 35px;    border-bottom: 2px solid silver;

}

.title_left {    line-height: 35px;    width: 70%;    font-weight: bold;    font-size: 14px;    padding-left: 10px;    float: left;

}

.title_right {    float: right;    line-height: 35px;    width: 20%;    font-weight: bold;    text-align: right;    padding-right: 10px;

}

.title_right a {    text-decoration: none;    color: #999999;}

.pic_news {    height: 80px;    margin-top: 10px;    line-height: 22px;

}

.pic_news img, .pic_course img {    float: left;    padding: 0 5px;

}

.pic_news a, .pic_course a {    text-decoration: none;    color: #C00;

}

.new_list {    margin-top: 10px;}

.new_list li {    line-height: 25px;    list-style: none;    background: url("../images/list.jpg") no-repeat;    padding-left: 10px;    border-bottom: 1px dotted #999;

}

.new_list span {    float: right;}

.new_list a:link, .new_list a:visited {    text-decoration: none;    color: #000;}

.new_list a:hover, .new_list a:active {    text-decoration: none;    color: #F00;}

.pic_course {    height: 120px;    line-height: 22px;    margin-top: 10px;}

.course_type {    margin: 20px auto;    height: 372px;    background: url("../images/product_type_bg.jpg") no-repeat;}

.course_type li {    list-style: none;    display: inline-block;    line-height: 28px;    font-size: 12px;    margin: 0 15px;    text-align: center;

}

.video {    height: 185px;    border: 1px solid #EbE8E8;}

.video_content {    height: 185px;}

.sidebar_ad {    height: 55px;    border: 1px solid #E8E8E8;    margin-top: 10px;}.copyright{    clear: both;    width: 100%;    height: 200px;    background:#E8E8E8 ;}.copyright_content{    width: 1000px;    margin: 0 auto;    padding-right: 10px;}

.copyright_content li{   list-style: none;    float: left;    width: 200px;    background: url("../images/line.png") no-repeat right center;    text-align: center;    line-height: 30px;}

.copyright_content a{    text-decoration: none;    color: #999;    font-size: 18px;}

.copyright_content li ul li a{    text-decoration: none;    color: #999;    font-size: 14px;}.list_main{    min-height: 350px;    _height:350px;    background: white;    margin-top: 10px;    margin-bottom: 10px;}

.news_type{    width: 220px;    height: 350px;    border:1px solid #E8E8E8;    float: left;}.list_box{    width: 770px;    min-height: 350px;    _height:350px;    border:1px solid #E8E8E8;    float: right;}

.news_type h2 {

height: 35px;    line-height: 35px;    background: #9FF;    color: #666;    font-size:14px ;    background: url("../images/titile_bg.gif") repeat-x;    padding-left: 20px;}

.news_type_content {

height: 365px;    background: url("../images/content_bg.gif") repeat-x;}

.news_type_content li{    list-style: none;    height: 30px;    line-height: 30px;

}

.news_type_content li a{    color:#666;    text-decoration: none;    background: url("../images/li_bg.gif") no-repeat left center;    padding-left: 15px;    display: block;}

.news_type_content li a:hover{    color:#009CDF;    background: url("../images/li_bg2.gif") no-repeat left center;    background-color: #F2F2F2;

}.list_box h2{    font-size: 14px;    color: #666;    height:35px;    line-height: 35px;    padding-left:15px ;    background:url("../images/titile_bg.gif") repeat-x ;}

.page{    height: 40px;    margin-top: 10px;    text-align: center;}

.page a{    display: inline-block;    border: 1px solid #E8E8E8;    text-decoration: none;    margin: 5px;    padding: 5px 10px;}

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

.page a:hover,.page a:active{    color:#FFF ;    background-color: #cc1b1b;}


</style></head><body><div id="top">    <div id="top_content">        <ul>            <li><a href="#" onclick="">联系我们</a></li>            <li><a href="#" onclick="">加入收藏</a></li>            <li><a href="#" onclick="">设为首页</a></li>        </ul>    </div></div>   <!--top结束!-->

<div id="wrap">    <div id="logo">        <div id="logoLeft">            <img src="images/logo.jpg">        </div>        <div id="logoRight">            <img src="images/tel.jpg">            24小时服务热线：<span class="tel">123-456-7890</span>        </div>    </div><!--logo结束!-->    <div id="nav">        <div id="nav_left">

</div>        <div id="nav_middle">            <div id="nav_middle-left">                <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>            <div id="nav_middle-right">                <form method="post" action="">                    <input type="text" class="seacher">                </form>

</div>        </div><!--nav_middle结束!-->        <div id="nav_right"></div>    </div><!--nav结束!-->

<div class="ad" id="picBox">        <div class="loading"><img src="images/loading.gif" alt="图片正在你加载中"></div>        <div class="pic">            <ul>                <li><img src="images/ad2.jpg"></li>                <li><img src="images/ad3.jpg"></li>                <li><img src="images/ad4.jpg"></li>            </ul>        </div><!--pic结束!-->    </div><!--picBox结束!-->    <div id="main">        <div id="new">            <div class="title">                <h2 class="title_left">新闻中心</h2>                <span class="title_right"><a href="#">More &gt; &gt;</a></span>            </div>            <div class="pic_news">                <img src="images/news.jpg">                <h2><a href="#">520 女神喊你来表白</a></h2>                <p>活动时间：5月20-5月25日<br/>                    获奖公布时间：5月25日<br/>                    <a href="#">Learn More &gt;&gt;</a></p>            </div>            <div class="new_list">                <ul>                    <li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈</a></li>                    <li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈，今日头条 </a>                    </li>                    <li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈爱奇艺 </a>                    </li>                    <li><span>[2014-06-09]</span><a href="#">【哈哈啊啊哈哈 </a></li>                </ul>            </div>        </div><!--new结束!-->        <div id="course">            <div class="title">                <h2 class="title_left">课程中心</h2>                <span class="title_right"><a href="#">More &gt; &gt;</a></span>            </div>            <div class="pic_course">                <img src="images/css.jpg">                <h2><a href="#">CSS圆角进化论</a></h2>                <p>                    CSS圆角的实现经历了三大发展阶段：背景图片方式、CSS2.0+HTML模拟标签、CSS3.0圆角属性，以及css的显现方式，并对实现的哟缺点进行对比分析</p>            </div>            <div class="course_type">                <ul>                    <li> PHP开发</li>                    <li> JAVA开发</li>                    <li> Andior开发</li>                    <li> 前端开发</li>                </ul>            </div><!--pic_course!-->        </div><!--course结束!-->

<div id="sidebar">            <div class="video">                <div class="title">                    <h2 class="title_left">媒体聚焦</h2>                    <span class="title_right"><a href="#">More &gt; </a></span>                </div>                <div class="video_content">                    <embed src="http://player.video.qiyi.com/5828f85deefc77a7ac97afb1ef194a44/0/0/v_19rr935mhw.swf-albumId=783581000-tvId=783581000-isPurchase=0-cnId=6"                           allowFullScreen="true" quality="high" width="230"                           height="140" align="middle"                           allowScriptAccess="always"                           type="application/x-shockwave-flash"></embed>                </div><!--videv_content结束!-->            </div><!--videv_结束!-->            <div class="sidebar_ad">                <img src="images/app.jpg">            </div><!--sidebar_ad结束!-->        </div><!--sidebar结束!-->    </div><!--main结束!--></div><!--wrap结束!-->

<div class="copyright">    <div class="copyright_content">        <ul>            <li><a href="#">关于</a>                <ul>                    <li><a href="#">品牌故事</a></li>                    <li><a href="#">联系我们</a></li>                    <li><a href="#">加入我们</a></li>                    <li><a href="#">版权声明</a></li>                </ul>            </li>            <li><a href="#">课程</a>                <ul>                    <li><a href="#">PHP前端</a></li>                    <li><a href="#">JAVA前端</a></li>                    <li><a href="#">前端开发</a></li>                    <li><a href="#">Andrid开发</a></li>

</ul>            </li>            <li><a href="#">留言</a>                <ul>                    <li><a href="#">新浪微博</a></li>                    <li><a href="#">腾讯微博</a></li>                    <li><a href="#">企业微信</a></li>                    <li><a href="#">QQ空间</a></li>

</ul>            </li>            <li><a href="#">关注</a>                <ul>                    <li><a href="#">意见反馈</a></li>                    <li><a href="#">问题留言</a></li>                    <li><a href="#">媒体联系</a></li>                    <li><a href="#">在线客服</a></li>

</ul>            </li>            <li><a href="#"><img src="images/weixin.png">微信关注</a>                <ul>                    <li><img src="images/qrcode.jpg"></li>                </ul>            </li>

</ul>    </div><!--copyright!--></div><!--copyright_content!--></body></html>
				


				
时间： 2024-10-13 10:04:48 

		


		


	

	
	

		


		
纯css实现慕课网的布局的相关文章


								

		

			

                纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
			

		

		

									

				纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy,在低于安卓4.4的版本号的手机上,自带的浏览器是不支持这个属性的. 好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其它一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.只是没关系,大部分的常见布局问题,我都能解决掉.可是,以下这个-.我真心有点费解.只是,没关系,通过我的研究,终于还是非常快用			

		

	

				

		

			

                简单而兼容性好的Web自适应高度布局，纯CSS
			

		

		

									

				纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{padding:0;margin:			

		

	

				

		

			

                纯CSS无hacks的跨游览器多列布局
			

		

		

									

				利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证. 问题的症结所在 如上图所示,由于各列的内容不一致导致其背景的高度也不统一.而背景实质上是内容(标准的盒子模型是由内容区,补白区,边框区与边界区组成,背景存在于前三者中:IE为前两者)的自适应的问题.再转化一下,如何撑大那些较短的列的高度,让所有列的高度等于最高的列的高度?这个,的确很			

		

	

				

		

			

                纯CSS实现六边形布局的导航菜单
			

		

		

									

				<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现六边形布局的导航菜单</title> <style> .wrap{margin:100px;width:303px;} .nav{width:100px;hei			

		

	

				

		

			

                如何用纯CSS布局两列，一列固定宽度，另一列自适应？
			

		

		

									

				大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题.下面是我的一些小经验,疏漏之处还望大家体谅. 如果不用纯CSS解决此问题的话,我们可以先固定左侧DIV宽度为:100px,然后用JS取得当前浏览器宽度,再减去100px,然后赋值给右侧DIV宽度即可.这样就愉快的解决了,右侧的宽度就是自适应的了. 当然如果不是固定左侧DIV宽度为:100px的话,			

		

	

				

		

			

                夜空中最亮的星：慕课网新手学习指南_慕课手记
			

		

		

									

				首先标题是为了凑够标准的十个字,如果你这会去数了一下然后想评论说不是十个字,那我佩服你的求知精神...进来的肯定不是看我瞎扯淡的,我们步入正题. 慕课网作为国内不能说是最大,但是起码口碑最好的一个IT学习的网站,受到了很多人的欢迎,但是在推荐给朋友的过程中,我就发现了一些问题,那就是纯小白根本不知道怎么开始学习.这里我要说一下什么叫做纯小白,你以为不知道变量,命令提示符,HTTP协议,这些就是小白了吗?那你就错了,我今天要说的是连怎么设置IP地址,怎么设置百度为首页,连自己的操作系统是winxp			

		

	

				

		

			

                支持多种浏览器的纯css下拉菜单
			

		

		

									

				<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312			

		

	

				

		

			

                慕课网学习笔记02
			

		

		

									

				如何利用CSS进行网页布局 内容来自慕课网 浮动(float)和 绝对定位(position:absolute)可以让元素脱离文档流. 清除浮动可以理解为打破横向排列. 清除浮动的关键字是clear,官方定义如下: 语法: clear : none | left | right | both 取值: none : 默认值.允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 CSS浮动及清除浮动通俗讲解 网页布局基础			

		

	

				

		

			

                JavaScript进阶--慕课网学习笔记
			

		

		

									

				                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,