• 2016年10月31日 样式的格式与布局


    上午讲了样式属性的大小,背景,字体,对齐方式,边界边框。
    body里面代码为
    <body>
    <div style=" font-family:微软雅黑; font-size:36px; font-weight:bold; font-style:italic; color:#F00; text-decoration:line-through">hhhh
    </div>
    <div id="a1">ad
    <div id="a2">
    </div>
    <br />
    </div >
    <br>
    <div id="c">百度一下
    </div>

    </body>
    head里面代码为
    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #a1{ 200px; height:300px;
    background-color:#C00;


    }
    #a2{ 100px; height:100px; background-color:#00C;
    margin:auto;
    text-align:left

    }
    #c{ width :200px; height:80px; background-color:#00C; font-size:16px; text-align:center; vertical-align:middle;
    line-height:80px

    </style>
    所呈现出的效果为。。

    下午学习了格式与布局。

    1.位置:position
    fixed固定
    相对于浏览器边框位置固定
    absolute绝对位置
    相对于父级元素(浏览器,绝对定位的上级)
    relative相对位置
    相对于自身应该出现的位置
    top
    距离上边的距离
    right
    距离右边的距离
    bottom
    距离下边的距离
    left
    距离左边的距离


    2.流
    float
    left
    向左流
    right
    向右流
    clear
    both
    清掉流
    3.z-index分层
    值越大越靠上


    4.其它
    display
    显示block和隐藏none,不占位置
    visibility
    显示visible和隐藏hidden,占位置
    overflow
    超出范围 hidden隐藏
    透明
    opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
    圆角
    border-radius:5px;
    阴影
    box-shadow:0 0 5px white

  • 相关阅读:
    小注意1
    javascript求相对路径
    js网页返回顶部和楼层跳跃的实现原理
    函数传值的学习笔记
    每日一题——归并排序
    python文件处理
    Docker数据卷
    Docker镜像原理
    Docker可视化之Portainer
    Docker部署Nginx、Tomcat
  • 原文地址:https://www.cnblogs.com/F4natasy/p/6016235.html
Copyright © 2020-2023  润新知