html+css实战131-header布局

index.css

 
/* index.css是用来美化首页的 */
* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}
 
li {
    list-style: none;
}
a {
    text-decoration: none;
}
 
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
 
 
 
body{
    background-color: #f3f5f7;
}
 
.wrapper{
    width: 1200px;
    margin: 0 auto;
}
.header{
    height: 42px;
    background-color: pink;
    margin: 30px;
}

index.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>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="header wrapper">1</div>
</body>
</html>

posted @   前端导师歌谣  阅读(52)  评论(0)  编辑  收藏  举报
相关博文：
·  html+css实战137-banner-布局
·  html+css实战132-logo和nav布局
·  实战整体布局学习上
·  html+css布局小技巧
·  Html+Css网页设计(一)
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示