<!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. [Golang] kafka集群搭建和golang版生产者和消费者

    一.kafka集群搭建 至于kafka是什么我都不多做介绍了,网上写的已经非常详尽了. 1. 下载zookeeper  https://zookeeper.apache.org/releases.ht ...

  2. poj2342 Anniversary party

    Anniversary party Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8028   Accepted: 4594 ...

  3. oracle 28000错误解决方法

    ORA-28000: the account is locked-的解决办法 ORA-28000: the account is locked 第一步:使用PL/SQL,登录名为system,数据库名 ...

  4. Coffee and Coursework (Hard Version)

    Coffee and Coursework (Hard Version) time limit per test 2.5 seconds memory limit per test 256 megab ...

  5. win7 蓝屏信息获取和处理

    一.先说电脑蓝屏原因和解决方法: 1.驱动不对,驱动和硬件不兼容出现的问题,这个直接卸载软件或者重装驱动. 2.内存条有问题或者内存损坏:这个内存条很可能是没插紧,内存损坏的话,换个内存条. 3.病毒 ...

  6. Request.url请求属性

    Request.url请求路径的一些属性1,Request.UrlReferrer.AbsolutePath=获取URL的绝对路径例:"/Manager/Module/OfficialMan ...

  7. js中级小知识1

    首先我们复习之前的小知识,本期博客与之前有关 js数据类型 基本数据类型:string    undefined         null         boolean          numbe ...

  8. MSSQL：查看所有触发器信息的命令

    转自:http://www.2cto.com/database/201307/228708.html 编写程序,有时或为了偷懒,或为更简单地实现所需功能,使用了触发器.这可是把双刃剑,用得不好,程序出 ...

  9. expdp 字符集从ZHS16GBK到AL32UTF8

    源oracle数据库是GBK字符集,目标库是UTF8字符集,现在需要将源库的一个表空间数据导入到目标库.我的解决方法有点繁琐,首先直接导出源库的表空间 expdp trmuser/trmpass sc ...

  10. Mysql导入表信息[Err] 1067 - Invalid default value for '字段名'

    修改mysql配置文件 vi /etc/my.cnf //添加以下配置 sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISI ...