《优课教育》

最新推荐文章于 2024-10-07 20:56:37 发布

hl20050330

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量758

点赞数 24

文章标签：前端 html5 html css

本文链接：https://blog.csdn.net/hyw20050330/article/details/135151133

版权

《HTML》样式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>优课教育网站首页</title>
       <link rel="stylesheet" href="css/style05.css"/>
   </head>
   <body>
       <div id="header">
           <ul class="nav">
               <li class="logo"><img src="img/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="img/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>
       </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 rights reserved.</p>
           <p>2020-2030,版权所有优课网 00cp 备2222222222</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(../img/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(../img/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(../img/pic01.jpg) no-repeat;
}
.style .left2{
   height:169px;
   line-height:169px
}
.style .left3{
   height:137px;
   background:url(../img/pic02.jpg) no-repeat;
}
.style .left4{
   height:169px;
   line-height:137px
}
.style .center1{
   height:117px;
   background:url(../img/pic03.jpg) no-repeat;
}
.style .center2{
   height:117px;
   line-height:117px
}
.style .center3{
   height:188px;
   background:url(../img/pic04.jpg) no-repeat;
}
.style .center4{
   height:188px;
   line-height:188px;
}
.style .right1{
   width:205px;
   height:314px;
   background:url(../img/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;
   text-align: center;
   color:#fff;
   margin-top: 80px;
   /* text-align: center; */
   margin: 0 auto;
   margin-left: 358px;
   margin-top: 50px;
   /* left: auto; */
}
.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;
   float:left;
   border:1px solid #dcd2ba;
   margin-right:5px;
}
.current dt{
   width:229px;
   height:212px;

   border-bottom:1px solid #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: #6dbf2d url(../img/gouwu.jpg) left center no-repeat;
   margin:0 14px;
   padding-left:60px;
   color:#fff;
   line-height:38px;
   /* padding-left: 60px;
   color :#fff; */
}
.match_1{
   background :url(../img/match01.jpg) center center no-repeat;
   }
.match_2{
   background :url(../img/match02.jpg) center center no-repeat;
   }
.match_3{
   background :url(../img/match03.jpg) center center no-repeat;
   }
.match_4{
   background :url(../img/match04.jpg) center center no-repeat;
   }
/* .current a{display:inline-block; width:180px; height:38px;} */
.current a{
   aisplay :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;
}