web前端程序设计
div
<div style='position:fixed;left:10px;top:10px;bottom:10px;width:200px;height:750px;' >固定div位置</div>
table
列的合并（左右）：colspan=“数字” （数字表示跨度）
行的合并（上下）：rowspan=“数字”
width中的百分比表示为表示对于父元素
tr行可以改变高度height，不能改width，也可以设置align 和valign（竖直，top middle bottom)来控制文本位置
表单
placeholder=“” //表示文本框中的浅色提示文字
Css
Css放在<style>....</style>标签中（默认放在head中）
格式：
<style>
h1{
color:red;......
}
外部样式表：新建在另一文件中
主文件中：<link rel=”stylesheet” type=”text/css” herf=”文件所在路径”>
样式表优先级：行内>内部>外部（给外部表属性加上！important，最优先 …orange!important）
若外部样式表中出现其他属性，保留下来不被覆盖
选择器
用于对某一类标签做成相同的样式
Class选择器：class名{属性} (//class名字必须.开头)，直接使要改变属性的部分加上class=””(//类似调用函数)
id选择器：直接在div<>中<id= “aaa”>,style中选中#aaa{属性} //一个id只能对应一个div
通配符选择器：
*{
margin:0; //外边距
padding:0; //内边距
}
表示对所有的class进行操作
群组选择器：多个标签共同样式 div，p，h1，…{ 属性 }//选择class时加“.”
id选择器前用“#取名”class选择器前用“.取名”
子代选择器
若只对于此级下紧挨的某一标签使用。
如下：.hide>ul 此属性只适用于1111、2222、3333部分
后代选择器：选择方式为：外层 内层
如下：div与p
伪类选择器 必须按照link,visited,hover,active的顺序
a:link { color: #FF0000 } /* 未访问的链接 */
a:visited { color: #00FF00 } /* 已访问的链接 */
a:hover { color: #FF00FF } /* 鼠标移动到链接上 */
a:active { color: #0000FF } /* 选定的链接点击后 */
选择器的优先级（权重）：id>class>元素选择器（包含选择符是选择符号权重之和）
相同选择符权重依照就近原则
本行独立规定最为优先（或使用！important最强优先级）
文本属性
100 细体 lighter
400 正常 normal
700 加粗 bold
900 更粗 bolder
多行文本不能设置为高度与box的高度一致
文本修饰中不同的修饰均存在时，要写在同一个text-decoration中，否则会被覆盖
在缩进中，克直接用text-indent: 2em;表示缩进两个，用于代替px形式
大小写
首字母大写：text-transform:capitalize
全小写： text-transform:lowercase
全大写： text-uppercase
font:简写，将文本属性写在一个font中，必须按照 style,weight,size/line-height,family的顺序写，且字体和大小不可缺
列表属性
属性同样可以合并简写
list-style: 实心圆… url(相对路径调用图片) 位置（inside/outside）
背景属性
同文本属性中color用法，color,rgb（a，a，a），十六进制（两位表示一个色）
rgba（rgb的进阶，四项）:第四项表示透明度，1为完全不透明，0完全透明
默认平铺效果：背景较大而插入的图片较小，会自动增加图片的数量填充完背景
repeat-x 在x轴平铺，repeat-y 在y轴平铺，no-repeat 不平铺
background-position的几种写法：
1.距离左与上的距离 20px 20px
2.百分比 距离分别表示宽度和高度的百分比 10% 10%
3.水平方向：left center right
竖直方向：top center bottom(两相组合）
# 缩放都是等比缩放
background-size:cover :图片等比例拉伸满背景，多余的部分会溢出
background-size:contain：按照原来比例放大到最大，整张图片都在背景中
background-fixed：固定图片，要保证图片在背景板中，否则不显示
使用background-attchment：…后应对的主题变为整个屏幕
// 如
background-attchment：fixed
background-position：center
此时图片显示在屏幕中心（若无背景板则不被显示）
background的复合写法
background：… … … (顺序随意，中间用空格隔开，没有设置的量默认为没有)
注意：复合设置的空白未设置会将之前设置的background属性覆盖，之前的设置作废，即复合与分开不能同时使用，且位置要写在一起（top center等）
浮动属性
浮动后进入前方的图层
//若同时浮动则会依次后续，一行满后换行,左浮动从左开始，右浮动从右。
浮动的符合规律（见缝插针）
解决浮动带来的覆盖问题
1.清浮动（加到后方限制前方）
//使用清浮动后，此背景执行假设不允许浮动的情况
2.设置固定的高度
//给要被遮挡的背景块加上固定的属性高度，使其保持不动
3.overflow：hiden；
盒子模型
（内边距）padding:
一个值时代表四个方向相同
两个值代表上下吗，左右；
三个值代表上，左右，下；
四个值代表上，右，下，左（顺时针方向）
//背景色会蔓延到内边距
或分别规定：padding-bottom: paddding-top:
//不支持负数-10px
（边框）border：
常见边框类型：
solid(实线)
double（双实线）
dashed（虚线）
dotted（点状线）
//背景色也会蔓延到边框
控制边框同为四个方向：
boder-top,bottom,left,right:宽度（width），样式（style），颜色（color）；
//border也是复合型
外边距margin:与padding使用方式相同（四个方向），但背景色不蔓延且负数可用
*快捷的水平方向居中方式：margin:0 auto;
两盒子为兄弟关系：*两个相连的background块，若外边距不同，垂直排列时外边距为两者中较大值，水平排列外边距为两边距和
父子关系<div中嵌套了div>：子盒子的页边距规定会直接影响父盒子
解决方案：
1.给父盒子加内边距
2.给任意盒子加浮动，不在同一图层
3.给父盒子加上overflow：hiden，子盒子不再影响父盒子
ps：获取图片信息的作用
标尺：crtl+r；crtl+d（取消选区）
图片存为png或jpg
吸管：用于获取颜色信息，取样（右键可直接获取其颜色代码）
溢出属性
scroll：出现滚动条
auto：若溢出则出现滚动条，若未溢出则无
overflow-x 与overflow-y需要连用
空余空间
white-space: nowrap 使文本不再换行，直至出现<br/>并产生滚动条
white-space:pre;保留原来文本中的格式（空格、回车、tab）
产生一行文本并省略溢出部分为三个点：
white-sapce: nowrap;
overflow:hidden;
text-overflow:ellipsis
*使用省略号时此分块容器必须有宽度
<p>标签中可以放文本，不能放块级元素
元素类别
行内元素（display:inline）：能多个占在一行，无法设置高宽，只能设置左右边距，上下不可
块级元素（display:block）：每个块级元素占用一行，可设置高宽
行内块元素（display: inline-block）：既能多个占在一行，也可以设置宽高
*元素可强制转换：改变其display:(可将行内元素改为行内块，用于防止下一行元素与其背景的下半边重合 )
*display:none: 先隐藏内容
拖到项目上显示，鼠标为拖到时隐藏：
<style>
.hide{
display:none;
}
.box:hover ul{
display:block;
}
</style>
<body>
<div class='box'>
菜单
<ul class='hide'>
<li>第一项</div>
<li>第二项</div>
<li>第三项</div>
</div>
二级菜单（嵌套表单）
在li中再嵌套ul
隐藏效果用hover ul{
display：none；}表示
相邻嵌套用子代选择器：.item>ul>li
设计网页的程序
1.先进行大体的分块
2.分别进行样式表的设计
3.可借助有色背景来检验调试，最终将背景属性删去
4.量取前后不能忽略边距
5.写前规定magin：0 padding：0
存在渐变颜色且变化不明显，切出1px，作为图片平铺整个背景
文本前有空隙可将整个div分为padding-left和width
定位
相对定位是以左上角为参照，top表示距离上册，left表示距离左侧
绝对定位同为左上角，有父盒子为父盒子左上角
通常使用：子绝父相
绝对定位与固定定位的区别：
绝对的参照为第一屏；固定的参照为永远此屏
粘性定位：随屏幕向下滚动跟随某侧
同一位置定位两张重合图片，后来者在上
父盒子有定位尽量使用绝对定位
半透明图片属性（透明度）：opacity：0-1
制作三角形图标（原理为其他几个边框设置为透明 transparent为透明）
层级属性：z-index：数值（值越大层级越大，越靠上，数值的正负不影响）
父子关系：子盒子一般在父盒子上，要使子在下则需且仅需给子盒子z-index的数值设置为负数
兄弟关系：就近，若未规定z-index，就近者居上
定位实现竖直水平居中
position:absolute;
top:50%;
left:50%;
margin-left:负一半水平宽度；
margin-top;负一半高度；
定位与浮动的区别
定位为全脱离：文字在下方会被上方定位块遮蔽；
浮动为半脱离：文字可完成外部环绕；
锚点（a链接）
制作网站的导航栏跳转到不同盒子上
<a herf="#锚点名字"></a>
<div id="锚点名字"></div>
精灵图
利用定位（对于左上角）对图片进行部分截取
background-position:负左侧距离 负上方距离
宽高自适应
width：auto;(自适应宽度为整个屏幕，自动调节padding)
height:auto;(自适应高度为块元素总共的高度)
height-min:最小高度（和高度自适应一起使用）
窗口自适应(缩小化后仍可看到整个页面)
html,bodyheight:100%;(不可使用height：100%)
两栏布局（宽度自适应）
calc函数：用于宽度高度中百分比和像素px的加减
一栏正常设置宽度
一栏使用calc
三栏分布
左右两栏先写并浮动，左侧左浮动，右侧右浮动，中间栏写出左右内间距，或是使用calc函数，再自适应宽度
更为复杂的情况继续分块：
表单进阶
1.单选框
1.按钮单选
<div>
<input type="radio" name="一组选项组名相同">选项内容
</div>
#"text"为文本框 "radio"为圆按钮
2.可以点击选项文字
给input添加id
<input type="radio" name="一组选项组名相同" id=“aa“>
<label for="aa">选项文字</label>
3.默认选项
<div>
<input type="radio" name="一组选项组名相同" checked>选项内容
</div>
2.复选框
<div>
<input type="checkbox" name="一组选项组名相同">选项内容
</div>
//<label>、默认选项同单选框
3.上传文件
<input type="file">
4.常用的type
隐藏信息并带给后端
type="hidden" value=”带给后端的信息“
图片按钮代替提交按钮
<form>
<input type="image" scr="submit.jpg">
</form>
5.写在input中的特殊标签
1.禁止点击<input disabled>
2.只可读不可改<input readonly>
6.下拉菜单
<select size="数字" multiple> //此数字表示一次显示几个选项 multiple表示多选
<option value=”“>aaa</option>
<option selected>aaa</option>
</select> //value和option必须连用，selected表示默认选中
7.文本域(多行文本的输入框)
<textarea placeholder=”文本框中提示内容“>value</textarea>
//注意，不可写空格，value写在标签间，用style标签中对textarea规定大小
8.字段集
带标题边框：
<fieldset>
<legend>标题<legend>
<input >
<fieldset>
html5新增
新标签，代替div（更为清晰规范，方便阅读）
//整个内容部分放在section中
音频
//controls表示出现播放控制栏，loop表示循环播放，autoplay为打开页面自动播放，muted表示静音//视频同音频，多一属性poster=“图片地址”
多种type
<input type="color">出现颜色盘
<input type="email">提交结果只能为邮件格式
<input type="url">网址(必须为完整地址)
<input type="tel">手机端中弹出拨号盘
<input type="range" min=“" max="" step=“”>出现可拖动滑块，min和max可设置整个滑块代表的区间，step表示每移动一次的宽度
<input type="number">只能输入数字，可设置最大最小和step<input type="search">多一个一键删除
<input type="date">出现可选择的日历
<input type="month">
<input type="week">
<input type="datetime-local">具体时间(年月日时分)
注:name值必须加上(将数据传给后端)<input type="" name="">
模糊搜索
注:list=“mylist”和id="mylist”必须存在，使文本框与可能搜索结果关联起来
焦点属性：autofocus (无需点击，进入界面即选中，每个见面只能用一个)
必填项属性：required(空内容无法发送到后端)
multiple：email中支持多个地址
设置固定格式：<input pattern = "[可填数字区间][可填字母区间]{可填字母个数}">
层级选择器
1.后代：.box li(box下的所有li包括二级菜单)
2.子代：.box>li(仅与box父子关系的li，爷孙关系无用)
3.临近元素的第一个兄弟：.child+li
4.后边的所有兄弟：.child~li
属性选择器
<style>
div[class]{} //加空格div [class]表示div子代中有class的
</style> //只要是有class属性的div都被选择
//div[class=box1]更细致选择
[class=box1]为完全匹配
[class~=box1]为包含匹配，class=“box1 box2”时仍匹配
模糊匹配：
class^=“b”(开头为b)
class$=“b”(结尾为b)
class*=“b”(包含b)
结构伪类选择器：
li:nth-chid(个数)：同级中第n个
li:nth-child(2n/2n-1):奇数偶数选择even（偶数）odd（奇数）
div p{}(表示div下所有p)
div p:only-child{}（表示只有一个p的div，独生子女）
div:empty{}(表示选中没有内容的div)<div></div>
目标伪类选择器：
div target{}(表示用锚点选中后的属性)
状态伪类选择器
input:focus{}(焦点即点击时的样式)
input:disabled{}(不可用的样式)
input:checked{}（被选中后的样式）
div::selection{}长按选中文字后的样式
文本阴影：
text-shadow: px(水平方向的位移) px(垂直) px(模糊程度)red（颜色），（逗号隔开）px px px color（支持多个阴影）
//模糊程度越高越模糊，位移向右为正，向下为正
盒子阴影：
box-shadow：水平 竖直 模糊程度 模糊大小 颜色 inset（内阴影，默认为外阴影）
圆角边框：
border-radius(圆角):px(表示圆角的长度，越大越圆)
//一个大小为四个边，两个分别代表左上右下、左下右上，三个为左上、左下右上、右下
单独设置方向
某一角的水平和竖直可以不同：border-radius:30px/60px (水平/垂直)
//“水平/垂直”写法只支持border-radius，不支持border-top-left-radius
正方形变为圆：border-radius设置为盒子一半边长
半圆：长方形左下角右下角不动，左上圆角水平为一半，竖直为高度，右上水平一半，竖直高度
扇形：正方形某一角水平竖直均为边长，其余不动
//border-radius: 0 0 0 10px 边长可用百分比
字体引入(引入初始没有的字体)
@font-face{
font-family:<名称>
src:url(font/字体格式文件);
//调用时只需设置style标签中{ font-family：字体名称}
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
