黑马首页html及css程序编写

最新推荐文章于 2021-11-19 21:30:51 发布

哼·哈

最新推荐文章于 2021-11-19 21:30:51 发布

阅读量3.1k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/dingdangmao0m0/article/details/103714953

版权

黑马首页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>
                    <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-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>已开班</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 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;
}

.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文件夹里
用到的图片点此处下载

哼·哈

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
黑马首页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"> ...
复制链接

扫一扫