（20）-- 制作兄弟连首页

最新推荐文章于 2022-10-27 20:22:10 发布
最新推荐文章于 2022-10-27 20:22:10 发布
阅读量348 收藏
点赞数
分类专栏： Web基础 文章标签： 兄弟连官网 HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fredreck1919/article/details/79048341
版权

#用HTML和CSS写的兄弟连官网首页


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>xdl</title>
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<!-- 外部容器 -->
	<div class="wrap">
		<!-- 头部 -->
		<div class="header">
			<div class="container">
				<div class="header_top">
				<span class="float_left">兄弟连旗下品牌：兄弟会 | 软件学院 | 工业机器人 | 猿代码</span>
				<span class="float_right">全国统一咨询热线 400-700-1307</span>
			</div>
			</div>
			
			<div class="header_bottom clearfix">
				<div class="header_bottom_left float_left">
					<div class="logo float_left"></div>
					<div class="border float_left"></div>
					<div class="gpgs float_left">
						<p class="sbgp">三板挂牌公司</p>

						<p>亿元级IT教育企业</p>
					</div>
				</div>
				<div class="header_bottom_center float_left">
					<ul>
						<li>免费学习资源</li><li>
						课程中心</li><li>
						学员作品</li><li>
						就业喜报</li><li>
						论坛</li>
					</ul>
				</div>
				<div class="header_bottom_right float_left">
					<div class="school1">全国校区</div>
					<div class="school2">报名流程</div>
				</div>
			</div>
		</div>

		<!-- 内容部分 -->
		<div class="content">
			<!-- 轮播图 -->
			<div class="banner" >
				<div class="banner_left">
					<ul>
						<li>PHP <span>></span></li>
						<li>JavaEE <span>></span></li>
						<li>UI/UE <span>></span></li>
						<li>HTML5 <span>></span></li>
						<li>Linux <span>></span></li>
						<li>Python <span>></span></li>
						<li>Data <span>></span></li>
						<li>Web <span>></span></li>
					</ul>
				</div>
				<div class="banner_right">
					<h2>最新新闻</h2>
					<div class="new_list">
						<ul>
							<li>兄弟连最新新闻一</li>
							<li>兄弟连最新新闻二</li>
							<li>兄弟连最新新闻三</li>
							<li>兄弟连最新新闻四</li>
							<li>兄弟连最新新闻五</li>
							<li>兄弟连最新新闻六</li>
							<li>兄弟连最新新闻七</li>
							<li>兄弟连最新新闻八</li>
							<li>兄弟连最新新闻九</li>
							<li>兄弟连最新新闻十</li>
							<li>兄弟连最新新闻十一</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="banner_bottom">
				<div class="banner_bottom_left">
					<table border="1px" color="blue" width="234" height="140" cellspacing="0" cellpadding="10"  align="center"  style="font-size:12px">  
	        			<tr >  
	            			<td>校区汇总</td> 
	            			<td>报名流程</td>
	            			<td>来校路线</td>

	                          
	        			</tr>  
	        			<tr>  
	            			<td>学员故事</td>  
	            			<td>活动专区</td>  
	            			<td>战地日记</td>  
	        			</tr>  
        			</table>

				</div>
				<div class="banner_bottom_right">
					<img src="./images/school.png"  hspace="10">
					<img src="./images/salary.jpg" >
					<img src="./images/newstart.jpg" hspace="1">
					<img src="./images/introduce.jpg" >
					
				</div>
			</div>
			<div class="free_class_top">
				<img src="./images/PHP.png" >
				<img src="./images/HTML5.png"  hspace="3">
				<img src="./images/UIUE.png"  hspace="3">
				<img src="./images/Linux.png"  hspace="3">
				<img src="./images/Java.png" >
			</div>
			<div class="free_class_bottom" style="margin-right:40px" >
				<button style="margin-right:120px">PHP开发工程师</button>
				<button style="margin-right:150px">H5全栈工程师</button>
				<button style="margin-right:150px">UIUE全能设计师</button>
				<button style="margin-right:100px">云计算Linux工程师</button>
				<button >JavaEE大数据工程师</button>
				
			</div>
			<div class="xc">
				<div class="xc_content">
					<div class="xc_left">
						<img src="./images/php.jpg" >
					</div>
					<div class="xc_center">
						<table border="5px"  width="400" height="350"   cellpadding="10"px"  style="font-size:32px "  >  
	        			<tr >  
	            			<td align="center" valign="bottom" background="./images/1.png">课程大纲</td> 
	            			<td align="center" valign="bottom" background="./images/2.png">点击报名</td>
	            		</tr>  
	        			<tr>  
	            			<td align="center" valign="bottom" background="./images/3.png">就业薪资</td>  
	            			<td align="center" valign="bottom" background="./images/4.png">公开课</td>  
	            		</tr>  
        			</table>
					</div>
					<div class="xc_right" >
						<div class="xc_right_top">
							<h1 align="center">PHP</h1>
							<h3 align="center">PHP开发工程师</h3>
						</div>
						<div class="old_list">
							<ul >
								<li>PHP开发工程师薪资如何？</li>
								<li>PHP培训机构哪个好？</li>
								<li>如何正确选择PHP培训学校？</li>
								<li>PHP是什么？</li>
								<li>如何学好PHP呢？</li>
								<li>​沈阳PHP培训班哪家好?</li>
								<li>PHP培训学习小技巧？</li>
								<li>​怎么样才能学好PHP技术？</li>
							
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 尾部 -->
		<div class="footer clearfix" >
			<div class="footer_top">
				<div class="item1">
					<div class="item1_top" >
						<h3 align="center">培训课程</h3>
							
					</div>	
					<div class="item1_bottom">
							<ul align="center">
								<li>PHP开发</li>
								<li>HTML5全栈</li>
								<li>Java+大数据</li>
								<li>UI/UE设计师</li>
								<li>Linux云计算</li>
								<li>​Python全栈</li>
								
							
							</ul>
					</div>
				</div>
				<div class="item2">
					<div class="item2_top" >
						<h3 align="center">关于我们</h3>
							
					</div>	
					<div class="item2_bottom">
							<ul align="center">
								<li>招贤纳士</li>
								<li>联系我们</li>
								<li>学院概况</li>
								<li>师资介绍</li>
								
								
							
							</ul>
					</div>
				</div>
				<div class="item3">
					<div class="item3_top" >
						<h3 align="center">兄弟连社区</h3>
							
					</div>	
					<div class="item3_bottom">
							<ul align="center">
								<li>战地日记</li>
								<li>技术论坛</li>
								<li>交流群</li>
								<li>小电影</li>
								
								
							
							</ul>
					</div>
				</div>
				<div class="item4">
					<div class="item4_top" >
						<h3 align="center">服务中心</h3>
							
					</div>	
					<div class="item4_bottom">
							<ul align="center">
								<li>报名须知</li>
								<li>报名流程</li>
								<li>常见问题</li>
								<li>住宿安排</li>
								
							
							</ul>
					</div>
				</div>
				<div class="item5">
					<div class="item5_top" >
						<h4 align="center">关注我们</h4>
							
					</div>	
					<div class="item5_bottom">
						<div class="item5_bottom_left">
							
								<img src="./images/8.png" >
							
						</div>
						<div class="item5_bottom_right">
							<img src="./images/9.png" >
						</div>
					</div>
				</div>
				<div class="item6"></div>
				<div class="item7">
					<div class="item7_top" >
						<h3 align="center">400-700-1307</h3>
							
					</div>	
					<div class="item7_bottom">
						<h3 align="center">全体在线客服</h3>	
					</div>
				</div>
			</div>
			<div class="footer_bottom">
				 <h4 align="center">易第优（北京）教育咨询股份有限公司</h4> 
				
			</div>
		</div>
		
	</div>
</body>
</html>



/*重置样式*/
body,h1,h2,h3,h4,h5,h6,ul,li,p,a{
	margin:0;
	padding:0;
	text-decoration: none;
	list-style: none;
}

/*清除浮动*/
.clearfix:after,.clearfix:before{
	content:'';
	display: table;
	clear:both;
	zoom:1;
}
.float_left{
	float: left;
}
.float_right{
	float:right;
}
.container{
	min-width: 1200px;
}

/*外部容器样式*/
.wrap{
	min-width: 1200px;
	
}

/*头部样式*/
.header{

}

.header .header_top,.header_bottom{
	width:1200px;
	margin:0 auto;
	/*background:red;*/

}

.header_top{
	height: 40px;
	line-height: 40px;
	font-size: 13px;
	color:#bebebe;
	/*background: red;*/
}
.container{
	border-bottom:1px solid #bebebe;
}

.header_bottom_left{
	width: 390px;
	height: 62px;
	
}
.logo{
	width: 245px;
	height: 62px;

	background:url(../images/logo.png) no-repeat;
}

.border{
	height: 41px;
	border-right:1px solid #979797;
	margin-left:20px;
	margin-right: 20px;
}
.gpgs p{
	font-size: 12px;
	color:#b3b3b3;
	margin-bottom: 5px;

}
.gpgs .sbgp{
	color:#5f5858;
	font-size: 16px;
	font-weight: bold;
}

.header_bottom_center{
	width: 580px;
	height: 61px;
	
}


.header_bottom_right{
	width: 230px;
	height: 37px;
	
	font-size: 10px;
}
.header_bottom{
	margin-top:18px;
}
.header_bottom_center ul{
	margin: 0 auto;
	margin-left:50px;
}
.header_bottom_center ul li{
			
			line-height: 61px;
			text-align: center;
			margin-left: 30px;
			
			display:inline-block;
			
			
			/*鼠标移入改变鼠标形状*/
			cursor: pointer;
			box-sizing:border-box;


		}
.school1{line-height: 37px;
		text-align: center;
		margin-left: 30px;
		padding-left: 10px;
		padding-right: 10px;
		display:inline-block;
		border: 1px solid #bebebe
}
.school2{line-height: 37px;
		text-align: center;
		margin-left: 30px;
		padding-left: 10px;
		padding-right: 10px;
		display:inline-block;
		border: 1px solid #bebebe
}
/*========= 内容部分样式========================*/

.banner{
	
	width: 1200px;
	height: 398px;
	background-color:yellow;
	background-image: url(../images/Python.jpg);
	position: relative;
	margin:0 auto;
}
.banner_left,.banner_right{
	width: 234px;
	height: 398px;
	background:rgba(0,0,0,.6);
}
.banner_left{
	position: absolute;
	left:0;
	top:0;
}
.banner_right{
	position: absolute;
	left:966px;
	top:0;
}

.banner_left ul{
	width: 234px;
	
}
.banner_left ul li{
	width: 234px;
	height: 35px;
	color:#fff;
	line-height:35px;
	margin-top:12px;
	padding-left:40px;
	
	box-sizing:border-box;
	position:relative;

}
.banner_left ul li:hover{
	background:red;
}

.banner_left ul li span{
	position:absolute;
	right:50px;
}

.banner_right h2{
	height: 45px;
	color:#fff;
	font-size:22px;
	font-weight:400;
	text-align:center;
	line-height:45px;

} 

.banner_right ul li{
	color:#fff;
	height: 32px;
	line-height:32px;
}

.banner_right ul li:before{
	content:'';
	display:inline-block;
	width:6px;
	height:6px;
	background:#fff;
	margin-right:8px;
	margin-left:20px;
	margin-bottom:3px;

}

.banner_right ul li:hover{
	color:red;
}

.banner_bottom{
	width:1200px;
	height:140px;
	margin:0 auto;
	margin-top:10px;

	
}
.banner_bottom_left{
	width: 234px;
	height: 140px;
	float: left;
	
}


.free_class_top{
	width:1200px;
	height:137px;
	
	margin:0 auto;
	margin-top:50px;
	margin-bottom:10px;
}	
.free_class_bottom{
	width: 1200px;
	height: 40px;
	
	margin:0 auto;
	margin-bottom: 10px;
	

}	

.xc{
	min-width:1200px;
	height:400px;
	padding-top:50px;
	background:#f5f5f5;
	
	
}
.xc_content{
	width:1200px;
	height:350px;
	margin:0 auto;
	
}
.xc_left{
	width: 500px;
	height: 380px;
	float: left;
}
.xc_center{
	float: left;
}
.xc_right{
	width: 240px;
	height: 380px;
	float: left;
	margin-left: 30px;

}
.xc_right_top{
	width: 265px;
	height: 100px;
	background:#00cc99

}
.old_list{
	width: 265px;
	height: 280px;
}
.old_list ul li{
	
	height: 30px;
	line-height:30px;
}
/*尾部样式*/
.footer{
	width:1200px;
	
	margin:0 auto;
	

}
.footer_top{
	width: 1200px;
	height: 250px;
}
.item1{
	width: 150px;
	height: 170px;
	float: left;
}
.item1_top{
	width: 150px;
	height: 40px;
	margin-top: 50px
}
.item1_bottom{
	width: 150px;
	height: 170px;
}
.item2{
	width: 150px;
	height: 170px;
	margin-top: 50px;
	float: left;
}
.item2_top{
	width: 150px;
	height: 40px;
	
}
.item2_bottom{
	width: 150px;
	height: 170px;
}

.item3{
	width: 150px;
	height: 170px;
	margin-top: 50px;
	float: left;
}
.item3_top{
	width: 150px;
	height: 40px;
	
}
.item3_bottom{
	width: 150px;
	height: 170px;
}
.item4{
	width: 150px;
	height: 170px;
	margin-top: 50px;
	float: left;
}
.item4_top{
	width: 150px;
	height: 40px;
	
}
.item4_bottom{
	width: 150px;
	height: 170px;
}
.item5{
	width: 320px;
	height: 170px;
	margin-top: 50px;
	float: left;
}
.item5_top{
	width: 320px;
	height: 40px;
	
}
.item5_bottom{
	width: 320px;
	height: 170px;
	
}
.item5_bottom_left{
	width: 160px;
	height: 200px;
	margin-left: 35px;
	float: left;
	

}


}

.item5_bottom_right{
	width: 160px;
	height: 200px;
	
	
}

.item6{
	width: 1px;
	height: 150px;
	margin-top: 50px;
	margin-left: 40px;
	float: left;
	background: #bebebe

}
.item7{
	width: 150px;
	height: 170px;
	margin-top: 50px;
	float: left;
}
.item7_top{
	width: 150px;
	height: 40px;
	margin-top: 20px;
	margin-left: 30px;
}
.item7_bottom{
	width: 150px;
	height: 90px;
	margin-top: 50px;
	margin-left: 30px;
}
.footer_bottom{
	width: 1200px;
	height: 31px;

}




兄弟连学python


Python学习交流、资源共享群：563626388 QQ


Fredreck1919
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
springboot自定义starter实现redis-starter
confusingggg的博客
03-13 1120
springboot自定义starter实现redis缓存自启动全过程指导，同时对于项目可能的运行错误提供解决方案，100%没有问题。
兄弟连php课件,兄弟连php课件
weixin_35659653的博客
03-11 246
PPT内容这是兄弟连php课件，关于Gvim编辑器使用，包括gvim软件介绍，gvim配置文件，gvim自动缩进，gvim页面编码，gvim函数补全功能，gvim snipMate极速补全等内容，欢迎点击下载。本节目标1.gvim软件介绍2.gvim配置文件3.gvim自动缩进4.gvim页面编码5.gvim函数补全功能6.gvim snipMate极速补全Vim/Vi 简介Gvim工作模式命令模...
兄弟连使用php日期和时间制作一个日历程序源码,一个PHP日历程序
weixin_39717692的博客
03-23 120
一个PHP日历程序更新时间：2006年12月06日 00:00:00 作者：//if($HTTP_GET_VARS[year]==""){$HTTP_GET_VARS[year]=date("Y");}if($HTTP_GET_VARS[month]==""){$HTTP_GET_VARS[month]=date("n");}$month=$HTTP_GET_VARS[month];$year...
梦幻兄弟连-西游神魔战争即将开启
chungouya3754的博客
04-23 180
梦幻兄弟连-西游神魔战争即将开启 在战场上谁给我们信心，“兄弟”，在战场上谁给我们支援，“兄弟”，在战场上水给我们勇气，“兄弟”，有了兄弟，绝对无敌。“兄弟情谊高于一切”为了兄弟可以拼了命，战火中生死与共的兄弟情谊，感悟在战火中升华的兄弟情谊，随着这战鼓声，奋战到最后一刻。《梦幻奇游》是奇游...
[2014]兄弟连高洛峰 php教程5.5.1,2014PHP兄弟连全套教程
weixin_34070493的博客
04-13 220
教程名称：2014PHP兄弟连全套教程[2014]兄弟连高洛峰.PHP教程1.1.1.新版视频形式介绍.mp4165.93 MB[2014]兄弟连高洛峰.PHP教程1.1.2.BS结构软件类型介绍.mp4117.95 MB[2014]兄弟连高洛峰.PHP教程1.1.3.现在是Web2.0的时代.mp4139.28 MB[2014]兄弟连高洛峰.PHP教程1.1.4.Web开发标准.mp4118.7...
uni-app事件总线
最新发布
weixin_49021391的博客
10-27 740
uni-app事件总线
小学-综合素质【3】
robin9409的博客
03-09 1万+
1.写作题：阅读下面的材料，按要求作文。一株小草生长在田里，和水稻混杂在一起。一位老农看见这株小草，马上把它连根带叶地拔了起来，对身后的儿子说：“这种草最讨厌，它同水稻争肥料，而且生长又快，只要留下一节根，就会重新长出来，所以我们叫它‘荒田根草’。”说着，就把小草狠狠地抛到大路上，准备把它晒干。这时，恰巧有个园艺家走过，看见了这株小草，马上把它带回了城里，种在公园里的一块大空地上，每天浇水施肥。为了防止它被游人踩死，园艺家叫工人在小草四周围起了篱笆，插上牌子，上面写着：爱护草地，严禁践踏！园艺家还对工人说：
Ubuntu 上使用 LVM 轻松调整分区并制作快照-兄弟连IT教育
gcq1301958013的博客
09-10 665
Ubuntu 上使用 LVM 轻松调整分区并制作快照-兄弟连IT教育 Ubuntu的安装器提供了一个轻松“使用LVM”的复选框。它的描述中说，启用逻辑卷管理可以让你制作快照，并更容易地调整硬盘分区大小——这里将为大家讲述如何完成这些操作。 LVM是一种技术，某种程度上和RAID阵列或Windows上的“存储空间”类似。虽然该技术在服务器上更为有用，但是它也可以在桌面端PC上使用。 你应该在新
连玉君链接-Stata连享会
热门推荐
Stata连享会
05-31 1万+
A. 北京专场 (2018.7.23日-8.2日) 时间地点： 2018年7.23 日-8.2 日，首都师范大学 授课教师： 连玉君 (中山大学) 课程资料： 在线浏览课程大纲-PDF || 交通指南 报名咨询： 初级班 (7.23-25) || 高级班 (7.27-29) || 论文班 (7.31-8.2) 课程要点： 全面提升：完整的Stata学...
兄弟标签打印软件P-touch Editor 5.1.012官方中文版
07-16
P-touch Editor 5.1.012是一款专为中文用户设计的标签制作软件，支持与兄弟品牌的多种标签打印机配合使用。它以其直观的操作界面、丰富的模板库和自定义设计功能，使得无论是个人还是企业用户，都能轻松创建个性化、...
兄弟连2014年新版Linux视频教程课件
09-30
这是一套全面的教程，由知名的IT培训机构“兄弟连”制作，确保了内容的专业性和实用性。 【描述】中的"从云课堂下载下来的，绝对正宗的兄弟连2014年新版Linux视频教程课件"表明该资源是官方渠道获取的，质量可靠。...
驱动程序-打印机驱动-兄弟brother pt-9500pc标签打印机驱动 免费版.zip
09-20
在这个特定的压缩包中，我们关注的是兄弟（Brother）PT-9500PC标签打印机的驱动程序，这是一款专业用于制作标签的设备。了解这个驱动程序的细节和相关知识对于有效使用该打印机至关重要。 首先，让我们来深入理解...
兄弟 PT-9200dx驱动（xp/WIN7/WIN10）
08-02
标题中的“兄弟 PT-9200dx驱动（xp/WIN7/WIN10）”指的是Brother公司的PT-9200DX打印机在不同Windows操作系统下的驱动程序，包括Windows XP、Windows 7以及Windows 10。这些驱动是确保打印机能够与电脑正确通信的...
兄弟pt-2430pcz打印机驱动程序 v5.50a 官方最新版
07-10
此款驱动是兄弟pt-2430pcz电脑标签打印机驱动官方最新版，兄弟2430pcz延续了PT-2430PC的即插即用的优点，无须在电脑安装烦琐的驱动程序及编辑软件，只要通过数据线与电脑连接即可简单制作标签。兄弟pt-2430pcz产品...
（36）-- 城市级联
Fredreck1919的博客
02-28 7234
#连接数据库的城市级联&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;城市联动&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;select id=&quo
（27）-- 用Bootstrap写的OPPO官网商城
Fredreck1919的博客
01-23 2195
#用Bootstrap写的OPPO官网商城首页 Document body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 3000px; padding-top:20px; } .item1,
（28）-- 制作简易商品列表页
Fredreck1919的博客
01-24 2118
#用Bootstrap制作简易商品列表页 商品列表 body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 2000px; padding-top:20px; } .item1,.item2,.item3,.item4{
（22）-- 随机点名
Fredreck1919的博客
01-15 420
#用JS写的随机点名 随机点名 .nam{ width: 300px; height: 200px; border: 3px solid green; margin: 0 auto; margin-top: 100px; font-size: 50px; font-weight: 800; text-align: c
BroCMS数据库设计说明书 - LAMP兄弟连
文档由兄弟连团队编写，版本2.0，详细介绍了数据库设计的重要性、目的及过程。" 在数据库设计中，首先需要理解的是，设计不仅仅是关于创建表和字段，而是涉及到数据类型的选择、数据之间的关系定义以及数据的高效...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值