Day_15_总结_CSS基础学习目录
作业：
1.登陆页面
2.后台管理页面布局 border-radius：圆角
1.
2. 
CSS基础学习目录
注意点：
1.CSS的重用问题
.c{
放公用的CSS代码
}
.c1{
放自己的单独代码
}
.c2{
放自己的单独代码
}
<div class='c c1'></div>
2.CSS里面的属性
media--属性控制页面自适应的尺寸
举例：当页面宽度小于600px，背景色显示红色
<head>
<meta charset="UTF-8">
<title>media的使用</title>
<style>
@media screen and (max-width: 600px) {
body{
background-color: red;
}
}
</style>
</head>
一、html
1.<!DOCTYPE html> ---> enconding=utf8
2.meta --->描述网页元信息
titile-->网页的标题
3.两类标签
a.内联标签
span input系列标签 img a
b.块级标签
div p br hr h1---h6
4.table系列标签
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
border:边框 width：宽度 height：高度
5.input系列标签：（重点）
<input type='属性值' value='值' name='名字' disabled />
type:
text,password,button,submit,radio,checkbox
<select>
<option></option>
</select>
<form method='GET/POST'>
</form>
GET/POST的区别：
二、CSS
作用：美化页面
版本：CSS2里面的一些属性，CSS3属性规则是向下兼容CSS2的
CSS的引入方式：
1.内联：
<div style='font-size:20px;'></div>
2.写在head里面的style之中：
<head>
<style type='text/css'>
</style>
</head>
3.外联
<link href='外部的CSS样式'/>
css的选择器：
标签选择器：
div{
}
<div>标签选择器</div>
ID选择器：
#i1{
}
<div id='i1'></div>
类别选择器：
.c1{
}
<div class='c1'></div>
组合选择器：
div,span{
}
<div></div>
<span></span>
层级选择器：
div span{
}
<div>
<span></span>
</div>
段落布局属性：
1.文本的行高 - line-height
line-height 一定要和我们的height属性值是一样的，才能上下居中
2.文本对齐 - text-aligin和文本修饰 - text-decoration
text-aligin:center/left/right
text-decoration:underline/line-through/over
3.边框设置 -border
border:1px solid red
4.文字属性
color：颜色
font-size：元素的大小
浮动：
float:left/right
margin:外边距
padding：内边距
margin: 0 auto
定位举例：
定位属性之fixed：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.i1{
background-color: blue;
color: white;
width: 70px;
height: 30px;
line-height:30px;
position: fixed;
right: 25px;
bottom: 25px;
}
</style>
</head>
<body>
<div>111111111111111111</div>
<div class="i1">
返回顶部
</div>
</body>
顶部菜单的固定：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.pg-header{
width: 100%;
height: 48px;
background-color: orange;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pg-content{
width: 100%;
height: 2000px;
background-color: red;
margin-top: 48px;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-content">
<p>asdfasdfasdfasdfsd</p>
<p>111111111111111111</p>
</div>
</body>
position之相对定位：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: orange;
position: relative;
top:20px;
left: 20px;
}
.three{
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
position之绝对定位：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 100px;
}
.one{
background-color: red;
}
.two{
background-color: orange;
position: relative;
}
.three{
background-color: blue;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two">
<div class="three"></div>
</div>
</body>
商品浮动布局：
<head>
<meta charset="UTF-8">
<title>商品布局</title>
<style type="text/css">
.pg-content{
width: 600px;
border: 1px solid orange;
margin: 0 auto;
}
.pg-title{
height: 38px;
font-size: 20px;
border-bottom: 1px solid orange;
line-height: 38px;
padding-left: 25px;
}
.pg-goods{
width: 138px;
height: 200px;
border: 1px solid #f4f4f4;
margin: 3px 5px;
float: left;
}
.pg-origin{
font-size: 12px;
text-decoration: line-through;
padding-left: 30px;
}
.pg-now{
color: red;
font-size: 20px;
text-decoration: underline;
padding-left: 10px;
}
.pg-goods:hover{
border: 1px solid red;
}
.hot{
width: 50px;
height:50px;
}
</style>
</head>
<body>
<div class="pg-content">
<div class="pg-title">
限时抢购
</div>
<div class="pg-goods">
<div style="position: relative" >
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div style="position:absolute;top: 3px;right: 13px">
<img src="hot.jpeg" alt="" class="hot"/>
</div>
</div>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
<div class="hover"></div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div class="pg-goods">
<a href="https://www.baidu.com">
<img src="02.jpg" alt="">
</a>
<div class="pg-desc">
<span>
特价商品特价商品
<span style="padding-left: 35px;font-size: 12px">周年盛典</span>
</span>
</div>
<div style="margin-top:5px ">
<span class="pg-origin">¥24</span>
<span class="pg-now">¥12</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</body>
背景图片：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.i1{
width: 100%;
height: 600px;
background-image: url("01.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="i1">
11111111111111111
</div>
</body>
CSS的补充：
定位属性：
position:
配合top left right bottom进行定位
1.fixed
将某个元素固定在页面的某个位置
2.releative
3.absolute
单独使用relative和absolute，没有任何意义，需要配合使用
圆角属性：border-radius
背景属性：
背景颜色--- background-color
背景图片：background-image
背景重复：background-repeat:repeat-x /repeat-y /no-repeat
背景位置：background-position-x:18px / background-position-y:18px
背景图片的应用：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.i1{
background-image: url("icon_show.png");
background-repeat: no-repeat;
width: 18px;
height: 18px;
background-position-y:18px ;
}
</style>
</head>
<body>
<div class="i1">
</div>
</body>
溢出属性：
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;width: 100px;height: 200px;overflow: auto">
<p>11111111111111111111111111111111111111111111111111111111</p>
</div>
</body>
z-index：
设置对象的层叠顺序
举例：模态框模板
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
.one{
height: 2000px;
background-color:#dddddd;
}
.two{
height: 2050px;
background-color: gray;
position: fixed;
top:0;
left:0;
right: 0;
bottom: 0;
opacity: 0.5;
}
.three{
height:400px;
width:300px;
background-color: white;
position: fixed;
top: 300px;;
left:800px;
z-index: 10;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="one">
<input type="button" value="点击模态框">
</div>
<div class="three hide"></div>
<div class="two hide"></div>
</body>
JavaScript基础学习目录
Javascript和java没有关系
一、JS如何书写引入及基本语法规范
1.直接在body后面书写
<script>
//js的代码
</script>
ps:单行注释：//
多行注释：/*注释*/
2.引入外部js代码：
<script src=’’></script>
二、变量声明
Python:
a=123
print(a)
JS:
Var a =123
console.log(a)
document.write(a)
ps:js的书写：
1.写在pycharm里面
2.写在console中
三、JS变量类型
parseInt(..) 将某值转换数字，不成功则为NAN
parseFloat(..) 将某值转换浮点数，不成功则为NAN
字符串：
python:
len(str)
js:
str.length()
布尔类型：
python:
True / False
js:
true / false
Python:
None
Js:
Null
Undefined
四、运算符介绍
五、流程控制
Python:
If 条件：
代码块
elif 条件：
代码块
else：
代码块
Js:
lf(条件){
代码块;
}else if (条件){
代码块;
}else{
代码块;
}
三元运算：
Js:
var a=3;
var b=5;
c=a>b?a:b;
循环：
li = [1,2,3,4]
python:
for i in li:
print(i)
js:
第一种：
for i in li:
console.log(i+’---’+li[i])
第二种：
for (var i=0;i<length;i++){
cosole.log(i+’---’+li[i]);
}
dic={“name”:’alex’,’age’:18}
python:
for i in dic:
print(dic[i])
js:
for I in dic:
console.log(i+’----’+li[i])
六、函数
python：
def text():
Print(‘hello’)
Js:
Function test(){
var a =123;
console.log(123);
}
test()
var f = function(){
Console.log(‘aaa’)
}
f();
常见的模块：
python:
class Test():
def get():
pass
t=Test()
js:
var d= new Date() //返回当前的日期和时间
console.log(d)
d.getDate
d.getFullYear()
Math.random()
JSON对象和字符串相互转换:
字符串--->对象:JSON.parse()
对象---->字符串：JSON.stringify()
在数据传输流程中，json是以文本,即字符串的形式进行传递，而JS操作的是JSON对象,所以JSON对象和JSON字符串之间需要相互转换
JSON字符串：
var s = '{"name":"frank","age":18}';
f=JSON.parse(s) //字符串转换JSON
f['name']
JSON对象：
{name: "frank", age: 18}
JSON.stringify(f) // JSON转换字符串
BOM(Browser Object Model)浏览器对象模型
DOM(document)文档对象
DOM对象---查找元素
DOM:
直接查找
document.getElementByID 根据ID获取一个标签
document.getElementByName 根据name属性获取标签集合
document.getElementByClassName 根据class属性获取标签集合
document.getElementByTagName 根据标签签名获取标签集合
举例：
document.getElementByID
pycharm:
<body>
<input type="text" id="i1">
<script></script>
</body>
浏览器Console：
var i1=document.getElementById('i1');
i1
pycharm:
document.getElementByClassName
<body>
<!--<input
type="text" id="i1">-->
<div class="i1"></div>
<div class="i1"></div>
<div class="i1"></div>
<script></script>
</body>
浏览器Console:
var i1=document.getElementsByClassName('i1');
for (var i=0;i<i1.length;i=i+1){
console.log(i+'----'+i1[i1]);
}
浏览器Console:
var divEle=document.getElementsByTagName('div');
divEle
表格的全选和反选
table>tr*3>td*3
<body>
<input type="button" value="全选" onclick="selectAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
<input type="button" value="反选" onclick="reverseAll()"/>
<table border="1px">
<tr>
<th>ID</th>
<th>IP</th>
<th>Port</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>192.168.1.1</td>
<td>80</td>
<td><input type="checkbox" class="chk"></td>
</tr>
<tr>
<td>2</td>
<td>192.168.1.2</td>
<td>3306</td>
<td><input type="checkbox" class="chk"></td>
</tr>
<tr>
<td>3</td>
<td>192.168.1.3</td>
<td>3389</td>
<td><input type="checkbox" class="chk"></td>
</tr>
</table>
<script>
function selectAll() {
//1.找到所有的checkbox
var inputs=document.getElementsByClassName('chk');
console.log(inputs);
//2.对所有的checkbox 设置一个值
for (var i=0; i<inputs.length; i=i+1){
inputs[i].checked=true
}
}
function cancelAll() {
//1.找到所有的checkbox
var inputs=document.getElementsByClassName('chk');
console.log(inputs);
//2.对所有的checkbox 设置一个值
for (var i=0; i<inputs.length; i=i+1){
inputs[i].checked=false
}
}
function reverseAll() {
//1.找到所有的checkbox
var inputs=document.getElementsByClassName('chk');
console.log(inputs);
//2.对所有的checkbox 设置一个值
for (var i=0; i<inputs.length; i=i+1){
if(inputs[i].checked){
inputs[i].checked=false;
}else {
inputs[i].checked=true
}
}
}
</script>
</body>
DOM对象–属性操作
1.操作内容
<body>
<div id="i1">
<div>
asdfasdfasf
</div>
</div>
</body>
innerText：文本
s=document.getElementById('i1')
s.children[0].innerText
innerHTML: HTML内容
value:值
s.value='用户名'
2.操作属性
attributes 获取所有标签属性 s.attributes
setAttribute(key,value) 设置标签属性 s.setAttribute('name','frank')
getAttribute(key) 获取指定标签属性 s.getAttribute('id')
removeAttribute(key) 删除属性 s.remove('name')
3.操作样式：
1.操作整块样式
classList:css样式值
classList.remove('css值'):删除某一块css样式
classList.add('css值')：加入某一块css样式
2.操作单个样式
obj.style.css属性='属性值'
例子：
obj.style.backgroudColor='red';
举例：发送验证码
<body>
<input type="button" id="btn" value="发送验证码" onclick="send();">
<script>
var cnt=5;
function send() {
var btn=document.getElementById('btn');
btn.setAttribute('disabled',true);
btn.value='验证码倒计时'+cnt+'s';
s=setInterval('setremaintime()',1000)
}
function setremaintime() {
cnt=cnt-1
if (cnt==0){
btn.value='发送验证码';
btn.setAttribute('disabled',true);
clearInterval(s);
}else {
btn.value='验证码倒计时'+cnt+'s';
}
}
</script>
</body>
举例：模态对话框：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" >
.one{
height: 2000px;
background-color:#dddddd;
}
.two{
height: 2050px;
background-color: gray;
position: fixed;
top:0;
left:0;
right: 0;
bottom: 0;
opacity: 0.5;
}
.three{
height:400px;
width:300px;
background-color: white;
position: fixed;
top: 300px;;
left:800px;
z-index: 10;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="one">
<input type="button" value="点击模态框" onclick="show();">
</div>
<div class="three hide">
<form action="">
用户名：<input type="text"><br/>
密码：<input type="password"><br/>
<input type="submit" value="提交">
<input type="button" value="取消" onclick="hide();">
</form>
</div>
<div class="two hide"></div>
<script>
function show() {
document.getElementsByClassName('three')[0].classList.remove('hide');
document.getElementsByClassName('two')[0].classList.remove('hide');
}
function hide() {
document.getElementsByClassName('three')[0].classList.add('hide');
document.getElementsByClassName('two')[0].classList.add('hide');
}
</script>
</body>