Python开发【前端】：CSS
css样式选择器
标签上设置style属性：
<body>
<div style="background-color: #2459a2;height: 48px;">第一层</div>
<div style="background-color: #2459a2;height: 48px;">第二层</div>
<div style="background-color: #2459a2;height: 48px;">第三层</div>
</body>
直接在div里写相对应的样式
id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
</body>
把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名
class选择器（最常用）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">第一层</div>
<div class="c1">第二层</div>
<div class="c1">第三层</div>
</body>
把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用
标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<div >第二层</div>
<div >第三层</div>
</body>
标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容
关联选择器（层级选择器）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<span>
<div >span里的div</div>
</span>
<div >第三层</div>
</body>
只让span里面的div标签应用样式，可多层嵌
组合选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
<div id="i2">第一层</div>
<div id="i3">第一层</div>
</body>
组合选择器，加,号，相同样式多命名
属性选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="James"]{width: 20px;height: 20px;}
</style>
</head>
<body>
<input type="text" name="James">
<input type="text">
<input type="password">
</body>
根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
css样式引用
css样式优先级
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
</style>
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先
文件方式引用样式
定义样式并保存到commons.css文件
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
引用commons.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>
css样式边框
基本边框
<body>
<div style="border: 1px dotted red;">
第一层边框
</div>
<!--border：边框宽度 solid：边框样式实线（dotted虚线）颜色：red-->
</body>
边框其他样式
<body>
<div style="height: 48px;
width: 80%;
border: 1px solid brown;
font-size: 16px;
text-align: center;
line-height: 48px;
">第二层边框</div> <!--height: 48px 边框高度-->
<!--width: 80% 宽度页面的80%-->
<!--border: 1px solid brown 边框宽度、样式、颜色-->
<!--font-size: 16px; 字体大小-->
<!--text-align: center; 水平居中-->
<!--line-height: 48px; 垂直居中-->
</body>
-》》点击显示效果
CSS样式浮动
初识float
<body>
<div style="width: 20%;background-color: red;float: left;">左边</div>
<div style="width: 80%;background-color: black;float: right;">右边</div>
</body>
-》》点击显示效果
float测试页
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="float: left;">*收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="clear: both"></div>
</div>
</body>
-》》点击显示效果
注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
CSS样式display
块级标签和行内标签相互转换
<body>
<div style="background-color: red;display: inline">块级</div>
<span style="background-color: #2459a2;display: block">行内</span>
</body>
-》》点击显示效果
注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
<body>
<span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>
<div style="background-color: red;display: inline">块级</div>
</body>
-》》点击显示效果
注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
CSS样式边距
外边距margin
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
margin-top: 25px;"></div>
</div>
</body>
-》》点击显示效果
注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
内边距padding
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
padding-top: 25px;"></div>
</div>
</body>
-》》点击显示效果
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
CSS样式position
fixed固定到浏览器某个位置（相当于float）
返回顶部按钮
有个需求，好多页面都有返回顶部的按钮，随着你页面的下拉，按钮永远在页面的右下角，下面就来实现：
<body>
<div style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd";>
</div>
</body>
实现动态效果，点击返回
<body style="margin: 0 auto">
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;margin: 0;">ddddddddddddd
</div> <script>
function GoTop() {
document.body.scrollTop=0;
}
</script>
</body>
固定菜单栏：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
relative+absolute（相对与relative固定路径）
<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>
多层模态
用了position样式实现三层页面；当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....
<body
<div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
background-color: white;height: 500px;width: 500px"></div> <div style="z-index:9;position: fixed;background-color: black;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.5"></div> <div style="height: 5000px;background-color: green"></div>
</body>
当页面出现多层时，用z-index：10数值来确定浮动层的上下关系；opacity：0.5设置页面透明度（1表示完全遮住）；fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px最顶层的div进行居中处理；
CSS样式overflow
有时会有这种情况出现，看示例
<body>
<div style="height: 200px;width:140px;overflow: hidden ">
<img src="i.png" />
</div>
</body>
外层定义div高度和宽度后，最后显示的效果还是以图片的大小为准的，图片把外层div给撑开了，这时候可以用到下面俩个属性
overflow：auto 图片出现滚动条
<body>
<div style="height: 200px;width:140px;overflow: auto">
<img src="i.png" />
</div>
</body>
overflow：auto 图片只显示div设置的大小，其他部分隐藏
<body>
<div style="height: 200px;width:140px;overflow: hidden">
<img src="i.png" />
</div>
</body>
CSS样式hover
可以看一下抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
color: white;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display:inline-block;
padding: 0 10px 0 10px;
}
.pg-header .menu:hover{
background-color: #BF1919;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a >LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">爆文</a>
</div>
</div>
<div class="pg-body">
</div>
</body>
</html>
其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式
CSS样式background
之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片
background-image
<body>
<div style="background-image: url('i.png');height: 700px;width: 700px">
</div>
</body>
默认div框架有多大，图片重复放置占的位置就有多大
background-repeat
<body>
<div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
</div>
</body>
background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）
background-position-x、background-position-y
显示图片中特定的位置图标
<body>
<div style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>
background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动；两者可以简写成：
<body>
<div style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position:20px 40px"></div>
</body>
针对background整体还有更加简单的写法：
element.style {
background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
background-position-x: -105px;
background-position-y: -212px;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(248, 248, 248);
background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; 同时设定了颜色，图片，位置，是否repeat
Python开发【前端】：HTML-》》http://www.cnblogs.com/lianzhilei/p/6038646.html
Python开发【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html
Python开发【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html
Python开发【前端】：CSS的更多相关文章
- Python开发——17.CSS
一.CSS 1.概述 CSS(Cascading Style Sheets),层叠样式表,用来控制网页数据的表现,使网页的表现与数据内容分离. 2.引入方式 (1)行内式 <body> & ...
- Python开发【前端】：jQuery
jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是&qu ...
- Python开发【前端】：HTML
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- Python开发【第十篇】：CSS （二）
Python开发[前端]:CSS Kylin Zhang 发表于 2016-11-10 13:13:57 css样式选择器 标签上设置style属性: <body> <div sty ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- Python开发【前端】：DOM
DOM(文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页 ...
- Python开发【前端】：JavaScript
JavaScript入门 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Python开发【第十篇】：CSS --无内容点击-不进去（一）
Python开发[第十篇]:CSS --无内容点击-不进去(一)
随机推荐
- python中文字符乱码（GB2312，GBK，GB18030相关的问题）
转自博主 crifan http://againinput4.blog.163.com/blog/static/1727994912011111011432810/ 在玩wordpress的一个博客搬 ...
- 测试Oracle 11gr2 RAC 非归档模式下，offline drop数据文件后的数据库的停止与启动测试全过程
测试Oracle 11gr2 RAC 非归档模式下,offline drop数据文件后的数据库的停止与启动测试全过程 最近系统出现问题,由于数据库产生的日志量太大无法开启归档模式,导致offline的 ...
- xamarin.Android 标记1
群里一个朋友的博客 推荐一下 自己也做个书签记录. http://sunyt.me/2015/04/15/Xamarin-FAQ/
- jQuery基础知识准备
一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
- html学习第一天笔记——第六章节
<input type="reset" value="重置"> 使用重置按钮,重置表单信息<input type="submit&q ...
- 常见的几个Python面试题
str = "abcdaab" #字符串反转 print str[::-1] #统计str字符串中出现'a'的次数 print str.count('a') #pyhon可以用+作 ...
- Maven 的插件和生命周期的绑定
一.Maven 的生命周期 Maven 的生命周期是对所有的构建过程进行抽象和统一.Maven 的生命周期是抽象的,这意味着生命周期本身不做任何实际的工作,生命周期只是定义了一系列的阶段,并确定这些阶 ...
- requirejs的用法(二)
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...
- Apache虚拟主机配置，实现多域名访问本地项目PHP空间，以及配置403Forbidden等错误的解决办法
第一步: apache主配置文件修改: 用文本编辑器打开apache的conf目录下 httpd.conf 将下面以下代码取消注释 LoadModule rewrite_module modules ...
- input type=file 图片上传相关
HTML: <input type="file" name="address" onchange='PreviewImage(this)' value ...