44 day of python
补充:
协议 主机地址 端口号 路由地址 query
http://localhost:8080/s?key1=value1&key2=value
c s
B S
http://127.0.0.1:8880
HTTP 1
HTTP 2
内容回顾:
语义化的标签:
div+span
a
img
ul
li
p
table
tr
td
form ***
action:提交的地址
method:提交的方式
注意：如果有文件需要提交给服务器，method必须为POST，enctype必须为multipart/form-data
表单控件:
input
type:
text 文本输入框
password 密码
radio 单选
checkbox 多选
file 文件上传
submit 提交按钮
button 普通按钮
select
option
textarea
多行文本输入框
前端跟后端进行交互有两种方式:
1.form标签提交
如果是get请求,那么会把表单控件input中的name属性对应的值封装成地址栏的key,value值封装成地址栏的value,打包发送到后端,后端进行相应的处理
/
/index.html
/music.html
2.Ajax技术
css:层叠样式表
三种引入方式:
1.行内样式 优先级最高
2.内接样式
基础css选择器
id选择器 #
class选择器 .
标签选择器 div
通配符选择器 *{}
高级选择器:
后代(儿子,孙子....)选择器: div p
子代(亲儿子)选择器 div>p
3.外接样式
div red 200*200
点击事件
1.找东西 事件对象
2.事件
3.事件驱动 green
<script type="text/javascript">
/*
1.找东西
*/
var oDiv = document.getElementById('box');
// 2.事件
oDiv.onclick = function() {
oDiv.style.backgroundColor = 'green';
}
</script>
今日内容:
高级选择器:
交集选择器
并集选择器
为什么要重置样式?
是为了更好页面布局
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
属性选择器
伪类选择器
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
伪元素选择器
p:after{
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
1.标准文档流
行内 块
标签都是占位置
一旦标签浮动了 该标签就会
(1)脱离了标准文档流
(2)可以设置宽高
(3)不占位置
高级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /**/ /**{ padding: 0; margin: 0; }*/ html,body,div,p,ul,li,ol,dl,span,a{ padding: 0; margin: 0; } ul{ list-style: none; } /*重置样式*/ #box,.wrap2{ width: 200px; height: 200px; background-color: red; } /*h3,p,a,span{ font-size: 14px; color: #999 }*/ p{ font-size: 20px; color: red; } /*交集选择器*/ p.active{ background-color: rgb(248,115,0); } /*属性选择器*/ input[name='user']{ font-size: 20px; } input[type='password']{ font-size: 20px; } </style> </head> <body> <div id="box" class="wrap"></div> <div class="wrap2"></div> <h3>哈哈哈</h3> <p >哈哈哈1</p> <p class="active">哈哈哈2</p> <p >哈哈哈3</p> <a href="#">哈哈哈</a> <span>哈哈哈</span> <ul> <li>111</li> </ul> <input type="text" name="user" id="" class=""> <input type="password"> <!-- js --> <script type="text/javascript"> /* 1.找东西 */ var oDiv = document.getElementById('box'); // 2.事件 oDiv.onclick = function() { oDiv.style.backgroundColor = 'green'; } </script> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*奇技淫巧*/ /*伪类选择器*/ /*a标签 要遵循 爱恨准则 LoVe HAte*/ /*.box ul li a:link{ color: green; }*/ /*访问过后显示的样式*/ /*.box ul li a:visited{ color: yellow; }*/ /*鼠标的悬浮显示的样式*/ .box ul li a:hover{ color: yellow; } /*摁住的时候显示的样式*/ /*.box ul li a:active{ color: yellowgreen; }*/ /*button:link{ background-color: red; }*/ p:hover{ color: yellow; } </style> </head> <body> <p>哈哈哈</p> <button>提交</button> <div class="box"> <ul> <li> <a href="#">百度一下</a> </li> </ul> </div> </body> </html>
伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } p::first-letter{ color: yellow; font-size: 20px; } /*1.清除浮动 2.将$变成块级元素 3.并且显示不占位置(不会影响界面布局)*/ p:after{ content: '.'; color: red; /*变成块级标签*/ display: block; /*可见的元素隐藏 隐藏完占位置*/ visibility: hidden; height: 0; /*可见元素隐藏 让元素不占位置*/ /*display: none;*/ /*display: inline;*/ /*display: inline-block;*/ } /*p span{ color: red; }*/ button:hover{ background-color: red; } </style> </head> <body> <p>alex</p> <div>哈哈哈哈</div> <button>aaa</button> </body> </html>
浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .top{ width: 100%; height: 40px; background-color: #333; } .container{ width: 1226px; /*height: 40px;*/ background-color: red; margin-left: auto; margin-right: auto; } .top .top-l{ width: 400px; height: 40px; background-color: yellow; text-align: center; line-height: 40px; /*脱离了文档*/ float: left; } .top .top-r{ width: 300px; height: 40px; background-color: blue; /*float: right;*/ float: right; } .wrap{ width: 100%; height: 200px; background-color: purple; } /*.clearfix:after{ content: "."; display: block; height: 0; visibility: hidden; clear: both }*/ </style> </head> <body> <div class="top"> <div class="container clearfix"> <div class="top-l">400*40</div> <div class="top-r">300*40</div> </div> </div> <div class="wrap"> <div class="container"> </div> </div> <div> </div> <div> </div> </body> </html>
浮动进阶
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 300px; background-color: red; } .box2{ width: 100%; height: 500px; background-color: green; } .container{ width: 1226px; /*height: 300px;*/ /*background-color: pink;*/ /*让盒子居中显示*/ margin-left: auto; margin-right: auto; } .box .l{ width: 200px; height: 200px; background-color: yellow; float: left; margin-right: 20px; } .box .r{ width: 300px; height: 300px; background-color: purple; float: left; } .t{ width: 400px; height: 400px; background-color: green; float: left; } </style> </head> <body> <div class="box"> <div class="container"> <div class="l">1</div> <div class="r">2</div> <div class="t">3</div> </div> </div> <div class="box2"> <div class="container"></div> </div> </body> </html>
浙公网安备 33010602011771号