8.17前端(4)
渡劫 ing 七夕挂针!渡劫!
2018-8-17 16:32:15
先把刻上笔记帖上
day49
1. 内容回顾
1. 昨日内容
1. form表单(一般method="post")
1. input系列
type
1. text
2. password
3. radio
4. checkbox
5. date(datetime)
6. submit
7. button
8. reset
9. hidden
10. file (enctype="multipart/form-data")
2. select
1. select>option(分组的下拉框 select>optgroup>option)
3. textarea
2. form表单提交 三要素:
1. input\select\textarea 要有一个name属性
2. 提交按钮必须要是 type="submit"
3. form不是from;获取用户输入的标签都要放到form标签里面(仅限于form提交数据)
3. CSS选择器
1. 基本选择器
1. 标签选择器
2. ID选择器
3. 类选择器(class="c1 c2 ...")
2. 通用选择器(*)
3. 组合选择器
1. 后代选择器(空格)
2. 儿子选择器(>)
3. 毗邻选择器(div+p)
4. 弟弟选择器(~)
4. 属性选择器
1. [s9]
2. [s9="hao"]
3. 其他不常用的(有印象即可)
5. 分组和嵌套
1. 分组(用逗号分隔的多个选择器条件)
2. 嵌套(选择器都可以组合起来使用)
6. 选择器的优先级
1. 越靠近标签的优先级越高(就近原则)
2. 权重的计算
1. 内联样式1000
2. ID选择器100
3. 类选择器10
4. 元素选择器1
div#d1(101)/div.c1(11)/div .c1
2. 之前内容复习
1. Python语法基础
2. 数据类型和内置方法
3. 函数
1. 参数
2. 装饰器
3. 迭代器和生成器
4. 匿名函数
5. 递归
6. 内置函数
7. 三元运算和列表推导式
4. 文件操作
5. 面向对象(CRM项目会有大量的应用)
6. 常用的模块和包
7. 网络编程和并发编程(优先级低)
8. 数据库(建库\建表\基本查询\)
建立自己的自信
2. CSS选择器补充
http://www.cnblogs.com/liwenzhou/p/7999532.html
3. CSS属性
1. 文字属性
1. font-family
2. font-size
3. font-weight
4. color
1. rgb(255, 255, 255)
2. #f00
3. red
4. rgba()
2. 文本属性
1. text-align
2. text-decoration
3. 背景属性
1. background-color
2. background-image
4. 边框属性
1. border
2. border-radius --> 变圆
5. display属性
1. inline
2. block
3. inline-block
4. none (隐藏)
6. CSS盒子模型(从外到内)
1. margin: 边框之外的距离(多用来调整 标签和标签之间的距离)
2. border边框
3. padding:内容区和边框之间的距离(内填充/内边距)
4. condent: 内容
7. 浮动:
div配合float 来做 页面的布局
任何元素浮动之后都会变成块元素
float:
1. left
2. right
3. none
8. 清除浮动(清除的是浮动带来的负面效果-->父标签塌陷(撑不起来))
1. clear
1. left
2. right
3. both
最常和伪元素结合起来应用:
.clearfix:after {
content: "";
display: block;
clear: both
}
9. 定位:
1. static --> 默认的
2. relative --> 相对定位(相对于原来的位置来说)
3. absolute --> 绝对定位(相对于最近的一个被定位过的祖宗标签) (完全脱离文档流)
4. fixed --> 固定在某个位置(返回顶部按钮)
left right top bottom
10. z-index (明天讲)
4. 页面练习
博客页面
1. 先排HTML文档结构,同时定义好类名(类名最好有意义)
2. 从左往后,从上到下依次写样式
博客示例
作图网站
<!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>定位</title> <style type="text/css"> *{ margin: 0; padding: 0; } .c1, .c2, .c3 , .c4{ height: 100px; width: 200px; } .c1{ background-color: red; } .c2{ background-color: green; } .c3{ background-color: blue; } .c4{ background-color: deeppink; position: absolute; top: 150px; left: 400px; } /*右下角固定的返回按钮*/ .fixed-back{ position: fixed; right: 20px; bottom: 20px; background-color: grey; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c3"></div> <div class=".fixed-back">返回顶部</div> </body> </html>
浮动 float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局实例</title> <style> *{ margin: 0; padding: 0; } .c1{ height: 1000px; width: 20%; background-color: red; /*向左浮动*/ float: left; } .c2{ height: 1000px; width: 80%; background-color: green; float: left; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动</title> <style> #d1{ border: 1px solid black; } /*浮动的div可以跑出去*/ .c1, .c2{ float:left; height: 100px; } /* 清除浮动标签,把伪类左边不能有浮动,所以只能在浮动标签下面占空, 父类也就有了像素*/ # d1:after{ content: "11"; display: block; clear: left; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> </div> </body> </html>
overflow 浮动溢出
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>overflow实例</title> <style type="text/css"> .c1 { width:120px; height:120px; border:1px solid black; overflow: hidden; } /*<!-- 设置一个圆形的头像 -->*/ /*当内容超过父标签时候隐藏*/ .header-img{ width:120px; height:120px; border:1px solid red; border-radius: 100% overflow:hidden; } .img { max-width: 100% } </style> </head> <body> <div classs="c1"> 海燕压 海燕压 海燕压 海燕压 海燕压 海燕压 海燕压 </div> <div class="header-img"> <img src=""> </div> </body> </html>
