蓝桥web 上中下布局 Html+Css静态页面代码

Forward九街

已于 2023-03-30 16:42:02 修改

阅读量180

点赞数

文章标签： css html 前端

于 2023-03-30 16:41:31 首次发布

本文链接：https://blog.csdn.net/weixin_65270579/article/details/129860755

版权

index.html部分

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>蓝桥知识网</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <!--TODO：请补充代码-->

  <div class="header">
    <div class="wrap">
      <div class="nav">
        <h1>蓝桥知识网</h1>
        <ul>
          <li>首页</li>
          <li>热门技术</li>
          <li>使用手册</li>
          <li>知识库</li>
          <li>练习题</li>
          <li>联系我们</li>
          <li>更多</li>
        </ul>
      </div>
      <div class="content">
        <div class="title">蓝桥云课</div>
        <div class="welcome">随时随地丰富你的技术栈！</div>
        <div class="join">加入我们</div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="wrap">
      <ul>
        
        <li>
          <div>人工智能</div>
          <p class="content">人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
  </p> </li>
      
        <li>
          <div>前端开发</div>
          <p class="content">前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
  </p></li>
       
        <li>
          <div>后端开发</div>
          <p class="content">后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
</p></li>
       
        <li>
          <div>信息安全</div>
          <p class="content">ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
  </p></li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <div class="wrap">
      <div class="verson">© 蓝桥云课 2022</div>
      <div class="address">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
    </div>
  </div>
</body>

</html>

style.css部分

/*
 TODO：请补充代码
*/
*{
    margin:0;
    padding:0px;
    box-sizing:border-box;
}
.wrap{
    width:1024px;
    margin:0 auto;
}
li{
    list-style:none;
}
.header{
    background-color:#a6b1e1;
    padding-top:13px;
}
.header .wrap .nav{
    display:flex;
    justify-content:space-between;
    height:46px;
}
.header .wrap .nav h1{
    font-size:18px;
    color:white;
}
.header .wrap .nav ul{
    display:flex;
}
.header .wrap .nav ul li{
    margin-right:16px;
    font-size:16px;
    color:white;
}
.header .wrap .content{
    text-align: center;
    height:427px;
}
.header .wrap .content .title{
    margin-top:30px;
    font-size:45px;
    color:black;
}
.header .wrap .content .welcome{
    margin-top:62px;
    color:white;
    font-size:21px;
   
    font-weight:200px;
}
.header .wrap .content .join{
    border-radius:2px;
    color:#efbfbf;
    font-size:18px;
    box-shadow:inset 0 0 0 2px #efbfbf;
    margin-top:36px;
   width:130px;
   height: 30px;
   line-height:30px;
   margin-left:auto;
   margin-right:auto;
   
}
.main{
    padding-top:74px;
}
.main .wrap{
    height:302px;
}
.main .wrap ul{
    display: flex;
    width: 1024px;
    flex-wrap: wrap;
}
.main .wrap ul li{
    width:50%;
    height:144px;
    padding-right:20px;
}
.main .wrap ul li div{
    font-size:30px;
    font-weight:200;
    color: black;
}
.main .wrap ul li p.content{
    font-size:18px;
    color:#aaa;
    line-height:1.4em;
}
.footer .wrap{
    height:80px;
    font-size:14px;
    text-align: center;
}
.footer .wrap .verson{
    margin-top:30px;
}
.footer .wrap .address{
    margin-top:10px;
}

效果图：