基础2

表单
1:表单标签


属性:
action="接口地址"

method="get/post"
name="表单名称"

2:表单控件

属性:
type="控件类型"
name:属性标识表单域的名称;
value:属性定义表单域的默认值,其他属性根据type的不同而有所改变化。
 
type="text"当行文本输入框 
type="password"密码输入框
type="submit"提交按钮
type="reset"重置按钮
type="button"空按钮(如果要做功能,需要结合js)

name="名字"
value="值"
maxlength="允许输入的字符个数"
size="设置元素显示的宽度"

get和post的区别:
get:在地址栏提交,有长度限制,有可能造成数据丢失,一般提交的数据较短,明文可见,
不安全,就算加密也比较容易破解,速度较快,如果只考虑速度那就用get
post:不在地址栏提交,安全,没有长度限制(理论上是有长度限制)一般提交的数据较大,速度较慢

 

样式的基本规则:
1:属性与值之间用英文冒号连接,分号结束
2:属性与属性之间可以空格,可以换行
3:一个属性中有多个属性值时,属性值与属性值之间用空格隔开,没有先后顺序
4:属性与属性值必须在花括号中

样式的三种写法:
1:内部样式 存在在head标签中
2:内联样式 以属性style的方式添加在标签中


创建独立的css文件

方式一(推荐使用)

另一种引入方式:
在style标签第一行添加
@import url(css文件地址);
创建独立的css文件

样式表权重关系
外部样式 内部样式<内联样式
就近原则

选择器:(选中指定的元素)
类型选择器(标签选择器):div span h1 p li ul......

类选择器(class选择器):选中指定的元素,在一个页面中可以多次出现
1:在标签中添加属性 class=".属性"
2:在样式中的选择器 .属性{}

id选择器:选中指定的元素,在一个页面中相同值只允许出现一次
1:在标签中添加属性 id="#属性"
2:在样式用添加选择器 #属性{}

伪类选择器:(更多的是控制颜色)
:link{}未访问之前的状态
:visited{}访问过后的状态
:hover{}鼠标悬停的状态
:active{}鼠标按下的状态

通配符 * 匹配页面所有的元素进行统一操作
*{margin:0;padding:0;}(消除了所有元素的间距)

群组选择器 选择器1,选择器2,选择器3

包含选择器(后代选择器) 选择器1 选择器2 选择器3{属性:值;}

选择器权重对比
id > class >类型选择器
100 10 1
内联样式选择器权重值1000
包含选择器权重值为各个选择器权重之和
除非有添加 !important

 

 

列表修饰符
list-style:;=list-style-type:;
disc 小黑圆点
circle 空心圆
square 实心方块
none 取掉修饰
list-style-image:url(图片地址)
list-style-position:图片位置;
outside 外边
inside 里边
边框:
border:边框大小 边框形态 边框颜色;
border-width:边框的大小;
border-style:边框的形态;
border-color:边框的颜色;

border-style边框的常用线型
:solid 实线
:dashed虚线
:dotted点状线
:double双线
某一个方向的拆分:
border-top:上边框大小 上边框形态 上边框颜色;
border-bottom:底边框大小 底边框形态 底边框颜色;
border-left:左边框大小 左边框形态 左边框颜色;
border-right:右边框大小 右边框形态 右边框颜色;

利用边框斜切实现三角形
border:30px solid transparent;颜色设置位透明
border-top-color:red; 某一个方向的颜色不透明


PS的应用(基本操作)
1:放大缩小
ctrl+alt+shift+鼠标滑轮
2: 测量尺寸
矩形选框工具
f8调出信息面板
修改尺寸单位
编辑--首选项--单位与标尺--单位--px
3: 辅助线ctrl+R
页面结构划分:
1:头部区域
2:轮播图区域
3:内容区域
4:底部区域

background-color:背景颜色
颜色单词 red blue green......
十六进制# 0-9 a-f
三原色 rgb(0,0,0) 0-255

background-image:url("图片地址");
与img标签的区别:
img是标签,是结构,占据页面位置
background-image:;是css样式,不占据位置
(画在墙上的一幅画,被img盖住)
背景图默认平铺

background-repeat:图片是否平铺;
repeat 平铺(默认值)
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺

background-position:背景定位;
关键字写法
水平值 left center right
垂直值 top center bottom
具体像素位置
综合写法:
background:颜色 图片 是否重复 定位;
background-attachment:背景关联;
scroll 滚动(默认值)
fixedq 固定

浮动的属性:
float:;
left 左浮动
right 右浮动
none 不浮动
浮动的目的:
让竖着的元素横着来
浮动效果:
1:左浮动找左边,右浮动找右边
2:浮动只影响后面的元素,不影响前面的元素
3:父级元素的宽度小于浮动子元素的总宽度,子元素将被迫换行
4:子元素高度不一致的浮动元素被迫换行时,可能被卡着
5:结构先写的先浮动,后写的后浮动
6:图文混排
7:浮动产生的问题,父级元素高度塌陷
解决办法: 给父级元素添加height:;

盒模型:
外边距::改变元素外边的间距
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
margin-top:上外边距;
margin-right;右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
注意:margin可以为负值 ,auto自适应
margin常见bug:
1:上下外边距相遇,只显示最大值
2:嵌套关系的元素,子元素的上外边距和父元素的上外边距相遇,取较大值
内边距:改变元素与内容的间距
padding:一个值; 一个值,改变四个方向 padding:10px(内边距)
padding:上下 左右; padding:px px(上下 左右)
padding:上 左右 下; padding:px px px(上 左右 下)
padding:上 右 下 左; padding:px px px px(上 右 下 左)顺时针方向变化
注意: 内边(padding)没有负值;

盒模型占位大小计算:
W= width+左右边框+左右内边距+左右外边距
H= height+上下边框+上下内边距+上下外边距

版心是页面的内容显示区域
有具体宽度 width:;
左右居中 margin:0 auto;
切图方式:
1:矩形选框工具选中=>ctrl+c=>ctrl+n=>ctrl+v=>ctrl+shift+alt+s存储
2:切片工具=>选中区域=>ctrl+shift

 

你可能感兴趣的:(基础2)