zoukankan      html  css  js  c++  java
  • html+css第三篇

    css reset 原则:
    但凡是浏览默认的样式,都不要使用。
    body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;}
    ol,ul{margin:0;padding:0;list-style:none;}
    a{text-decoration:none;}
    img{border:none;}
    块的特征
        1、默认独占一行 
        2、没有宽度时,默认撑满一排
        3、支持所有css命令
    内嵌(内联、行内)的特征
        1、同排可以继续跟同类的标签
        2、内容撑开宽度
        3、不支持宽高
        4、不支持上下的margin和padding
        5、代码换行被解析
    display:block        显示为块
    
    使内联元素具备块属性标签的特性
    
    
    display:inline        显示为内嵌
    
    使行块属性标签具备内联元素的特性
    Inline-block的特点和问题
    
    特性:
    1、块在一行显示;
    2、行内属性标签支持宽高;
    3、没有宽度的时候内容撑开宽度
    
    问题:
    1、代码换行被解析;
    2、ie6 ie7 不支持块属性标签的inline-block;
    
    a、分析结构(div 包一排a)
    b、a标签支持宽高,并且在一排显示
    c、有hover效果
    d、当前状态不能点!
    
    cursor 指针样式 (规定要显示的光标的类型)
    cursor:pointer | text | move ……
    cursor:url(hand.cur),pointer;
    前端规范
    1、所有书写均在英文半角状态下的小写;
    2、id,class必须以字母开头;
    3、所有标签必须闭合;
    4、html标签用tab键缩进;
    5、属性值必须带引号;
    6、<!-- html注释 -->
    7/* css注释 */
    8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签;
    9、p,dt,h标签  里面不能嵌套块属性标签;
    10、a标签不能嵌套a;
    11、内联元素不能嵌套块;

     day01-常见标签

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    
    </style>
    </head>
    <body>
    
    <a href="#">a标签(链接,下载,锚点)</a>
    <img src="1.png" alt=""/>
    <a href="#"><img src="1.png" alt=""/></a>
    <span>区分样式</span>
    <strong>强调(粗体)</strong>
    <em>强调(斜体)</em>
    <!-- 
    内联,内嵌,行内属性标签:
    1、默认同行可以继续跟同类型标签;
    
    块属性标签:
    1、默认独占一行显示;
     -->
    <p>段落</p>
    <div>块</div>
    <h1>标题1</h1>
    <h6>标题6</h6>
    <ol>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
    <ul>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
    <dl>
        <dt>定义列表标题</dt>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
    </dl>
    
    </body>
    </html>

    day02-常见标签-默认样式重置

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    
    </style>
    </head>
    <body>
    
    <a href="#">a标签(链接,下载,锚点)</a>
    <img src="1.png" alt=""/>
    <a href="#"><img src="1.png" alt=""/></a>
    <span>区分样式</span>
    <strong>强调(粗体)</strong>
    <em>强调(斜体)</em>
    
    <p>段落</p>
    <div>块</div>
    <h1>标题1</h1>
    <h6>标题6</h6>
    <ol>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
    <ul>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
    <dl>
        <dt>定义列表标题</dt>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
    </dl>
    
    </body>
    </html>

    day03-块和内嵌

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    
    </style>
    </head>
    <body>
    
    <a href="#">a标签(链接,下载,锚点)</a>
    <img src="1.png" alt=""/>
    <a href="#"><img src="1.png" alt=""/></a>
    <span>区分样式</span>
    <strong>强调(粗体)</strong>
    <em>强调(斜体)</em>
    <!-- 
    内联,内嵌,行内属性标签:
    1、默认同行可以继续跟同类型标签;
    
    块属性标签:
    1、默认独占一行显示;
     -->
    <p>段落</p>
    <div>块</div>
    <h1>标题1</h1>
    <h6>标题6</h6>
    <ol>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ol>
    <ul>
        <li>列表项</li>
      <li>列表项</li>
      <li>列表项</li>
    </ul>
    <dl>
        <dt>定义列表标题</dt>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
      <dd>定义列表项</dd>
    </dl>
    
    </body>
    </html>

    -块和内嵌特性

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    /*
    内联,内嵌,行内属性标签:
        1、默认同行可以继续跟同类型标签;
        2、内容撑开宽度
        3、不支持宽高
        4、不支持上下的margin和padding
        5、代码换行被解析
        
    块属性标签:
        1、默认独占一行显示;
        2、没有宽度时,默认撑满一排
         3、支持所有css命令
     */
     span,div{background:blue; 100px; height:100px;}
    
    
    </style>
    </head>
    <body>
    
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>
    
    <div>块</div>
    <div>块</div>
    
    
    
    </body>
    </html>

    块和内嵌转换

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    
    span,div{background:blue; 100px; height:100px;}
    span{display:block;}
    div{display:inline;}
    /* 
    display:block;  显示为块
    display:inline;  显示为内嵌
     */
    
    </style>
    </head>
    <body>
    
    <span>区分样式</span>
    <span>区分样式</span>
    <span>区分样式</span>
    <div>块</div>
    
    <div>块</div>
    <div>块</div>
    
    
    
    </body>
    </html>

    翻页

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
    ol,ul{list-style:none;padding:0;margin:0;}
    a{text-decoration:none;}
    img{border:none;}
    /* 默认样式重置 (css reset)  */
    
    .pages{ height:60px; background:#e8e8e8; 600px; margin:90px auto; text-align:center;}
    .pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}
    .pages a:hover{border-color:red;color:red;}
    .pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}
    .pages .active:hover{border-color:#cdcdcd;color:#333333;}
    
    body{height:1500px; cursor:url(hand.cur),pointer;}
    
    </style>
    </head>
    <body>
    
    
    <div class="pages">
        <a href="#">上一页</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#" class="active">3</a>
      <a href="#">4</a>
      <a href="#">15</a>
      <a href="#">211</a>
      <a href="#">255…</a>
      <a href="#">下一页</a>
    </div>
    
    
    
    </body>
    </html>

    效果 

  • 相关阅读:
    python随机生成
    socket、tcp、http
    TCP三次握手和http过程
    iOS多线程的初步研究(十)-- dispatch同步
    dispatch队列
    IOS多线程编程之Grand Central Dispatch(GCD)介绍和使用
    UIWebView 自定义网页中的alert和confirm提示框风格
    dispatch_semaphore
    app内购提示,您已购买此商品,但未下载
    单例的写法
  • 原文地址:https://www.cnblogs.com/q1359720840/p/10416169.html
Copyright © 2011-2022 走看看