黑马首页html及css程序编写
黑马首页html及css程序编写
用基础的html和css代码写了一个简单的网页
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">趣ITdiv>
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>
<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>
<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-10li>
<li>2016-11-10li>
<li>2016-11-10li>
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-10li>
<li>2016-11-10li>
<li>2016-11-10li>
ul>
<ul class="state2">
<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">
<ul>
<li>
北京校区地址1：北京市昌平区建材城西路金燕龙办公楼一层（总部）
li>
<li>
北京校区地址2：北京市昌平区北七家宏福创业园修正大厦3层
li>
<li>
免费咨询电话：400-618-9090
<a href="http://student.itheima.com/" 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 Reservedspan>
<span class="num">京ICP备16000000span>
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;
}
.img_underhr {
display: flex;
justify-content: space-between;
}
.serve_tel {
width: 180px;
height: 30px;
margin-top: 15px;
}
.top_menu {
display: flex;
justify-content: space-between;
color: #fff;
height: 50px;
line-height: 50px;
background-color: #000;
}
.top_menu div {
width: 300px;
text-align: center;
}
.top_menu div:hover {
background-color: red;
cursor: pointer;
}
.top_menu .top_menufir {
display: inline-block;
width: 604px;
text-align: center;
background-color: #f00;
}
.top_menu .top_menuend {
display: inline-block;
width: 100px;
text-align: center;
}
.main_menu {
display: flex;
justify-content: space-between;
}
.left_menu {
height: 370px;
width: 300px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.left_menu ul li {
width: 300px;
height: 52px;
color: #313131;
list-style: none;
border-bottom: 1px solid #ccc;
line-height: 50px;
text-align: center;
transition: 1s;
}
.left_menu ul li:hover {
background-color: #00f;
color: #fff;
opacity: 0.3;
cursor: pointer;
margin-left: 10px;
}
.main_picture:hover {
cursor: pointer;
}
.under_mainpic {
width: 1250px;
height: 80px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.under_mainpic ul {
display: flex;
justify-content: space-between;
}
.under_mainpic ul li {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 10px;
width: 300px;
list-style: none;
border-right: 1px solid #ccc;
}
.under_mainpic ul li:hover {
background-color: #ffa;
cursor: pointer;
}
.under_mainpic ul .other_pro {
width: 380px;
height: 80px;
}
.under_mainpic ul .other_pro .under_txt1 {
width: 120px;
height: 35px;
font-size: 15px;
font-weight: bold;
background-color: #ed4300;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 5%;
}
.under_mainpic ul .other_pro .under_txt1:hover {
color: #42426f;
cursor: pointer;
}
.under_mainpic ul .other_pro .under_txt1:active {
opacity: 0.8;
}
.mid1_header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
.mid1_headerend {
font-size: 10px;
}
.mid1_main {
display: flex;
justify-content: space-between;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.mid1_main>div {
width: 249px;
text-align: center;
border-right: 1px solid #ccc;
}
.mid1_main>div:hover {
cursor: pointer;
}
.mid1_main>div>div {
height: 30px;
width: 249px;
text-align: center;
line-height: 30px;
color: #fff;
background-color: #ed4300;
}
.mid2 .mid2_header {
height: 50px;
line-height: 50px;
}
.mid2_main {
display: flex;
justify-content: space-between;
}
.mid2_left {
display: flex;
flex-wrap: wrap;
width: 725px;
border-top: 1px solid #ccc;
}
.mid2_left>div {
width: 170px;
text-align: center;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.mid2_left>div:hover {
cursor: pointer;
}
.mid2_left>div>img {
padding: 5px;
}
.mid2_right {
width: 595px;
height: 230px;
border: 1px solid #ccc;
}
.mid2_righttop {
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 10px;
}
.mid2_righttop>span {
display: inline-block;
width: 100px;
height: 26px;
text-align: center;
line-height: 26px;
border: 2px solid #f00;
}
.mid2_righttop>select {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 2px solid #f00;
border-left: 0;
padding-left: 10px;
-webkit-appearance: none; /* Safari 和 Chrome */
-moz-appearance: none; /* Firefox */
background: transparent;
background: url("http://ourjs.github.io/static/2015/arrow.png")
no-repeat 90% center;
}
.mid2_rightmid .state1,.mid2_rightbottom .state2 .wait {
color: #f00;
}
.mid2_rightmid,.mid2_rightbottom {
display: flex;
justify-content: space-around;
}
.mid2_rightmid>ul>li,.mid2_rightbottom>ul>li {
list-style: none;
margin: 5px;
}
.mid2_rightmid>.jing>li,.mid2_rightbottom>.jing>li {
width: 20px;
height: 20px;
background-color: #d72502;
text-align: center;
line-height: 20px;
color: #fff;
border-radius: 20%;
font-weight: bold;
}
.mid2_rightbottom {
margin-top: 10px;
}
.mid3{
margin-top: 50px;
width: 100%;
height: 250px;
background-color: #f1f0f0;
}
.mid3_main {
display: flex;
justify-content: space-around;
}
.mid3_main>div {
text-align: center;
}
.bottom {
width: 100%;
height: 170px;
margin-top: 50px;
background-color: #fafafa;
}
.bottom_main {
margin: 0 auto;
display: flex;
justify-content: space-around;
width: 1250px;
}
.bottom_main ul li {
list-style: none;
color: #666;
margin-top: 5px;
}
.study,.about,.new {
font-size: 18px;
}
.bottom_mainfir ul,.bottom_mainsec ul,.bottom_mainthi ul {
width: 200px;
text-align: center;
border-right: 1px solid #ccc;
}
.bottom_mainfir ul li:hover,.bottom_mainsec ul li:hover,.bottom_mainthi ul li:hover {
cursor: pointer;
}
.bottom_mainend ul li {
margin-top: 3px;
}
.bottom_mainend ul li a {
display: inline-block;
color: #f00;
}
.bottom_mainend ul li span {
text-decoration: underline;
}
.bottom_mainend ul li span:hover {
cursor: pointer;
}
.line {
width: 1250px;
margin: 20px auto;
}
.deadline {
width: 1250px;
margin: 5px auto;
font-size: 10px;
}
.deadline span {
color: #333;
}
.deadline>.num {
color: #00e;
}
创建的index.html文件要与IMG文件夹和CSS文件夹在同一路径中，创建的index.css文件要在CSS文件夹里
用到的图片点此处下载