Python之路Day15--CSS补充以及JavaScript（一）
一、上节作业问题：
上节作业问题：
1、css重用 <style>
如果整个页面的宽度 > 900px时：
{
.c{
共有
}
.c1{
独有
}
} .c2{
独有
}
</style> <div class='c c1'></div>
<div class='c c2'></div>
2、自适应 和 改变大小变形
左右滚动条的出现
宽度，百分比 页面最外层：像素的宽度 => 最外层设置绝对宽度 自适应：media 3、默认img标签，有一个1px的边框
img{
border: 0;
} 4、作业中的数量输入框 上节内容回顾
1、块级和行内
2、form标签
<form action='http://sssss' methed='GET' enctype='multi'>
<div>asdfasdf</div>
<input type='text' name='q' />
<input type='text' name='b' />
# 上传文件
<input type='file' name='f' />
<input type='submit' />
</form>
GET: http://sssss?q=用户输入的值
http://sssss?q=用户输入的值&b=用户输入的内容 POST：
请求头
请求内容
3、display: block;inline;inline-block
4、float：
<div>
<div style='float:left;'>f</div>
<div style='clear:both;'></div>
</div> 5、margin: 0 auto;
6、padding, ---> 自身发生变化
上节作业问题
回顾
让IE有自动加上的外边框消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border: 0;
}
</style>
<!--将图片边框变为零-->
</head>
<body>
<a href="http://www.baidu.com">
<img src="data:image/1.png" title="phto" style="width: 200px;height: 300px;border: 0">
</a>
</body>
</html>
让IE自动加上的边框消失默认1px
二、本节内容
（一）CSS补充
（二） JS
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
（一） CSS补充
1.position
a. fiexd ==>固定在页面的某个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<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">
</div>
<script>
function GoTop(){
document.body.scrollTop = 0;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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{
height: 5000px;
background-color: #dddddd;
margin-top: 50px;
}
</style>
</head> <body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
将菜单永远置顶
效果：
b.absolute + relative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
<div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position: relative;height: 200px;width: 500px;border: 1px solid red; margin: 0 auto">
<div style="position: absolute;left: 0;top: 0;width: 50px;height: 50px;background-color: black"></div>
</div>
</body>
</html>
relative+absolutw
效果：
2.opcity 透明度
3.z-index 层级顺序
范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style=" display:none;margin:0 auto;z-index:10;position: fixed;top:50%;left:50%;
margin-left: -250px ; margin-top:-200px;background-color: white;height:400px;width: 500px; ">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div style="display:none;z-index:9;position: fixed;background-color: black;
top:0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.5
"></div>
<div style="height: 500px;background-color: green;">
rcvbrcvghb
</div> </body>
</html>
三层范例
4.overflow
范例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto"> .
<img src="data:image/1.png">
</div>
<div style="height: 200px;width: 300px;overflow: hidden"> .
<img src="data:image/1.jpg">
</div>
</body>
</html>
范例
效果：
5.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; }
.pg-body{
margin-top: 50px;
}
.w{
width: 980px ;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding:0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，当前标签才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">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 class="w">正文</div>
</div>
</body>
</html>
效果：
6.background-image 背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url('image/2.png');background-repeat: no-repeat;height: 20px;width: 20px;border: 1px solid red;"></div>
<-- backgroud-repeat:no-repeat 表示不重复 还有repeat-x表示横着堆叠 repeat-y表示竖着堆叠-->
<--backgroud-opsition-x:10px; backgroud-position-y:10px;表示往哪个方向移动 还可以使用上右下左的方式写-->
</body>
</html>
效果
课堂小练习--->输入框加头像
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right:30px ;">
<sapn style=" position:absolute;
right:0;
top:10px;
background-image: url(image/i_name.jpg);
height: 16px;
width: 16px;
display: inline-block;"></sapn>
</div>
</body>
</html>
效果：
Python之路Day15--CSS补充以及JavaScript（一）的更多相关文章
- Python之路,Day15 - Django适当进阶篇
Python之路,Day15 - Django适当进阶篇 本节内容 学员管理系统练习 Django ORM操作进阶 用户认证 Django练习小项目:学员管理系统设计开发 带着项目需求学习是最有趣 ...
- CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 百万年薪python之路 -- 前端CSS样式
CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...
- Python之路Day15
主要内容:WEB框架.Django基础 WEB框架 Web请求流程 -- 原始Web框架 -- 自定义Web框架 -- MVC 和 MTV # Models Views Controllers # 模 ...
- python之路--前端CSS
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...
- 百万年薪python之路 -- 前端CSS基础介绍
一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...
- python之路之css
方式三 方式四 <style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:h ...
- python之路--进程内容补充
一. 进程的其他方法 进程id, 进程名字, 查看进程是否活着(is_alive()), terminate()发送结束进程的信号 import time import os from multipr ...
随机推荐
- js中JSON格式数据的转化
JSON.parse(STRING) => OBJECT JSON.stringify(OBJECT) => STRING
- 高德地图纯js和html
<!doctype html> <html> <head> <meta content="" charset="utf-8&qu ...
- python 以及其他java php等在ubuntu上切换的命令
sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 100 sudo update-alternati ...
- mysql基准测试
1. 及注册时有两种主要的策略:①正对整个系统的整体测试(集成式full-stack) ②单独测试mysql(但组件式基准测试single-component) 2.获取系统性能和状态(需要记录的数据 ...
- centos 使用 locate
centos 第一次使用locate时报错: locate: can not stat () `/var/lib/mlocate/mlocate.db': 没有那个文件或目录 因为locate相关的索 ...
- 软件架构---nop插件学习
http://www.cnblogs.com/haoxinyue/archive/2013/06/06/3105541.html http://www.cnblogs.com/aaa6818162/p ...
- ElasticSearch性能优化官方建议
ES 手册 如何提高ES的性能 不要返回较大的结果集 ES是设计成一个搜索引擎的,只擅长返回匹配查询较少文档,如果需要返回非常多的文档需要使用Scroll. 避免稀疏 因为ES是基于Lucene来索引 ...
- Javascript中数组的基本操作
删除数组指定的某个元素 via首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) ...
- 前端试题本（Javascript篇）
JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...