常见的表单提交
<selcet>
<input type="text" placeholder="请输入用户名"/>
<input type="password" placeholder="请输入密码"/>
<input type="radio" /> 单选按钮
<input type="checkbox" /> 复选框
<input type="file" />文件上传组件
<input type="date"/>日期组件
<input type="button" value="指定按钮名称"/> 普通按钮
<input type="sumit" value="提交"/>提交按钮 <button> 提交</button>
<select>
<option>下列选项</option>
</select>
get和post提交的区别
- 数据是否提交到地址栏上
get提交直接将数据提交到地址栏上(地址栏携带参数)
post提交不会提交到地址栏上会通过浏览器调试器F12---->netWork可以查看到负载数据 - 是否安全
get不安全,不适合提交隐私数据
post提交相对安全(后期要加密) - 提交数据大小是否有限制
get提交数据量有限制
post提交数据大小无限制
框架标签
frame:框架,一个框架标签包含一个html页面
但是整个主页的部分可能有多个页面组成,包含多个frame需要用在frameset框架集中使用
frame
src=“包含的页面地址” name=“给定frame的名称”
frameset
rows=“从上往下划分,每一个部分的权重百分比,中间逗号隔开”
cols=“从左到右划分,每一个部分的权重百分比,中间逗号隔开”
<!-- 整个结构三个页面组成一个结构,使用框架集 不能放在body中-->
<frameset rows="25%,*">
<!-- 20%:指定当前头部页面 -->
<frame src="logo.html" />
<!-- 左到右分为两部分 -->
<frameset cols="15%,*">
<!-- 15%,左边菜单页 -->
<frame src="left.html" />
<!-- 框架的名称name属性 -->
<frame src="middle.html" name="middle" />
left
a标签target指定打开链接地址的方式
需要结合框架标签中使用,必须指定frame打开
target="frame框架标签的名称"
-->
<!-- <a style="text-decoration: none;color: deepskyblue;" href="表格数据.html" target="middle">用户管理</a> -->
css使用
<!--
CSS:层叠样式表:一定书写的样式是系统样式库中内容
1)行内样式:单独控制html文档某一个标签 (弊端,只能控制一个)
每一个html标签都有style属性="样式属性名称=值;样式2=值2..."
2)内部方式
在head标签体中 指定style标签,书写样式代码
选择器{
样式属性名称1:值2;
...
样式属性名称n:值n;
}
弊端:CSS代码和html标签混合到一块,不利于维护!
3)外部方式:
单独创建.css文本文件----使用选择器书写代码
存储在项目下css文件夹中
在当前页面中导入css文件
link标签 href属性="css文件地址" rel="stylesheet" 关联层叠样式表
前端人员都是使用的外部方式!
-->
<style>
/* div{
text-decoration: underline;
font-size: 20px;
color: orange;
} */
</style>
<link href="css/outer.css" rel="stylesheet"/>
</head>
<body>
<!-- <div style="color: blue;font-size: 30px;text-decoration: underline;">div内容</div> -->
<div>div内容</div>
css选择器
- 常见选择器
id选择器(id属性值唯一)
class选择器(class属性值可以同名)
标签名称选择器(优先级最低)
子元素选择器(selector1…selector2)
伪类选择器:
link(未访问的)
hover(经过状态)
active(激活状态,获取焦点,点击未松开)
visited访问过的状态(点击后松开)
<!-- 常用的CSS选择器 -->
<style>
/*标签选择器*/
/* div{
font-size: 20px;
color: aquamarine;
} */
/* 类选择器 class
在标签中给定class属性,同一个html页面,class属性可以同名
类选择器 > 标签名称(元素)选择器
*/
/* .div1{
font-size: 30px;
color: red;
} */
/*
id选择器, 在标签指定id值,id值必须唯一!
不能重复
#id属性值{
}
id选择器优先级>class选择器>标签名称选择器
*/
/* #di1{
text-decoration: underline;
color: blue ;
} */
/*子元素选择器
选择器1 选择器2...
*/
/* #di1 span{
color: greenyellow;
font-size: 15px;
} */
/*
并集选择器
选择器1,选择器2....
*/
/* #di1,span,.div1{
font-size: 30px;
color: darkgray;
text-decoration: underline;
} */
/*
伪类选择器(锚伪类)
描述元素(标签)的一种状态:
link:鼠标没有经过的状态
hover:标经过状态
active:鼠标激活(点击元素,没有松开)的状态 (获取焦点)
visited:鼠标访问过的状态(点击并且松开了)
选择器名称:状态名称(不区分大小写){
控制样式;
}
注意事项:
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
*/
a:link{
color: darkorange;
font-family: "楷体";
}
a:visited{
color: darkgrey;
text-decoration: none;
}
a:hover{
color: green ;
font-size: 25px;
/* 去掉下划线 */
text-decoration: none;
}
a:active{
color:blue;
font-size: 30px;
text-decoration: underline;
}
/* 鼠标经过状态 */
#btn:hover{
color: #008000;
}
</style>
</head>
<body>
<div class="div1" id="di1">
<span>手机数码</span>
</div>
<div class="div1">电脑办公</div>
<span>数码专场</span>
<hr/>
<a href="02_CSS使用.html">跳转</a>
<input type="button" id="btn" value="按钮" />
CSS常用的样式属性
边框样式
border:1px solid red ;
背景样式
background-color:背景色;
background-image:url(图像地址) ;背景图片
background-repeat:no-repeat; 设置图片是否重复
backgoung-position:top left ; 设置图片的起始位置
字体样式
font-size:字体大小像素;
font-family:字体类型 “楷体/黑体/宋体…”;
font-weight:字体的粗细程度 一般值 bold 适当加粗—700ox
文本样式
color:文本颜色;
text-align:文本对齐方式
text-decoration:文本修饰 下划线underline/去掉下划线 none/中划线 line-through
letter-spacing:字(母)/字符间距
浮动样式:
设置浮动
float:left/right;
清除浮动
clear:left:左边不浮动/right:右边不浮动
both:左右两边都不浮动;
表格样式
border-collepase:设置collepase 将单元格和边框线进行折叠
列表样式
list-style-type:设置列表项的标记 设置为none,列表项的标记
list-style-image:自定义列表项前面的图形
Css浮动属性
/*
浮动属性float:控制元素向左或者向右浮动,当前这个元素
表现的就想块框不存在一样,碰到外边框(浏览器)或者其他的块框就停止!
*/
#d1{
width: 1250px;
height: 120px;
border: 1px solid #000;
/* 背景色 */
/* background-color:red ; */
/* 浮动属性float */
/* float:right; */
float:left ;
}
#d2{
margin-top: 5px;
/* width: 200px;
height: 200px; */
border: 1px solid #000;
/*
background-color:green ; */
/* float:left ; */
}
#d3{
width: 200px;
height: 200px ;
border: 1px solid #000;
background-color:blue ;
float: right;
}
#clear{
/*清除浮动clear属性
both:左右两边都不浮动
*/
clear: both;
}
a{
color: skyblue;
}
</style>
</head>
<body>
<div id="d1">
<img src="img/logo.png" width="100%" />
</div>
<!-- 多个div中间加入空div -->
<div id="clear">
</div>
<div id="d2">
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
</div>
<!-- <div id="d3">第三个div</div> -->
盒子模型
万物皆盒子,将任何标签都使用dov包裹起来通过css样式属性进行控制.
border:盒子的厚度 边框
width/heigth:盒子的容量 盒子的内容(范围)
padding:内边距:设置盒子的内容和边框之间的距离
margin:外边距 设置盒子和盒子之间 距离
div+CSS 层级布局
<!--
边框---本身就有四个边
边框颜色 border-color
边框宽度 border-wdith
边框的样式border-style
特点:1) 默认的方向:上 右 下 左
2)某一边没有设置颜色/宽度/样式,会补齐对边的颜色/宽度和样式
边框颜色 border-color :颜色1 颜色2 颜色3 颜色4;
边框宽度border-wdith :宽度1 宽度2 宽度3 宽度4
边框的样式border-style:样式1 样式2 样式3 样式4 (必须指定)
-->
<style>
#bodyDiv{
background-image: url(img/bg.jpg);
}
/* 控制大的div */
#mainDiv{
/* 边框颜色 */
/* border-color: red ; */
/* 边框的宽度 */
/* border-width: 3px; */
/* 边框样式 */
/* border-style: solid; */
/*border简写属性:将上面三个声明到一个中书写
border:border-width border-style border-color
*/
border: 1px solid black;
/* 整个div设置宽度和高度*/
width: 420px;
height:260px;;
/* 边框圆角 像素弧度大小 */
border-radius: 5px;
/* margin-left: 430px;
margin-top: 130px; */
/* 上 右 下 左*/
margin:130px 0 0 430px;
background-color: #87CEFA;
}
/* 给id="userDiv" */
#userDiv{
margin: 40px 0 0 100px;
}
/* 给id="pwdDiv"控制样式 */
#pwdDiv{
margin: 20px 0 0 100px;
}
/* 给id="rememDiv"控制样式 */
#rememDiv{
margin: 20px 0 0 150px;
}
/* 给id="btnDiv"控制样式 */
#btnDiv{
margin: 20px 0 0 170px;
}
</style>
</head>
<body id="bodyDiv">
<div id="mainDiv">
<form >
<div id="userDiv">
用户名:<input type="text" placeholder="请输入用户名" />
</div>
<div id="pwdDiv">
密  码:<input type="password" placeholder="请输入密码" />
</div>
<div id="rememDiv">
<input type="checkbox" /> remember me
</div>
<div id="btnDiv">
<input type="submit" value="登录" />
<input style="margin-left: 10px;" type="button" value="注册" />
</div>
CSS定位属性
<title>CSS定位属性</title>
<!--
position定位属性:
absolute:绝对定位
当前这个标签针对父元素进行移动
relative:相对定位
当前元素是针对之前的位置进行移动
fixed:固定定位
结合left/right/top/bottom---执行像素大小,将整个盒子进行移动
-->
<style>
#d1{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: red;
}
#d2{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: blue;
}
#d3{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: greenyellow;
/* 绝对定位 */
/* position: absolute; */
/* position: relative;
left: 50px;
top: 20px; */
}
#advDiv{
width: 150px;
height: 150px;
border: 1px solid #000;
background-color: skyblue;
position: fixed;
left: 420px;
top:200px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
