<!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. Linux下的搜索查找命令的详解(which)

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索:  which  查看可执行文件的位置. whereis 查看文件的位置.  locate   配合数据库查看文件 ...

  2. HTML5+CSS3 loading 效果收集－－转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  3. lamda表达式和stream

    stream主要用于处理数据,看一下jdk的文档,并且主要处理集合对象: int sum = widgets.stream() .filter(w -> w.getColor() == RED) ...

  4. linux 的基本操作（linux系统的日常管理）

    系统的日常管理 笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的 ...

  5. JBPM工作流（二）——数据库表说明

    以下为JBMP的数据库说明(18张): 1 流程配置类数据库表: 1.1 JBPM_PROCESSDEFINITION:流程模版表 字段名 字段含义 主键 外键 ID_ 流程模版标识 √ × NAME ...

  6. Lucene入门学习二

    接上篇:增删改查 增加:这里不做过多阐述. 删除:删除全部,根据条件删除 修该:先删除,后添加 查询(*):查询所有,精确查询,根据数值范围查询,组合查询,解析查询. package com.ithe ...

  7. Oracle工具——ADRCI

    ADRCI工具是Oracle11g才推出的新工具,主要用来管理alert文件.trace文件.dump文件.健康监事报告等. 这一篇简单介绍ADRCI工具. 用过11g的人都会发现,11g中alert ...

  8. linux 强制删除杀死进程 sudo pkill uwsgi -9 杀死uwsgi 关闭防火墙 iptables -F

    sudo pkill -f uwsgi -9 四.关闭防火强        iptables -F  #清空规则        systemctl stop firewalld  #关闭防火墙服务   ...

  9. PrimeNG之FileUpload

    --文件上传是一个支持拖放,多文件上传,自动上传,进度跟踪和验证的上传. Import import {FileUploadModule} from 'primeng/primeng'; Gettin ...

  10. webpack的externals的使用

    externals 官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD.AMD或者window/global全局的方式访问. ...