Web目录
1、表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!-- 属性:
action: 将表单数据发送给服务器的哪个资源
method: 请求发送的方式 get(默认) post
enctype: application/x-www-form-urlencoded -> map
multipart/form-data -> 上传文件
text/plain -> 普通文本 json
-->
<form action="#" method="get" enctype="multipart/form-data">
<!-- input: 输入框
属性:
type: text - 文本
password - 密码
checkbox - 多选框
radio - 单选按钮
file - 文件. 配合enctype使用
date - h5 时间, 提交格式 yyyy-mm-dd
submit - 提交按钮
reset - 重置按钮
button - 普通按钮, 配合js来使用
hidden - 隐藏域, 通常用来存储id
name: 数据提交给服务器的时候对应的key
value: 输入框对应的值
readonly: 只读, 不能修改
placeholder: h5, 输入框的提示信息
checked: 添加默认选项, 只对 checkbox 和 radio 有效
button: 按钮标签, 和input中的type=button作用一致
属性: type [submit, reset, button]
select: 下拉列表
属性: name
选项就是子标签: <option>
属性: value, 可以取代option标签体内容
textarea: 多行文本域
属性: name rows cols
-->
<input type="hidden" name="id" value="123456" /><br>
<input type="text" name="stuid" value="123456" readonly /><br>
用户名: <input type="text" name="username" value="lucy" /><br>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="请输入密码" /><br>
<input type="checkbox" id="swimming" name="hobby" value="swimming" />
<!-- label普通文本标签, 让他和其中一个输入框做一个关联
属性: for="id" -->
<label for="swimming">游泳</label>
<input type="checkbox" name="hobby" value="game" checked />打游戏<br>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" checked/>女 <br>
<input type="file" name="phone" /><br>
<input type="date" name="birthday" /><br>
籍贯: <select name="address" >
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="sd">山东</option>
<option value="jx">江西</option>
</select> <br>
个人简介: <textarea cols="20" rows="20" >
</textarea> <br>
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
<button type="submit">登录</button>
<button type="reset">重置按钮</button>
<button >普通按钮</button>
</form>
</body>
</html>
2、div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
</head>
<body>
<!-- div自己独立占一行, 一定配合css使用 -->
<div>1111</div>
<div>2222</div>
<!-- span内容多大, 占地多大 -->
<span>3333</span>
<span>4444</span>
<!-- 块元素: div hn li p
会自动换行的元素
-->
<!-- 行内元素: span a img
不会自动换行的元素
不支持所有的css样式
-->
</body>
</html>
3、css入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css入门</title>
<!-- 2.内联式 在head中添加style标签
特点: 只针对当前页面有效
-->
<style>
/* 注释 */
/* 语法: (选择器: 选择元素的方式)
选择器 {
font-size:50px;
font-size:50px;
font-size:50px;
}
*/
div {
/* 字体颜色 */
color: blue;
}
</style>
<!-- 3.外联式 使用link标签 引入外部的css文件
特点: 样式文件可以被不同页面引用
-->
<link href="css/mystyle.css" rel="stylesheet" />
</head>
<body>
<!-- 1.内嵌式 标签中添加style属性
特点: 只针对当前标签有效
-->
<!-- font-size: 字体大小 -->
<div style="font-size:50px;">1111</div>
<div >222</div>
<div >333</div>
<div >444</div>
</body>
</html>
4、css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style>
/* 大类1: 基础选择器 */
/* 1. id选择器, 元素需要有id #id */
#div1 {
color: #0000FF;
}
/* 2. 类选择器, 元素需要有class .class */
.cls1 {
color: red;
}
/* 3. 元素选择器 元素名 ele */
div {
color: pink;
font-size: 30px;
}
/* 4. 所有元素 包含body */
* {
background-color: #9ACD32;
}
/* 5. 组合选择器 */
#div1, .cls1, span {
color: yellow;
}
</style>
</head>
<body>
<div id="div1" class="cls2">1111</div>
<div class="cls1">222</div>
<div>333</div>
<div>444</div>
<span class="cls1">555</span>
<span>666</span>
</body>
</html>
5、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/* 判断有没有对应属性 */
/* 有class属性的div元素 */
div[class] {
border: 1px solid red;
}
/* class属性值是cls1的div元素 */
div[class='cls1'] {
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="div1" class="cls2">1111
<div>1-111
<div>1-1-11</div>
<div>1-1-22</div>
</div>
<div>1-222</div>
<div>1-333</div>
<span>1-444</span>
</div>
<div class="cls1">222</div>
<div>333</div>
<div>444</div>
<span class="cls1">555</span>
<span>666</span>
</body>
</html>
6、伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器/过滤选择器</title>
<style>
/* #div1基础选择器取出来的第一个元素 */
#div1 > div:first-child {
border: 1px solid red;
}
a {
/* 去掉超链接的下划线 */
text-decoration: none;
}
/* :link 链接没有被访问过的状态 */
a:link {
color: green;
}
/* 链接被访问过的状态 */
a:visited {
color: #0000FF;
}
/* 鼠标悬停状态 */
a:hover {
color: pink;
}
/* 鼠标点击链接的状态 */
a:active {
color: red;
}
</style>
</head>
<body>
<div id="div1" class="cls2">1111
<div>1-111
<div>1-1-11</div>
<div>1-1-22</div>
</div>
<div>1-222</div>
<div>1-333</div>
<span>1-444</span>
</div>
<div class="cls1">222</div>
<div>333</div>
<div>444</div>
<span class="cls1">555</span>
<span>666</span>
<a href="03_css入门.html">03_css入门</a>
</body>
</html>
7、文本、字体和背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本,字体和背景</title>
<style>
#div1 {
/* 字体颜色 */
color: red;
/* 文本对齐方式 justify */
text-align: justify;
/* 文本设置下划线之类的 */
/* line-through underline overline none */
text-decoration: underline;
/* 首行缩进 设置段落 */
text-indent: 50px;
/* 文字间距 设置段落, 标题 */
letter-spacing: 10px;
}
#div2 {
/* 可以同时设置多个字体, 显示第一个可以识别的字体 */
/* font-family: "microsoft yahei", Arial; */
/* 字体风格 italic normal */
/* font-style: italic; */
/* 字体大小 */
/* font-size: 20px; */
font: italic 20px "microsoft yahei", Arial;
}
body {
/* 设置背景图片 */
/* background-image: url("../img/regist_bg.jpg"); */
/* 图片是否重复 repeat no-repeat */
/* background-repeat: no-repeat; */
/* 图片位置 */
/* background-position: top center; */
background: url("../img/regist_bg.jpg") no-repeat top center;
}
</style>
</head>
<body>
<div id=div1>
中文内容
</div>
<div id=div2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium nihil?
</div>
</body>
</html>
8、盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div {
border: 1px solid red;
/* border-left: 10px solid blue; */
}
#div1 {
/* 盒子模型: 外边距 边框 内边距 内容 */
/* 盒子模型的宽高指的是内容的大小 */
width: 100px;
height: 100px;
/* 内边距 影响边框位置 */
/* padding-left: 10px;
padding-top: 1px; */
/* padding: 10px 20px; */
padding: 1px 0px 0px 10px;
/* 外边距 */
margin: 10px;
}
#div2 {
width: 200px;
height: 100px;
/* 元素居中 */
/* margin: auto; */
/* 如果相邻的两个元素都有外边距, 取两者最大值 */
margin-top: 20px;
padding: 20px;
/* 边框不会受到内边距的影响 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div id=div1>111</div>
<div id=div2>2222</div>
</body>
</html>
9、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#div1 {
border: 1px #0000FF solid;
width: 100px;
height: 110px;
/* 浮动 */
float: left;
}
#div2 {
border: 1px #FF0000 solid;
width: 200px;
height: 100px;
float: left;
}
/* div3太长了, 被 "挤"下来了 */
/* 挤下来的同时, 被高度110的div1 "卡住了" */
#div3 {
border: 1px green solid;
width: 1100px;
height: 100px;
float: left;
}
#div4 {
border: 1px grey solid;
/* 清除浮动效果 */
clear: both;
}
span {
border: 1px red solid;
/* 设置显示方式 block-块元素 inline-行内元素
inline-block 行内元素, 但是保留了block可以设置宽高特点
*/
display: inline-block;
width: 30%;
margin: 0px;
}
</style>
</head>
<body>
<div id=div1>111</div>
<div id=div2>2222</div>
<div id=div3>333</div>
<div id=div4>444</div>
<span id="span1">span1</span>
<span id="span2">span2</span>
<span i=span3>span3</span>
</body>
</html>
10、div+css完成首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css完成首页</title>
<style type="text/css">
/* div {
border: 1px red solid;
} */
#header {
height: 51px;
}
#header div {
height: 100%;
width: 33%;
float: left;
}
#header div li {
float: left;
/* 设置列表符号 */
list-style-type: none;
margin-left: 16px;
}
a {
text-decoration: none;
color: #3286BB;
}
#nav {
height: 50px;
background-color: #222222;
/* 圆角 */
border-radius: 5px;
}
#nav li {
float: left;
list-style-type: none;
margin-right: 25px;
}
#nav li:first-child {
font-size: 22px;
/* 字体纵向对齐方式 */
}
#nav li a {
color: #9D9D9D;
}
#img {
height: 631px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- logo部分 -->
<div id="header">
<div><img src="../img/logo2.png"/></div>
<div><img src="../img/header.png"/></div>
<div>
<ul>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">购物车</a></li>
</ul>
</div>
</div>
<!-- 导航栏部分 -->
<div id="nav">
<ul>
<li><a href=#>首页</a></li>
<li><a href=#>手机电脑</a></li>
<li><a href=#>皮鞋箱包</a></li>
<li><a href=#>母婴用品</a></li>
<li><a href=#>美妆护肤</a></li>
</ul>
</div>
<!-- 轮播图部分 -->
<div id="img">
<img src="../img/1.jpg" width="100%"/>
</div>
</body>
</html>
11、note
表单标签 form
服务器连接
作用: 收集数据, 通过提交按钮, 将数据发送给服务器
1.表单 form
2.form要有action
3.需要提交按钮
4.输入标签需要有name属性
?username=lucy&password=1234&hobby=on&hobby=on
1.checkbox 需要给对应的值: 加 value 属性, 默认都是 on
2.radio 需要给对应value属性, 默认值也是 on
css 语法:
css样式名字: 样式的值;css样式名字: 样式的值;css样式名字: 样式的值;
圆角 - 边框
定位
光标, 鼠标 - 链接
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
