项目5“优课教育网站首页“代码

最新推荐文章于 2024-03-24 11:47:20 发布

kgym1002

最新推荐文章于 2024-03-24 11:47:20 发布

阅读量1.3k

点赞数 15

文章标签：前端 html css html5

本文链接：https://blog.csdn.net/kgym1002/article/details/135279048

版权

HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>优课教育网站首页</title>
        <link href="css/style5.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li class="logo"><img src="images/logo5.png" /><li>
                <li><a href="#">首页</a></li>    
                <li><a href="#">学校介绍</a></li>
                <li><a href="#">课程设置</a></li>
                <li><a href="#">师资力量</a></li>
                <li><a href="#">招生问答</a></li>
                <li><a href="#">教学活动</a></li>
            </ul>
        </div>
        <div id="content">
            <div class="banner"><img src="images/5banner5.jpg" /></div>
            <div class="style_bg">
                <div class="style">
                    <dl>
                        <dt class="left1"></dt><dd class="left2"><a href="#">大学专区</a></dd>
                        <dt class="left3"></dt><dd class="left4"><a href="#">求职专区</a></dd>
                    </dl>
                    <dl>
                       <dt class="center1"></dt><dd class="center2"><a href="#">高中专区</a></dd>
                       <dt class="center3"></dt><dd class="center4"><a href="#">考证专区</a></dd>  
                    </dl>
                    <dl class="third">
                        <dt class="right1"></dt><dd class="right2"><a href="#">线上精品课专区</a></dd>
                    </dl>
                </div>
            </div>
        </div>
        <h2>热门课程 / Popular courses</h2>
        <div class="current">
            <dl>
                <dt class="match_1"></dt>
                <dd class="current01">软件工程师课程</dd>
                <dd class="current02"><a class="three" href="#">高级IT人才的捷径</a></dd>
            </dl>
            <dl>
                <dt class="match_2"></dt>
                <dd class="current01">Java课程</dd>
                <dd class="current02"><a class="three" href="#">工程师必修课程</a></dd>
            </dl>
            <dl>
                <dt class="match_3"></dt>
                <dd class="current01">Python课程</dd>
                <dd class="current02"><a class="three" href="#">热门行业新趋势</a></dd>
            </dl>
            <dl>
                <dt class="match_4"></dt>
                <dd class="current01">UI课程</dd>
                <dd class="current02"><a class="three" href="#">设计师必修课程</a></dd>
            </dl>
        </div>
        <div id="footer">
            <p>Copyright © 2020-2030 Edu.com, All right reserved.</p>
            <p>2020-2030，版权所有 优课网 00CP 备 2222222222</p>
        </div>
    </body>
</html>

注意图片名称。

css样式

*{margin: 0; padding: 0; list-style: none;}
body{background-color: #fff9ed; font-family: "微软雅黑"; font-size: 14px;}
a:link,a:visited{text-decoration: none; color: #fff; font-size: 16px;}
#header{
    width: 100%;
    height: 128px;
    background: url(../images/head_bg.jpg) repeat-x;
    border-bottom: 3px solid #d5d5d5;
}
.nav{
    width: 980px;
    margin: 0 auto;
}
li{float: left;}
li a{
    display: inline-block;
    height: 91px;
    width: 119px;
    text-align: center;
    line-height: 70px;
}
li a:hover{background: url(../images/xuanfu.png) center center;}
#content{
    width: 980px;
    margin: 0 auto;
}
.style_bg{
    width: 908px;
    height: 330px;
    background: #6dbf2d;
    padding:10px 36px 5px;
}
.style{
    width: 892px;
    height: 314px;
    background: #fff;
    padding: 8px 10px 8px 6px;
}
.style dl{
    width: 279px;
    height: 313px;
    float: left;
    margin-left: 4px;
}
.style .third{
    width: 322px;
}
.style dt,.style dd{
    float: left;
}
.style .left1,.style .left3,.style .center1,.style .center3{
    width: 162px;
}
.style .left2,.style .left4,.style .center2,.style .center4,.style .right2{
    width: 117px;
}
.style .left1,.style .left2,.style .center1,.style .center2{
    margin-bottom: 8px;
}
.style .left1{
    height: 169px;
    background: url(../images/pic01.jpg) no-repeat;
} 
.style .left2{
    height: 160px;
    line-height: 169px;
}
.style .left3{
    height: 137px;
    background: url(../images/pic02.jpg) no-repeat;
}
.style .left4{
    height: 137px;
    line-height: 137px;
}
.style .center1{
    height: 117px;
    background: url(../images/pic03.jpg) no-repeat;
}
.style .center2{
    height: 117px;
    line-height: 117px;
}
.style .center3{
    height: 188px;
    background: url(../images/pic04.jpg) no-repeat;
}
.style .center4{
    height: 188px;
    line-height: 188px;
}
.style .right1{
    width: 205px;
    height: 314px;
    background: url(../images/pic05.jpg) no-repeat;
}
.style .right2{
    height: 314px;
    line-height: 314px;
}
.style a{
    display: block;
    background: #f2f2f2;
    text-align: center;
    color: #333;
}
.style a:hover{background: #6dbf2d;}
h2{
    width: 259px;
    height: 45px;
    background: #6dbf2d;
    font-size: 20px;
    font-weight: 100;
    line-height: 45px;
    color: #fff;
    margin-top: 80px;
    text-align: center;
    margin-left: 246px;
}
.current{
    width: 958px;
    height: 342px;
    background: #fff;
    border: 1px solid #dcd2ba;
    padding: 13px 0 0 20px;
    margin: 0 auto;
}
.current dl{
    width: 229px;
    height: 330px;
    border: 1px solid #dcd2ba;
    float: left;
    margin-right: 5px;
}
.current dt{
    width: 229px;
    height: 212px;
    border-bottom: 1px solid #dcd2ba;
}
.current01{
    width: 229px;
    height: 66px;
    background: #fff;
    line-height: 66px;
    text-align: center;
    color: #7a7a7a;
    font-size: 22px;
}
.current02{
    width: 140px;
    height: 38px;
    background: #6dbf2d url(../images/gouwu.jpg) left center no-repeat;
    margin: 0 14px;
    line-height: 38px;
    padding-left: 60px;
    color: #fff;
}
.match_1{background: url(../images/match01.jpg) center center no-repeat;}
.match_2{background: url(../images/match02.jpg) center center no-repeat;}
.match_3{background: url(../images/match03.jpg) center center no-repeat;}
.match_4{background: url(../images/match04.jpg) center center no-repeat;}
.current a{display: inline-block; width: 180px; height: 38px;}
#footer{
    width: 100%;
    height: 103px;
    background: #020202;
    color: #fff;
    line-height: 26px;
    text-align: center;
    padding-top: 50px;
    margin-top: 65px;
}