Python自动化运维之21、CSS
一、css简介
CSS 是 Cascading Style Sheets的缩写,称为层叠样式表,用来设计网页的样式布局,以及大小来适应不同的屏幕等,使网页的样式和网页数据分离,
二、导入css
导入css有3种方式:
1.元素内嵌行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 <div style="background:red"></div>2.页面嵌入嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:<head><style>div { background-color: red !important; # 如果有!important则会无论如何都会运用上这个css } </style></head>3.外部引用也是将一个.css文件引入到HTML文件中<link rel="stylesheet"href="mystyle.css" />注意:导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面, 闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件, 因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。此外行内的样式等级最高
三、css选择器(常用)
标签选择器:div { background-color:red; } <div > </div>class选择器:.bd { background-color:red; } <div class='bd'> </div>id选择器:#idselect { background-color:red; } <div id='idselect' > </div>关联选择器:#idselect p{ background-color:red; } <div id='idselect' > <p> </p> </div>组合选择器:input,div,p{ background-color:red; } 属性选择器:input[type='text']{ width:100px; height:200px; } .c1[xiao='a']{color:red;} <div class='c1' xiao='a'>自定义属性选择器</div>
伪元素选择器:a:link{background-color:red;} # 鼠标没有碰过的样式 a:hover{background-color:red;} # 鼠标放上去的样式a:active{background-color:red;} # 选择链接时的样式a:visited{background-color:red;} # 已经访问过的链接的样式
更多选择器
四、css常用的属性
1 颜色属性:
color:green
color:#ff6600
color:#f60
color:rgb(255,255,255) # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color:rgba(255,255,255,1) # RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度
2 字体属性:
font-size:14px/50%/larger
font-family:微软雅黑,serif
font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)100、200、300~900,400 = normal,而 700 = bold简写方式: font: 20px '微软雅黑'
3 背景属性:
background-image:url(图片路径)
background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)
background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)简写方式:background:背景颜色 url(图像) 重复 位置background:#f60 url(images/bg,jpg) no-repeat top center
4 文本属性:
text-align: center; # 横向排列
line-height: 200px; # 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
text-indent: 150px; # 首行缩进,
letter-spacing: 10px; # 字符间距
word-spacing: 20px; # 单词间距
5 边框属性:
border-style: none # 无边框solid # 直线边框dashed # 虚线边框dotted # 点状边框double # 双线边框inherit # 继承groove # 凸槽边框ridge # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性border-width:px 固定值的边框medium 中等边框thick 粗边框thin 细边框inherit继承 border-color:red#ff0000rgb(255,255,0)rgba(255,255,0,0.1)
border-radius: px 倒角
简写方式:border:2px #f60 solid
6 列表属性:
list-style-type:none 无标记。disc 默认。标记是实心圆。circle 标记是空心圆。square 标记是实心方块。decimal 标记是数字。decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman 大写罗马数字(I, II, III, IV, V, 等。)lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)lower-greek 小写希腊字母(alpha, beta, gamma, 等。)lower-latin 小写拉丁字母(a, b, c, d, e, 等。)upper-latin 大写拉丁字母(A, B, C, D, E, 等。)hebrew 传统的希伯来编号方式armenian 传统的亚美尼亚编号方式georgian 传统的乔治亚编号方式(an, ban, gan, 等。)cjk-ideographic 简单的表意数字hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)list-style-position:inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。inherit 规定应该从父元素继承 list-style-position 属性的值。list-style-image:URL 图像的路径。none 默认。无图形被显示。inherit 规定应该从父元素继承 list-style-image 属性的值。简写方式:list-style:square inside url('/i/arrow.jpg');
7 dispaly属性:
display:none # 隐藏属性block # 变块级元素inline # 变内联元素inline-block # 内联元素默认不能设置长宽,块级可以,这个让内联元素可以设置height width
8 cursor属性:
cursor:pointer # 鼠标变小手help move
9 opacity属性:
opacity:0.4 # 0-1之间的小数,颜色透明度
10 z-index属性:
z-index:10 # 设置优先级,一般用在模态对话框
11 margin,pading边距属性:
margin: 10px # 外边距(本身不会增加),与边框的距离
padding: 10px # 内边距(本身会增加) 遵循上右下左,元素之间的距离
12 float属性
float:left/right
clear:both
<body><div style="width: 500px;border:2px solid red;"><div style="width:20%;float: left;background-color: aqua;">a</div><div style="width:80%;float: left;background-color: beige;">b</div><div style="clear:both"></div></div> </body>
13 position属性
position: fixed # 固定浏览器窗口,网页返回顶部的按钮absolute # 固定窗口relative # 一般用于和absolute配合使用,相对于absolute
<div style="height:2000px;"><div style="position: fixed;bottom: 0px;right: 0px;background-color: red;">111111</div></div>
<div style="height: 500px;width: 400px;border: 2px solid red;position: relative;"><div style="height: 200px;background-color: red;"><div style="position:absolute;bottom: 0px;right: 0px;">111</div></div></div>
更多属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模态对话框</title><style>.hide {display: none;}.modal{width:400px;height:300px;background-color: #dddddd;position: fixed;top:50%;left:50%;margin-top:-150px;margin-left:-200px;z-index: 10;}.shadow {position: fixed;top:0px;left:0px;right:0px;bottom:0px;/*background-color: black;*//*opacity: 0.6;*/background-color: rgba(0,0,0,.6);z-index: 9;}</style> </head> <body><input type="button" value="添加"/><div class="shadow"></div><div class="modal"><input type="text"/><input type="text"/><input type="text"/><input type="text"/></div><div style="height: 2000px;"></div> </body> </html>
模态对话框
注意:
1、css文档从上到下执行,以最后一个为准
a {font-size: 10px; }b {font-size: 40px; }<p class = "a b"> ddd </p>
2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt 切记
3、父div里面的子div都float,
方法1、在最后加一个div然后添上属性 clear:both
方法2、定义一个通用属性,
clearfix:afte{content: '111';display: block;clear: both;/* visibility 隐藏内容但占高度*/visibility: hidden;height: 0;/*display: none;隐藏内容也不占高度*/ }
一些案例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>带图像的登录</title><style>.icon-name{background-image: url(i_name.jpg);height:16px;width:200px;display: inline-block;background-repeat:no-repeat;}</style> </head> <body><div style="width:200px;position: relative;"><input style="width:180px;padding-right: 20px;" type="text"/><span class="icon-name" style="position: absolute;top:5px;right: -186px;"></span></div> </body> </html>
带图像input
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>伪类选择器运用清除浮动</title><style>.c1:after {content:'aaa';}.c2:before {content:'666';}.clearfix:after{content:'.';clear:both;display: block;visibility: hidden;height:0;}.left{float:left;}</style> </head> <body><div class="c1">ddd</div><div class="c2">888</div><div style="background-color: red;" class="clearfix"><div class="left" style="height:100px;background-color: green">1</div><div class="left">2</div></div></body> </html>
伪类选择器运用清除浮动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小尖角</title><style>.icon {display: inline-block;border-top:15px solid red;/*border-right:15px solid green;*//*border-bottom:15px solid yellow;*//*border-left:15px solid pink;*/border-right:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid transparent;}</style> </head> <body><div class="icon"></div> </body> </html>
小尖角
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后台布局一</title><style>* {margin:0;}.pg-header {height:48px;background-color: #2459a2;}.pg-body .body-menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body .body-content{position: absolute;top:48px;left:210px;/*bottom:0;*/right:0;background:green;}</style> </head> <body><div class="pg-header"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content">asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/></div></div><div class="pg-heaher"></div> </body> </html>
后台布局一
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>后台布局二</title><style>* {margin:0;}.pg-header {height:48px;background-color: #2459a2;}.pg-body .body-menu{position: absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body .body-content{position: absolute;top:48px;left:210px;bottom:0;right:0;background:green;overflow: auto;}</style> </head> <body><div class="pg-header"></div><div class="pg-body"><div class="body-menu"></div><div class="body-content">asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/></div></div><div class="pg-heaher"></div> </body> </html>
后台布局二
转载于:https://www.cnblogs.com/xiaozhiqi/p/5830033.html
Python自动化运维之21、CSS相关推荐
- 基于python技术的自动化运维是干嘛的_《Python自动化运维 技术与最佳实践》.pdf...
[实例简介]Python自动化运维 技术与最佳实践 [刘天斯著][机械工业出版社][2014.12][291页].pdf [实例截图] [核心代码] 目 录 本书赞誉 前 言 第一部分 基础篇 第1章 ...
- python自动化运维之路~DAY1
python自动化运维之路~DAY1 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.文件大小单位单位换算 我们一起看一下下面的图: 没错,都是数字,而且这些数字都是二进制的数字 ...
- 如何做好python自动化运维,python在运维中的应用
这篇文章主要介绍了一个有趣的事情,具有一定借鉴价值,需要的朋友可以参考下.希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下. 1.如何做好python自动化运维 随着移动互联网的普及, ...
- python自动化运维之路~DAY6
python自动化运维之路~DAY6 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你想开发一款游戏,会存在角色的混搭的情况,这个时候"面向对象过程"就出 ...
- Python自动化运维-丁志文-专题视频课程
Python自动化运维-4561人已学习 课程介绍 本职业规划路线是专门为从事运维开发的同学准备的,并且是严格按照企业需求的标准定制的学习路线.路线中包含python基础和进阶,lin ...
- 云计算Python自动化运维开发实战 三、python文件类型
为什么80%的码农都做不了架构师?>>> 云计算Python自动化运维开发实战 三.python文件类型 导语: python常用的有3种文件类型 1. 源代码 py ...
- 2018python培训-2018年5月python自动化运维开发课程新班正式开课!
2018年5月python自动化运维开发课程新班正式开课! 作者: 更新时间::2018-05-16 新推出的ansible是新出现的 自动化 运维工具 , 基于Python研发 . 糅合了众多老牌运 ...
- 云计算开发教程:Python自动化运维开发实战流程控制
今天这篇文章是给大家分享一些云计算开发教程,今天讲解的是:Python自动化运维开发实战流程控制. Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. P ...
- 开启Python自动化运维之路
关于Python的入门,推荐Dive into Python及廖雪峰的Python教程. 第一个程序 学一门语言,按惯例都要先来一个Hello World! 代码高亮效果 代码如下: print(&q ...
- python运维工程师招聘_【python自动化运维工程师工资】图灵学院2020年python自动化运维工程师工资待遇-看准网...
职位描述 招聘要求: 至少满足下面三个招聘方向中的一条. 招聘主要方向: 一.python web高级讲师 职位要求: 1.精通Python,具有python web开发经验,有参与多个完整的项目生命 ...
最新文章
- 2021首期Nature封面:牛津大学ML算法实现10万高压非晶硅原子的模拟​ | AI日报
- 收藏 | 计算机网络基础知识总结
- 调试中的一些Python错误
- Flink的重启策略
- Moblieye副总裁交流纪要
- Python 爬虫抓取代理IP,并检测联通性
- Spring Boot 企业实战_前夕
- 全局数据 GetGlobalDataSet
- 陈冠希宣布代言小野电子烟 罗永浩:实现了长久以来的心愿
- ps右键不显示编辑选项_PS基础教程|视图操作
- 探讨专线与家用宽带的区别
- 1分钟学会python,分分钟钟学会Python -基础运算符
- java练习题库_大一java题库练习题.doc
- iOS 音乐播放器(二)
- oracle12c 兼容,12c(oracle12c兼容11g吗)
- 多学5个实用Excel技巧,工作早做完,比同事早下班
- 邮箱不可用 550 User has no permission(JavaMail登不进邮件系统)
- 字节跳动 Go RPC 框架 KiteX 性能优化实践
- 如何使用计算机网络打印机,如何在电脑上安装网络打印机?详细教程全部教给你!...
- FJUT 2019暑假第三次周赛 C - 郭先生的魔法阵
热门文章
- jetbot 无法通过浏览器访问_linux中启动tomcat后浏览器无法访问的解决方法
- Selenium模拟浏览器常见操作及问题
- 解析oracle的dump文件,使用awk来解析dump文件
- java生成点阵图_【图片】一个零基础的小白是如何脱变成Java后端工程师的?【java吧】_百度贴吧...
- delphi和python和halcon_【《zw版·Halcon与delphi系列原创教程》Halcon图层与常用绘图函数...
- python 文件上传 web_Python WebDriver 文件上传(一)
- python爬虫百度文库_百度文库爬虫,Python爬取百度文库内容输出word文档low版
- 一般家用监控多少钱_安装空调一般多少钱
- 修改sqlserver编码为utf8_修改Matlab默认编码格式为UTF-8
- [C#.Tips]也来谈谈接口欺诈