“优课教育”源码

最新推荐文章于 2024-06-04 08:02:09 发布

魑魅魍魉1024

最新推荐文章于 2024-06-04 08:02:09 发布

阅读量1.5k

点赞数 3

文章标签：前端 css

本文链接：https://blog.csdn.net/FJWpxy/article/details/127809603

版权



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游客教育网站</title>
    <link href="index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <div id="header">
        <ul class="nav">
            <li class="loge"><img src="images/logo.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/banner.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>

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

    <div id="footer">
        
        <p>Copyright © 2022-2030 Edu.com,All rights reserved.</p>
        <p>2020-2030,版权所有 优客网 00CP备 222222222</p>

    </div>
</body>
</html>


```css
*{
    margin:0;
    padding:0;
    list-style:none;
}

body{
    background:#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 solic #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:#6bdf2d;
    font-size:20px;
    font-weight:100;
    line-height:45px;
    text-align:center;
    color:#fff;
    margin-top:80px;
}

.current{
    width:958px;
    height:342px;
    background:#fff;
    border:1px solic #dcd2ba;
    padding:13px 0 0 20px;
}

.current dl{
    width:229px;
    height:330px;
    border:1px solic #dcd2ba;
    float:left;
    margin-right:5px;
}

.current dt{
    width:229px;
    height:212px;
    border-bottom:1px solic #dcd2bA;
}

.current01{
    width:229px;
    height:66px;
    background:#fff;
    line-height:66px;
    color:#7a7a7a;
    font-size:22px;
    text-align:center;
}

.current02{
    width:140px;
    height:38px;
    background:#6dbf2b 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;
}