<!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] 编译程序时打上git提交信息标记

    1.加入代码 //version.go package version import ( "flag" "fmt" "os" ) var ( ...

  2. SQL 四大功能DDL/DML/DCL/TCL

    SQL主要分成四部分:(1)数据定义.(SQL DDL)用于定义SQL模式.基本表.视图和索引的创建和撤消操作.(2)数据操纵.(SQL DML)数据操纵分成数据查询和数据更新两类.数据更新又分成插入 ...

  3. 【python】——购物车

    作业需求: 用户名和密码存放于文件中,格式为:egon|egon123 启动程序后,先登录,登录成功则让用户输入工资,然后打印商品列表,失败则重新登录,超过三次则退出程序 允许用户根据商品编号购买商品 ...

  4. python语法_算数运算+赋值运算符+比较运算符+逻辑运算符

    算术运算符 + - * /  加减乘除 5/2 = 2.5 5//2 = 2  整除,地板除 5%2= 1 取余数 2**10 指数运算 2的10次方 算术优先级 无论多少级,都使用()小括号进行优先 ...

  5. python----下载与安装

    在 Windows 上安装 Python 在 Windows 上安装 Python 请按如下步骤进行. 首先,登录 https://www.python.org/downloads/ 页面,可以在该页 ...

  6. day12 十二、开放封闭、装饰器

    一.nonlocal关键词 # global # num = # def fn(): # global num # L>G 将局部的名字与全局统一 # num = # fn() # print( ...

  7. 手机连接wamp网页

    1.改变wamp的put online 状态 Right click Wampmanager -> WAMPSetting -> Menu Item: Online/Offline

  8. 配置DNS Server容易忽略的问题

    1.named服务启动成功,但nslookup解析报错: [root@xiamihost3 named]# service named restart 停止 named: [确定] 启动 named: ...

  9. shiro学习总结

    首先4个比较好的例子供参考: 1.常规Spring MVC拦截器实现的认证和权限管理例子 https://blog.csdn.net/u013647382/article/details/539956 ...

  10. git rest 的相关操作

    git rest [parameter] 1. --soft 如果想撤销commit,并且只回退commit的信息  git diff返回空 git diff –cached 和 git diff H ...