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 ...
随机推荐
- JSP复习整理（三）基本语法续
查看注册后的信息: TestBean.java package com.hai.xaio.cn; public class TestBean { public String userName; pub ...
- JavaScript中的面向对象
//简单的面向对象 function 构造函数(){ this.属性; } //写在构造函数里面的属性一般为公共属性,或者通过传值进行改变. 构造函数.原型.方法 = function(){}; // ...
- 3ds max录制自定义视频
要将视频设置成未压缩才能录制出自己设定的大小,其他都是都是特定的,软件默认的一些参数.
- MySQL延迟复制--percona-toolkit和MASTER TO MASTER_DELAY
为了数据的安全,有的时候数据库需要延迟备份,这里说下两种延迟备份的方法. 一.借助工具. 实现环境: 192.168.189.143 (mysql主库) 192.168.189.144 (mysql备 ...
- quicktest Professional下载地址，无限制使用方法
QTP是quicktest Professional的简称,是一种自动测试工具.使用QTP的目的是想用它来执行重复的自动化测试,主要是用于回归测试和测试同一软件的新版本.因此你在测试前要考虑好如何对应 ...
- WPF 如何画一颗心
如何用WPF画一个心. MainWindow.xaml <Window x:Class="Heart.MainWindow" xmlns="http://schem ...
- TFS API：一、TFS 体系结构和概念
TFS API:一.TFS 体系结构和概念 TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台, ...
- 整数转IP地址
将一个整数,比如1567898765转换为xxx.xxx.xxx.xxx的IP地址的形式, 以下是源代码 union IPNode{ unsigned int addr; struct { unsig ...
- 用极简方式实现新浪新版本特性展示效果--view的图片轮播
在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...
- octave手册
GNU OCTAVE是一种高级语言,主要用于数值计算.它提供交互式命令行窗口,用于求解线性和非线性问题并计算出数值,并可以进行其它数值实验,还可以用来作为一个批量数据处理语言 运行Ocatve: oc ...