zoukankan      html  css  js  c++  java
  • 02-CSS基础与进阶-day7_2018-09-07-21-42-30

    08固定宽度且居中布局.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           * {
                 padding: 0;
                 margin: 0;
           }
    
           .top,
           .banner,
           .main,
           .footer {
                  width: 960px;
                  text-align: center;
                  margin: 0 auto;
                  border: 1px solid #ccc;
                  margin-bottom: 10px;
           }
    
           .top {
                  height: 80px;
                  background-color: pink;
           }
    
           .banner {
                   height: 120px;
                   background-color: blue;
           }
    
           .main {
                  height: 500px;
                  background-color: skyblue;
           }
    
           .left {
                 width: 300px;
                 height: 500px;
                 background-color: purple; 
                 float: left;
           }
    
           .right {
                  width: 600px;
                  height: 500px;
                  background-color: gray;
                  float: right;
           }
    
           .footer {
                   height: 140px;
                   background-color: #000;
           }
    
    
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="banner"></div>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </body>
    </html>

     09通栏分布型.html

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           * {
                 padding: 0;
                 margin: 0;
           }
    
           ul {
                  list-style: none; /*取消列表的默认样式圆点*/
           }
    
           .top {
                  height: 80px;
                  width: 100%;
                  background-color: pink;
           }
    
           .banner {
                   width: 960px;
                   height: 120px;
                   margin: 20px auto;
                   border-radius: 15px;
                   background-color: blue;
           }
    
           .main {
                  width: 960px;
                  margin: 0 auto;
                  height: 500px;
                  background-color: skyblue;
           }
    
           .main li {
               width: 240px;
               height: 500px;
               background-color: red;
               float: left;
           }
    
           .main li:nth-child(even) {
                  background-color: green;
           }
    
           
    
           .footer {
                   height: 140px;
                   background-color: #000;
           }
    
    
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="banner"></div>
        <div class="main">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="footer"></div>
    </body>
    </html>
  • 相关阅读:
    iOS开发数据库篇—SQLite简单介绍
    iOS FMDatabase 本地数据库的创建和几个基本使用方法
    iOS开发-CoreMotion框架
    ios中陀螺仪CoreMotion的用法
    iOS摄像头和相册-UIImagePickerController-浅析
    iOS使用AVCaptureSession自定义相机
    在iOS上实现一个简单的日历控件
    iOS开发UI篇—Button基础
    在Virt-manager中使用snapshot功能
    Node.js学习
  • 原文地址:https://www.cnblogs.com/HiJackykun/p/11068397.html
Copyright © 2011-2022 走看看