zoukankan      html  css  js  c++  java
  • 9-25号

      今天上午老师带着我们复习了一下上周学的html的各种标签,然后又讲了css,讲了css三种主要形式:内联式,内嵌式,外部样式表。

    还有就是标签选择器、class选择器、id选择器、符合选择器的用法。

     然后就是布局,这个听起来还是有点迷的, 迷迷糊糊的就开始做练习,有问题就要在实践中去解决!

    <!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>无标题文档</title>
    <style>


    *{position:fixed }
    *{position:absolute }
    *{position:relative}
    <!--.q{background-color:#CC99CC; 100px; height:200px;}-->

    .q{ 150px; height:50px; border:2px solid red;}
    .qq{ 150px; height:50px;border:2px solid red;}
    #w{ background-color:#000099; position:absolute; 20px; height:20px; top:-45px; right:125px;}
    #ww{ background-color:#33FF00; position:absolute; z-index:2; 20px; height:20px; top:20px; right:20px;}
    #www{ background-color:#99CCFF; position:absolute; z-index:3; 20px; height:20px; top:20px; right:20px;}
    </style>


    </head>

    <body>
    <div class="q"></div>
    <div class="qq">
    <div id="w">c</div>
    <div id="ww">d</div>
    <div id="www">e</div>
    </div>

    <!-- position
    position:fixed 固定
    position:absolute 绝对定位
    1只有本身:也是在页面中定位(根据top属性定)
    2有嵌套关系
    第一种 嵌套他的标签没有position 还是在页面中定位
    第二种 嵌套他的标签有position那就在嵌套他的标签里面定位
    position:relative
    top letf rihgt bottom
    -->
    <!--<div style="background-color:
    #CC0000; 40px; height:40px; position:fixed;"></div>
    <div class="q"></div><br />

    <div class="q"></div><br />
    <div class="q"></div><br />
    <div class="q"></div><br />
    <div class="q"></div><br />
    <div class="q"></div><br />-->

    </body>
    </html>

    刚开始各种小错误,找不到方法,然后就和同学们商量,这个具体怎么做。然后找到了规律,只要找到了规律,让方块动起来也自然很简单了。今天学习的东西都很重要,要多多练习,又是收获满满的一天! 加油!

  • 相关阅读:
    如何使用ERStudio 生成comment
    windows 使用excel导出的问题
    iOS Runtime(一)、objc_class深深的误解
    iOS开发安全
    iOS微信运动 刷分
    APP中的 H5和原生页面如何分辨、何时使用
    Weex系列二、显示图片
    Android系列一、创建项目
    Weex系列一、构建Weex工程
    时间复杂度
  • 原文地址:https://www.cnblogs.com/Heng23/p/7592366.html
Copyright © 2011-2022 走看看