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.清浮动(加到后方限制前方)![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5ecde451e38b340b294d138395869da7.png)
//使用清浮动后,此背景执行假设不允许浮动的情况
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:字体名称}