#用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

（20）-- 制作兄弟连首页相关推荐

  1. 使用html+css+js制作小米首页

    文章目录 使用html+css+js制作小米首页 1.html制作小米官网页面结构(`index.html`) 2.使用css设置公共样式(`base.css`) 3.使用css设置页面元素样式(`i ...

  2. HTML如何制作百度首页？代码是什么

    本篇文章给大家带来的内容是关于HTML如何制作百度首页?代码是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更加牢固, ...

  3. HTML5|吭哧吭哧制作小米首页一小部分内容

    制作小米首页部分(基础中的基础) 最近学校里来了一个培训机构做宣传,我就跟着偷摸地学了一丢丢东西,主要是讲如何用HTML5制作网页. 首先,可以了解一下HTML5与HTML4的区别: 字太多了,还是自 ...

  4. 首页轮转html代码,js制作网站首页图片轮播特效代码

    本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 图片轮播 .warp{ width: 600px; height: 750px; position: re ...

  5. HTML+CSS好看的小黄人网页制作（首页部分）

    效果如下: 整体效果: body部分动图: 导航栏二级菜单跳转: 代码部分: 首页HTML代码: <!DOCTTYPE html> <html lang="en" ...

  6. html制作百度首页的图片不显示,html实现像百度的首页效果一样的背景图（代码）...

    本篇文章给大家带来的内容是关于html实现像百度的首页效果一样的背景图(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前在百度知道我提问过这一个问题,后来解决了.不过好多人 ...

  7. python测试开发django（20）--admin首页和title修改

    前言 django的admin首页默认显示的"Django管理",title显示的是"Django站点管理员",这里的文案内容可以修改成自己项目的后台页面内容 ...

  8. 蓝桥杯web：5【页面布局】制作网站首页

    考试需求 请完善 css/style.css 样式文件,让知乎日报首页呈现如下所示的效果(页面整体宽度 1024px): 关键尺寸批注如下:(可以通过在图片上右键->"在新标签页打开图 ...

  9. 制作网站首页（小兔鲜儿电商购物平台）

    目录 项目前置 分析布局 头部模块 底部模块 项目前置 <!DOCTYPE html> <html lang="zh-CN"> <head>&l ...

最新文章

  1. Fiddler无法抓取HTTPS的问题，Fiddler证书无法安装终极解决方案，
  2. java：大数运算 高精度乘法
  3. Elastic-Job功能特性
  4. java weblogic 配置_java----weblogic部署应用
  5. MySQL中count(*)用法
  6. bzoj 1095 捉迷藏
  7. python set集合_玩转Python集合，这一篇就够了！
  8. Web系统开发构架再思考-前后端的完全分离 MVVM
  9. [SAP ABAP开发技术总结]动态修改选择屏幕
  10. Visual Studio 2012安装教程
  11. java 时间计算_Java程序运行时间计算
  12. iocp中GetQueuedCompletionStatus 121 信号灯超时时间已到 (error sem timeout)
  13. java各种优秀开源库收集
  14. android开发入门教程
  15. 把一个人的特点写具体作文_五年级把一个人的特点写具体作文500字5篇
  16. 微服务网关Gateway基本知识(一)
  17. python内置对象相关方法汇总
  18. 【面试】Raft算法详解
  19. 2015CDAS中国数据分析师行业峰会:R语言量化投资数据分析应用
  20. 点关于点旋转计算新坐标

热门文章

  1. 微信小程序购物商城定制开发
  2. aix服务器怎么修改ip,AIX使用命令修改网卡IP地址，永久生效
  3. 深度学习之目标检测与目标识别
  4. 简述计算机地图制图的主要阶段,计算机地图制图原理、特点及发展趋势
  5. 关于GA、SNAPSHOT等版本号的意义
  6. 影院售票系统java和数据库_影院售票管理系统的设计与实现(SSH,SQLServer)(含录像)...
  7. 九点标定，贴合，视觉引导定位通用方法
  8. 游戏特效设计用什么制作的？
  9. docker 部署es 集群 elasticsearch
  10. Qt设计师如何添加QToolBar工具栏