zoukankan      html  css  js  c++  java
  • css 样式备忘录

    1、使用百分比设置宽度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>AA25.CN_一列自适应宽度</title>
    <style type="text/css">
    <!--
    #layout {
     border: 2px solid #A9C9E2;
     background-color: #E8F5FE;
     height: 200px;
     width: 80%;
    }
    -->
    </style>
    </head>
    <body>
    <div id="layout">一列自适应宽度(AA25.CN)</div>
    </body>
    </html>

    2、div容器属性设置,设置容器自适应并居中。

     margin:0px auto;

    3、div多列百分比布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>二列宽度自适应——AA25.CN</title>
    <style type="text/css">
    <!--
    #left {
     background-color: #E8F5FE;
     border: 1px solid #A9C9E2;
     float: left;
     height: 300px;
     width: 20%;
    }
    #right {
     background-color: #F2FDDB;
     border: 1px solid #A5CF3D;
     float: left;
     height: 300px;
     width: 70%;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="left">左列——(AA25.CN)</div>
    <div id="right">右列——二列宽度自适应(AA25.CN)</div>
    </body>
    </html>
  • 相关阅读:
    jQuery.qrcode二维码插件生成网页二维码
    JavaScript 常用方法
    jQuery——样式与动画
    jQuery——事件
    js基础(使用Canvas画图)
    ES6
    正则表达式总结及常规的正则表达式校验
    jQuery基础介绍
    weblogic 数据源高可用配置
    win10 查看端口是否被占用以及杀进程
  • 原文地址:https://www.cnblogs.com/KQNLL/p/9539417.html
Copyright © 2011-2022 走看看