纯css实现慕课网的布局

最新推荐文章于 2021-07-20 23:50:05 发布
最新推荐文章于 2021-07-20 23:50:05 发布
阅读量138 收藏
点赞数
原文链接：http://www.cnblogs.com/Candicecl/p/7500975.html
版权 
<!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="#" οnclick="">联系我们</a></li>
            <li><a href="#" οnclick="">加入收藏</a></li>
            <li><a href="#" οnclick="">设为首页</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>
 

 

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

                

        

        




    

  


    

      

        

            

              
                
                  weixin_34235105
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
【慕课网】Web学习笔记—CSS3 （四）布局模型，盒模型

				
			

			

				

					qq_44228263的博客
				

				

					02-19
					
					294
					
				

			

		

		

			
				
【慕课网】Web学习笔记———CSS3 （三）
【慕课网】Web学习笔记———CSS3 （四）CSS3布局模型流动模型浮动模型层模型
CSS3布局模型
布局模型与盒模型一样都是 CSS3 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS3 布局样式或 CSS3 布局模板。如果说布局模型是本，那么 CSS3 布局模板就是末了，是外在的表现形式。
CSS3包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：

流动模型

			
		

	



                

              
                



	

		

			

				
					
手把手写一个慕课网的h5布局页面

				
			

			

				

					qq_44905242的博客
				

				

					12-04
					
					1015
					
				

			

		

		

			
				
简单写一个慕课网的h5布局页面
以下部分为HTML结构代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>IMOOC</title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="icon" href="images/favicon.png">
	<

			
		

	



                


  
              

                


	

		

			

				
					
慕课网网站布局demo

				
			

			

				

					07-06
				

			

		

		

			
				
学完css后，使用css，js等实现慕课网首页网站的布局

			
		

	





	

		

			

				
					
慕课网跟练案例系列——css网页布局案例

				
			

			

				

					qq_42969437的博客
				

				

					08-28
					
					288
					
				

			

		

		

			
				
&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&quot;en&quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
    &amp;lt;meta name=&quot;viewport&quot; content=&a

			
		

	



		

			
		



	

		

			

				
					
【慕课网】如何用CSS进行网页布局--挑战编程作业

				
			

			

				

					anyueemo的专栏
				

				

					08-09
					
					462
					
				

			

		

		

			
				
慕课网 CSS 网页布局

			
		

	





	

		

			

				
					
【CSS3】布局样式相关--慕课网【学习总结】

				
			

			

				

					GO GO 加油！越努力越幸运❤~~~
				

				

					07-06
					
					984
					
				

			

		

		

			
				
1.多列布局——ColumnsW3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上经常使用。【语法】columns：<column-width> || <column-count>多列布局columns属性参数主要就两个属性参数：列宽和列数。【例如】要显示3栏显示，每栏宽度为150px，代码

			
		

	





	

		

			

				
					
慕课网《如何用CSS进行网页布局》视频学习笔记

				
			

			

				

					李威威的博客
				

				

					03-22
					
					1111
					
				

			

		

		

			
				
慕课网《如何用CSS进行网页布局》视频学习笔记 
[toc] 
授课老师：江老实 。 
Web前端工程师，资深前端攻城师，深受欢迎的前端领路人，多家大型网站的建造者，主攻前端技术开发、网页UI设计，影像技术达人，古典音乐发烧友，儒雅先生。一、内容简介网页可以自适应。 
网页的长度理论上可以没有限制 
常见的网页分为：头部、主体（主体可以再分栏）。 
分栏又称为分列，常见的布局分为：一列布局、二列布局

			
		

	





	

		

			

				
					
模仿慕课网的一个小页面，纯HTML布局+css美化+jquery实现轮播图

				
			

			

				

					07-20
				

			

		

		

			
				
仿慕课网写的一个网站，如果写的不好请...阅读建议：此资源以开发简化版慕课网其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。

			
		

	





	

		

			

				
					
慕课css布局的源代码

				
			

			

				

					03-20
				

			

		

		

			
				
在这个“慕课css布局的源代码”资源中，我们可以深入学习和理解CSS布局的各种技术。  首先，我们要了解CSS布局的基础，包括盒模型。盒模型是CSS布局的核心，每个HTML元素都被视为一个矩形盒子，包括内容区、内边距、...

			
		

	





	

		

			

				
					
网页制作课作业基于HTML+CSS+JavaScript+jquery仿慕课网教学培训网站设计实例 企业网站制作

				
			

			

				

					08-10
				

			

		

		

			
				
 - **CSS3**: 用于网页的样式设计，实现美观的布局与视觉效果。  - **JavaScript**: 用于增加网页的交互性，实现动态效果。  - **jQuery**: 一种轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画等操作。 ...

			
		

	





	

		

			

				
					
慕课网 absolute 实现左右布局

				
			

			

				

					master-dragon的专栏
				

				

					01-27
					
					799
					
				

			

		

		

			
				
使用absolute实现横向两列布局
常用于一列固定宽度，另一列宽度自适应的情况，
注意！！！！固定宽度的列的高度 > 自适应宽度列的高度
设置绝对定位的块的高度低一点。
主要应用技能：
relative-父元素相对定位。
absolute-自适应宽度元素绝对定位(记得设置偏移量！！)。

			
		

	





	

		

			

				
					
【慕课网】网页布局基础学习笔记

				
			

			

				

					Cyan1614的博客
				

				

					06-06
					
					433
					
				

			

		

		

			
				
一、网页布局概念

1-1.网页布局模型分为标准文档流、浮动布局、绝对定位
1-2.对网页布局模型的练习题

二、自动居中一列布局

2-1.标准文档流概念、块级元素和行级元素
2-2.盒子模型概念



盒子模型遮挡顺序


border 


content+padding


background-image


background-colo

			
		

	





	

		

			

				
					
CSS基本知识(慕课网)

				
			

			

				

					weixin_33709590的博客
				

				

					03-09
					
					115
					
				

			

		

		

			
				
　　1、注释
　　　　注解：CSS中注释/*这里是注释的文字*/   HTML中注释&lt;!--这里是注释的文字--&gt;
 
　　2、外部式css样式，写在单独的一个文件中
　　　　注解：

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在&lt;head&gt;内（不是在&lt;style&gt;标签内）使用&lt;li...

			
		

	





	

		

			

				
					
Bootstrap实战---成长平台(栅格布局)

				
			

			

				

					Season CSDN博客
				

				

					07-20
					
					292
					
				

			

		

		

			
				
Bootstrap实战—成长平台(栅格布局)


目标布局



我的布局：不含JS和CSS特效



我的代码


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>融职教育</title>
    <!--移动设备优先-->
    <meta name="viewport" content="width=device-wid..

			
		

	





	

		

			

				
					
慕课网——CSS作业练习题

				
			

			

				

					捕鱼麦大叔的博客
				

				

					03-06
					
					1397
					
				

			

		

		

			
				
作业地址：点击打开链接html：&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;css慕课网作业&lt;/title&gt;
    &lt;link rel="stylesheet&quo

			
		

	





	

		

			

				
					
仿慕课网教程html+css页面--前段时间学习总结（1）

				
			

			

				

					weixin_30539625的博客
				

				

					05-05
					
					752
					
				

			

		

		

			
				
刚刚开通了博客，来一篇写过的页面。
先来个效果图：



接下来直接上代码：
HTML部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=...

			
		

	





	

		

			

				
					
2024-2030全球与中国硅胶婴儿用品市场现状及未来发展趋势 Sample-Li Jinpan.pdf

				
			

			

				

					09-05
				

			

		

		

			
				
QYResearch是全球知名的大型咨询公司，行业涵盖各高科技行业产业链细分市场，横跨如半导体产业链（半导体设备及零部件、半导体材料、集成电路、制造、封测、分立器件、传感器、光电器件）、光伏产业链（设备、硅料/硅片、电池片、组件、辅料支架、逆变器、电站终端）、新能源汽车产业链（动力电池及材料、电驱电控、汽车半导体/电子、整车、充电桩）、通信产业链（通信系统设备、终端设备、电子元器件、射频前端、光模块、4G/5G/6G、宽带、IoT、数字经济、AI）、先进材料产业链（金属材料、高分子材料、陶瓷材料、纳米材料等）、机械制造产业链（数控机床、工程机械、电气机械、3C自动化、工业机器人、激光、工控、无人机）、食品药品、医疗器械、农业等。

			
		

	





	

		

			

				
					
用于非线性模型预测控制 (NMPC) 的并行优化工具包.7z

				
			

			

				

					09-05
				

			

		

		

			
				
用于非线性模型预测控制 (NMPC) 的并行优化工具包.7z

			
		

	





	

		

			

				
					
Flow-Guided-Feature-Aggregation研究基于视频的目标检测FGFA框架.zip

					
最新发布

				
			

			

				

					09-05
				

			

		

		

			
				
目标检测（Object Detection）是计算机视觉领域的一个核心问题，其主要任务是找出图像中所有感兴趣的目标（物体），并确定它们的类别和位置。以下是对目标检测的详细阐述：

一、基本概念
目标检测的任务是解决“在哪里？是什么？”的问题，即定位出图像中目标的位置并识别出目标的类别。由于各类物体具有不同的外观、形状和姿态，加上成像时光照、遮挡等因素的干扰，目标检测一直是计算机视觉领域最具挑战性的任务之一。

二、核心问题
目标检测涉及以下几个核心问题：

分类问题：判断图像中的目标属于哪个类别。
定位问题：确定目标在图像中的具体位置。
大小问题：目标可能具有不同的大小。
形状问题：目标可能具有不同的形状。
三、算法分类
基于深度学习的目标检测算法主要分为两大类：

Two-stage算法：先进行区域生成（Region Proposal），生成有可能包含待检物体的预选框（Region Proposal），再通过卷积神经网络进行样本分类。常见的Two-stage算法包括R-CNN、Fast R-CNN、Faster R-CNN等。
One-stage算法：不用生成区域提议，直接在网络中提取特征来预测物体分类和位置。常见的One-stage算法包括YOLO系列（YOLOv1、YOLOv2、YOLOv3、YOLOv4、YOLOv5等）、SSD和RetinaNet等。
四、算法原理
以YOLO系列为例，YOLO将目标检测视为回归问题，将输入图像一次性划分为多个区域，直接在输出层预测边界框和类别概率。YOLO采用卷积网络来提取特征，使用全连接层来得到预测值。其网络结构通常包含多个卷积层和全连接层，通过卷积层提取图像特征，通过全连接层输出预测结果。

五、应用领域
目标检测技术已经广泛应用于各个领域，为人们的生活带来了极大的便利。以下是一些主要的应用领域：

安全监控：在商场、银行

			
		

	





	

		

			

				
					
CSS实现双飞翼布局的多种方式详解

				
			

			

				

					
				

			

		

		

			
				
CSS 双飞翼布局实现方式详解  在前端开发中，双飞翼布局是一种常见的布局方式，指的是左右两侧宽度固定，中间内容宽度自适应的布局方式。这种布局方式可以实现左右两侧的自适应宽度，而中间内容的宽度则根据屏幕的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值