<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .c1{
            /*字体变粗 变大*/
            font-size: larger;
            font-weight: bolder;
        }
        .c2{
            height: 100px;
            width: 100px;
            /*1像素的红色实线边框*/
            border: 1px red solid;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            line-height: 100px;
        }
        .c3{
            float: left;
        }
        .base{
            height: 100px;
            width: 100px;
            border: 1px red solid;
            /*background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');*/
            /*background-repeat: no-repeat; !* 不堆叠*!*/
            /*background-repeat: repeat-x;!* 横向堆叠*!*/
            /*background-repeat: repeat-y;!* 纵向堆叠*!*/
        }
        .c4{
            width: 100%;
            border: 1px blue solid;
        }
         .outer{
            width: 100%;
            height: 100px;
            border: 1px red solid;
        }
        .inner{
            width: 100%;
            height: 40px;
            background-color: aqua;
            /*外边距 不改变自身，针对外部进行移动*/
            /*margin-top: 1px;*/
            /*内边距 改变自身 */
            padding-top: 1px;
        }
        .header{
            background-color: aquamarine;
            /*width: 100%;*/
            height: 48px;
            /*分层绝对定位*/
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            line-height: 48px;
            text-align: center;
        }
        .c5{
            border: 1px red solid;
            height: 200px;
            width: 200px;
            position: relative;
        }
        .c6{
            background-color: black;
            height: 45px;
            width: 45px;
            /*postion的相对定位*/
            position: absolute;

        }
        .bp{
            width: 20px;
            height: 20px;
            border: 1px red solid;
            background-image: url('http://ui.imdsx.cn/static/image/icon.png');
            background-position: 10px 10px;
        }
    </style>
</head>
<body style="margin: 0">
<div class="c1">天秤座</div>
<div class="c2">1</div>
<!--<div class="base c3"></div>-->
<!--<div class="base c3"></div>-->
<div class="c4">
    <div style="width:100px;height: 100px;background-color: aqua;float: left"></div>
    <div style="width:100px;height: 100px;background-color: aqua;float: right"></div>
    <div style="clear:both"></div>
</div>
    <!--display 行内转块 块转行内-->
    <!--行内标签设置了宽高不生效-->
    <div class="base" style="display: inline">块转行内</div>
    <div class="base" style="display: inline-block">既是块又是行内</div>
    <span class="base" style="display: block;">行内转块</span>
    <!--隐藏元素-->
    <div class="base" style="display: none"></div>
    <!--外边距和内边距-->
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="base" style="margin-top: 10px"></div>
    <div class="base" style="margin-top: 10px"></div>
    <!--分层-->
    <div class="header">HTML</div>
    <div class="c5">
        <div class="c6" style="background-color: red;right: 0;top:0;"></div>
        <div class="c6" style="background-color: blue;right: 0;bottom: 0"></div>
        <div class="c6" style="background-color: black;z-index: 9"></div>
        <div class="c6" style="background-color: pink;z-index: 10"></div>
    </div>
    <!--修改鼠标的箭头样式-->
    <input type="button" value="登录" style="cursor: pointer">
    <!--overflow 如果div内的内容大于外部div的宽高自动出现滚动条-->
    <div class="base" style="overflow: auto">
        <img src="timg.jpg">
    </div>
    </div>
    <!--scroll 如果图小于外部div 会强制加上滚动条-->
    <div class="base" style="overflow: scroll">
        <img src="timg.jpg">
    </div>
    <!--hidden如果图片或内容大于外部div宽高，自动截图左上角-->
    <div class="base" style="overflow: hidden;">
        <img src="timg.jpg">
    </div>
    <div class="base" style=""></div>
    <div class="bp"></div>
</body>
</html>

UI自动化（四）css样式的更多相关文章

  1. 实验四  CSS样式的应用

    实验四  CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...

  2. JavaFX让UI更美观-CSS样式

    相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...

  3. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  4. webpack(四) --css样式及图片打包

    一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...

  5. 小谢第8问：ui框架的css样式如何更改

    目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...

  6. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  7. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  8. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  9. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  10. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

随机推荐

  1. CSS设置浏览器滚动条样式

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5 ...

  2. kaggle竞赛-保险转化-homesite

    时间格式的转化 查看数据类型 查看DataFrame的详细信息 填充缺失值 category 数据类型转化 模型参数设定 结论 该项目是针对kaggle中的homesite进行的算法预测,使用xgbo ...

  3. swust oj 956

    约瑟夫问题的实现 2000(ms) 65535(kb) 3266 / 10775 n个人围成一个圈,每个人分别标注为1.2.....n,要求从1号从1开始报数 ,报到k的人出圈,接着下一个人又从1开始 ...

  4. vue2.0 源码解读(一)

    又看完一遍中文社区的教程接下来开始做vue2.0的源码解读了! 注:解读源码时一定要配合vue2.0的生命周期和API文档一起看 vue2.0的生命周期分为4主要个过程 create. 创建---实例 ...

  5. Hibernate的条件查询的几种方式+查询所有的记录

    条件查询 . 第一种,用?占位符,如: //登录(用?占位符) public List<UserPO> LoginUser(UserPO up)throws Exception{ Sess ...

  6. 16.0-uC/OS-III同步

    同步 uC/OS-III中用于同步的两种机制:信号量和事件标志组 . 1.信号量 信号量最初用于控制共享资源的访问.信号量可用于ISR与任务间.任务与任务间的同步. “ N”表示信号量可以被累计.初始 ...

  7. webstorm项目的structure

    https://www.jetbrains.com/help/webstorm/2016.1/symbols.html

  8. WebDriver与文件系统

    1.屏幕截屏操作:其接口函数是TakesScreenshot.该功能是在运行测试用例的过程中,需要验证某个元素的状态或者显示的数值时,可以将屏幕截取下来进行对比:或者在异常或者错误发生的时候将屏幕截取 ...

  9. python日期加减法操作

    对日期的一些操作: 对日期的一些操作: 1 #日期转化为字符串并得到指定(或系统日期)n天后的日期--@Eillot 2 def dataTimeToString(dsNow=ReservationT ...

  10. Ch03 数组相关操作 - 练习

    1. 编写一段代码,将a设置为一个n个随机数的数组,要求随机数介于0(包含)和n(不包含)之间. //import java.lang.Math def getArray(n:Int)={   val ...