【无标题】

最新推荐文章于 2024-10-11 13:58:34 发布

缪绅伟

最新推荐文章于 2024-10-11 13:58:34 发布

阅读量78

点赞数

文章标签： html c语言 java

本文链接：https://blog.csdn.net/m0_61686900/article/details/121534406

版权

<!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 rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header w">
        <div class="logo">
            <img src="images/logo_03.png" alt="">
        </div>                                                                                                                  
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <span>
                <input type="text" value="输入关键词">
            </span>
            <button></button>
        </div>
    </div>
    <!-- header结束 -->
    <!-- banner开始 -->
    <div class="banner">
        <div class="w">
           <div class="subnav">
               <ul>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
                <li><a href="#">前端开发<span></span></a></li>
               </ul>
           </div>
        </div>
    </div>
</body>
</html>* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
body {
    background-color: #f3f5f7;
}
a {
    text-decoration: none;
}
.w {
    width: 1200px;
    margin: 0 auto;
}
.header {
     height: 42px;
     margin:30px auto;
}
.logo {
    margin-right: 70px;
    float:left;
}
.nav {
    float: left;
}
.nav ul li {
    float: left;
    margin-left: 39px;
}
.nav ul li a {
    display: block;
    padding: 0 10px;
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}
.search {
    float:left;
}
.search input {
    float: left;
    height: 40px;
    width: 360px;
    padding-left: 20px;
    border: 1px solid #00a4ff;
    border-right: none;
    font-size: 14px;
    color: #bfbfbf;
}
.search button {
    float: left;
    border: none;
    width: 50px;
    height: 42px;
    background: url(images/sosuo_03.png);
}
.banner {
    height: 420px;
    background:#1c036c url(images/banner_03.png) no-repeat center-top;
}
.subnav {
    float: left;
    height: 420px;
    width: 150px;
    padding:0 20px;
    background-color: rgba(0,0,0,.3);
}
.subnav ul li { 
    height: 450px;
    line-height: 45px;
}
.subnav ul li a {
    color: #fff;
    font-size: 14px;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.subnav span {
    float: right;
}