UI自动化（四）css样式
<!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样式的更多相关文章
- 实验四 CSS样式的应用
实验四 CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...
- JavaFX让UI更美观-CSS样式
相对于Swing来说,JavaFX在UI上改善了很多,不仅可以通过FXML来排版布局界面,同时也可以通过CSS样式表来美化UI. 其实在开发JavaFX应用的时候,可以将FXML看做是HTML,这样跟 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- webpack(四) --css样式及图片打包
一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...
- 小谢第8问：ui框架的css样式如何更改
目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...
- 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
随机推荐
- 从javaScript中学习正则表达式——RegExp
正则表达式工具:http://regexper.com 由于国外网络可以选择 https://github.com/javallone/regexper-static 离线安装作为本地服务. 正则 ...
- JavaScript基础知识（初识JS）
js的组成部分 1. ECMAScript : JS的基础语法 变量 数据类型,操作语句,函数 es3 es5 es6; 2.DOM : document object model : 文档对象模型: ...
- Parallel.ForEach 多线程 声明失败 "未将对象引用设置到对象的实例"
x using System; using System.Collections.Generic; namespace Parallel.ForEach { class Program { //代码结 ...
- [No0000199]设计模式总结
设计模式之间的关系: 设计模式总概况: 一.设计原则 .单一职责原则 一个类,只有一个引起它变化的原因.应该只有一个职责.每一个职责都是变化的一个轴线,如果一个类有一个以上的职责,这些职责就耦合在了一 ...
- CentOS 7.6 安装 Weblogic 12
http://download.oracle.com/otn/nt/middleware/12c/12213/fmw_12.2.1.3.0_wls_Disk1_1of1.zip java -jar f ...
- centos7更改网卡名称
1.编辑/etc/sysconfig/grub文件,加入net.ifnames=0 biosdevname=0 2.执行命令grub2-mkconfig -o /boot/grub2/grub.cfg ...
- 前后端分离项目，标准json协议格式参考
正常返回 { "code": 0, "data": [{ "cTime": "2018-11-19 14:46:16" ...
- react中进入某个详情页URL路劲参数Id获取问题
<Route path={`${match.url}/detail/:id`} component={AppManageAddDetail} /> const { match:{param ...
- jsr-303 参数校验-学习（转）
1.是什么? JSR303 是一套 JavaBean 参数校验的标准,它定义了很多常用的校验注解,比如: ----------------------------------------------- ...
- 编程实现类似Linux系统的cp功能
选做题目以及分析 题目:编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文 ...