⿊马⾸页html及css程序编写⿊马⾸页html及css程序编写
⽤基础的html和css代码写了⼀个简单的⽹页
html代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<link rel="stylesheet"href="./CSS/index.css">
<title>⿊马⾸页</title>
</head>
<body>
<div class="all">
<div class="header">
传智播客旗下⾼端IT教育品牌
<div class="header_end">
如何报名 | 常见问题 | 登录报名系统
</div>
</div>
<hr>
<div class="img_underhr">
<img class="logo_heima"src="./IMG/logo.png"alt="⿊马logo">
<img class="serve_tel"src="./IMG/123.jpg"alt="">
</div>
<div class="top_menu">
<span class="top_menufir">新⼿指南</span>
<div>⾸页</div>
<div>课程介绍</div>
<div>视频教程</div>
<div>在线公开课</div>
<div>如何报名</div>
<div>⿊马论坛</div>
<div class="top_menuend">趣IT</div>
</div>
<div class="main_menu">
<div class="left_menu">
<ul>
<li>认识⿊马，从这⾥开始！</li>
<li>⼀张帖看完⿊马4个⽉学习⽣活</li>
<li>我们该选择学习哪门课程？</li>
<li>没有基础适不适合学编程？</li>
<li>校区分布图，我该选择哪⼀所？</li>
<li>新⽣报到注意事项？</li>
<li>⿊马程序员各学科学费价⽬表</li>
</ul>
</div>
<div class="main_picture">
<img src="./IMG/948-371-11.jpg"alt="主图⽚">
</div>
</div>
<div class="under_mainpic">
<ul>
<li class="other_pro">
<div class="under_txt1">我还有其它问题</div>
</li>
<li>
<img src="./IMG/1415438272.jpg"alt="相机">
<span class="under_txt2">⼀张帖看完<br>⿊马所有学科介绍视频</span>
</li>
</li>
<li>
<img src="./IMG/small_icon2.jpg"alt="电视">
<span class="under_txt3">⼀张帖看完<br>⿊马所有薪源</span>
</li>
<li>
<img src="./IMG/541.jpg"alt="地图">
<span class="under_txt4">⼀张图看清<br>⿊马所有校区</span>
</li>
<li>
<img src="./IMG/small_icon4.jpg"alt="摄像头">
<span class="under_txt5">登陆报名系统<br>开启⿊马⼊学流程</span>
</li>
</ul>
</div>
<div class="mid1">
<div class="mid1_header">
<p>最新优惠</p>
<div class="mid1_headerend">Android、JavaEE、iOS学科⿊马⼊学教程</div> </div>
<div class="mid1_main">
<div>
<img src="./IMG/333.jpg"alt="喇叭">
<div>全国各校区双元基础班免费</div>
</div>
<div>
<img src="./IMG/333.jpg"alt="喇叭">
<div>全国各校区双元基础班免费</div>
</div>
<div>
<img src="./IMG/333.jpg"alt="喇叭">
<div>全国各校区双元基础班免费</div>
</div>
<div>
<img src="./IMG/333.jpg"alt="喇叭">
<div>全国各校区双元基础班免费</div>
</div>
<div>
<img src="./IMG/333.jpg"alt="喇叭">
<div>全国各校区双元基础班免费</div>
</div>
</div>
</div>
<div class="mid2">
<div class="mid2_header">前端与移动开发课程</div>
<div class="mid2_main">
<div class="mid2_left">
<div>
<img src="./IMG/JYKC1.jpg"alt="就业班">
<div>就业班课程介绍</div>
</div>
<div>
<img src="./IMG/JCKC1.jpg"alt="基础班">
<div>基础班课程介绍</div>
</div>
<div>
<img src="./IMG/ZYFZQJ1.jpg"alt="职业发展">
<div>职业发展前景</div>
</div>
<div>
<img src="./IMG/LXYJYFX1.png"alt="⽼学员">
<div>⽼学员经验分享</div>
</div>
<div>
<img src="./IMG/BJHD1.jpg"alt="班级">
<div>班级活动（最新开班）</div>
<div>班级活动（最新开班）</div>
</div>
<div>
<img src="./IMG/JYXZ1.png"alt="薪资">
<div>就业薪资</div>
</div>
<div>
<img src="./IMG/SPXZ1.png"alt="下载">
<div>视频下载</div>
</div>
<div>
<img src="./IMG/RHBM1.png"alt="报名">
<div>如何报名</div>
</div>
</div>
<div class="mid2_right">
<div class="mid2_righttop">
<span>选择校区</span>
<select name="校区"id="1">
<option value="北京校区">北京校区</option>
<option value="上海校区">上海校区</option>
<option value="⼭东校区">济南校区</option>
<option value="杭州校区">杭州校区</option>
<option value="苏州校区">重庆校区</option> </select>
</div>
<div class="mid2_rightmid">
<ul class="jing">
<li>京</li>
<li>京</li>
<li>京</li>
</ul>
<ul>
<li>前端就业班</li>
<li>前端就业班</li>
<li>前端就业班</li>
</ul>
<ul>
<li>2016-11-10</li>
<li>2016-11-10</li>
<li>2016-11-10</li>
</ul>
<ul class="state1">
<li>抢报中</li>
<li>抢报中</li>
<li>抢报中</li>
</ul>
</div>
<div class="mid2_rightbottom">
<ul class="jing">
<li>京</li>
<li>京</li>
<li>京</li>
</ul>
<ul>
<li>前端就业班</li>
<li>前端就业班</li>
<li>前端就业班</li>
</ul>
<ul>
<li>2016-11-10</li>
<li>2016-11-10</li>
<li>2016-11-10</li>
</ul>
<ul class="state2">
<li class="wait">抢报中</li>
<li class="wait">抢报中</li>
<li>已开班</li>
<li>已开班</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mid3">
<img src="./IMG/jb.png"alt="⿊马保障">
<div class="mid3_main">
<div>
<img src="./IMG/kc.png"alt="课程">
<div>
⿊马课程升级<br>⽼学员可免费学习最新课程
</div>
</div>
<div>
<img src="./IMG/bz.png"alt="帮助">
<div>
黑马程序员前端全套视频⿊马学员遭遇重⼤变故<br>⿊马基⾦会提供全天候帮助
</div>
</div>
<div>
<img src="./IMG/xy.png"alt="响应">
<div>
⽼学员遭遇技术困难<br>⿊马技术响应
</div>
</div>
<div>
<img src="./IMG/fw.png"alt="服务">
<div>
学员创业，⿊马提供<br>⼈才、技术、资⾦服务
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom_main">
<div class="bottom_mainfir">
<ul>
<li class="study">学习园地</li>
<li>视频下载</li>
<li>⿊马论坛</li>
<li>免费公开课</li>
</ul>
</div>
<div class="bottom_mainsec">
<ul>
<li class="about">关于我们</li>
<li>联系⽅式</li>
<li>公司⼤事</li>
<li>公司简介</li>
</ul>
</div>
<div class="bottom_mainthi">
<ul>
<li class="new">新⼿指南</li>
<li>如何报名</li>
<li>⾃学教程</li>
<li>报名条件</li>
<li>意见建议</li>
</ul>
</div>
<div class="bottom_mainend">
<div class="bottom_mainend">
<ul>
<li>
北京校区地址1：北京市昌平区建材城西路⾦燕龙办公楼⼀层（总部）
</li>
<li>
北京校区地址2：北京市昌平区北七家宏福创业园修正⼤厦3层
</li>
<li>
免费：400-618-9090
<a href="student.itheima/"target="_blank">点击查询</a>
</li>
<li>
开设学科：
<span>Android培训</span>、
<span>JavaEE培训</span>、
<span>iOS培训</span>、
<span>PHP培训</span>、
<span>前端与移动开发培训</span>
</li>
</ul>
</div>
</div>
<div class="line">
<hr>
</div>
<div class="deadline">
<span>传智播客</span>
<span>版权所有Copyright 1999-2016,CSDN.NET.All Rights Reserved</span> <span class="num">京ICP备16000000</span>
</div>
</div>
</body>
</html>
css代码部分
*{
margin: 0;
padding: 0;
}
.all{
width: 1250px;
margin: 0 auto;
}
img{
transition: 1s;
}
img:hover{
transform:scale(1.1);
}
.header{
display: flex;
justify-content: space-between;
font-size: 10px;
color: #8c8c8c;
}
.header_end:hover{
cursor: pointer;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论