一个简单的CSS+html页面

最新推荐文章于 2020-11-17 16:30:08 发布

爱睡觉的辉辉

最新推荐文章于 2020-11-17 16:30:08 发布

阅读量418

点赞数 1

分类专栏：运维开发文章标签： html css

本文链接：https://blog.csdn.net/yinghuiyangliu/article/details/103328926

版权

开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

运维

1 篇文章 0 订阅

订阅专栏

https://zyhyangliu.com

自己写了一个简单的CSS 一面，下面是代码：

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title>Title</title>
      <style>
             *{
               margin: 0;
               padding: 0;
             }
             body{
               background: rgb(205, 174, 153);
             }
             .header{
               width: 1200px;
               height: 100px;
               background-color: rgb(66, 83, 207);
               margin: 0 auto;
               text-align: left;
               line-height: 100px;
               font-size: 60px;
               padding-left: 10px;
               padding-right  : 10px;
               margin-top: 10px;
             }
             .header div{
                 float: right;
                 line-height: 100px;
                 color: white;
                 font-size: 10px;
             }
             .side{
                 background-color: white;
                 width: 250px;
                 height: 1000px;
                 float: right;
                 margin-right: 40px;
                 line-height: 80px;
             }
             .content{
                 background-color: white;
                 width: 1200px;
                 height: 300px;
                 margin: 0 auto;
                 padding-left: 10px;
                 padding-right: 10px;
                 margin-top: 15px;
             }
             .foot{
                 background-color: black;
                 width: 1200px;
                 height: 30px;
                 margin: 0 auto;
                 padding: 10px;
                 line-height: 30px;
                 color: white;
                 text-align: center;

             }
             .th{
               background-color: white;
               width: 1200px;
               height: 300px;
               margin: 0 auto;
               padding-left: 10px;
               padding-right: 10px;
               margin-top: 15px;
             }
      </style>
</head>
<body>
      <div class="side">
               <h1>这里是侧边栏</h1>
               <hr>
               <h3>下面可以添加内容</h3>
               <hr>
               .<br>
               .<br>
               .<br>
               .<br>
               .<br>
               .<br>
               <hr>
      </div>

      <div class="header">
               ZYH_css
               <div>
                  首页 | 留言 | 联系我
               </div>
      </div>
      <div class="content">
               <h1>这是我的第一篇文章</h1>
               <hr>
               <p>下面这些可以是文章的内容......</p>
      </div>
      <div class="content">
               <h1>这是我的第二篇文章</h1>
               <hr>
               <p>下面这些可以是文章的内容......</p>
      </div>
      <div class="th">
               <h1>这是我的第三篇文章</h1>
               <hr>
               <p>下面这些可以是文章的内容......</p>
      </div>

      <div class="foot">
              By zyh_Test | css 2019
      </div>


</body>
</html>

欢迎来我的博客zyhyangliu.com