PC端页面布局

1. a标签与4个伪类

:link 选择所有未访问的链接(没有被点击过的链接) ; :visited 选择已经被访问过的链接 ; :hover 设置鼠标悬停时的链接样式  ;  :active 选择所有激活的链接(正在被点击的链接);

注意:  :hover 必须在 :link 和 :visited 后定义才能有效!  :active 必须在 :hover 后定义才能有效. 伪类名称不区分大小写 。    

2.  选择器分类

1.通配符选择器 *:选择所有的元素 ; 2.元素选择器:直接使用标签名进行选择元素 ; 3.类选择器:类选择器使用英文字符“.”后加HTML元素的class属性来选择特定元素 ; 类名不能以数字开头 HTML元素也可以引用多个类。用空格隔开 。4. id选择器:id选择器使用英文字符“#”后加HTML元素的id属性来选择特定元素 。5.伪类选择器  :link :设置所有未访问过的链接的样式 :visited :设置所有访问过的链接的样式 :hover :设置鼠标悬停时的样式 :active:  设置正在被点击链接的样式 ; 注意: a:hover 必须在 a:link 和 a:visited 后定义才能有效! a:active 必须在 a:hover 后定义才能有效. 伪类名称不区分大小写。6.群组选择器:为了简化代码,将具有相同样式的选择器组合在一起,用“,”逗号分隔每个选择器。7.组合选择器:为了让获取的元素更加精确,增加查找条件。8.后代选择器:获取某元素下的后代元素,用空格隔开。注意:包括所有的后代div元素。9.子级选择器:获取某元素下的直系子元素,用“>”隔开。注意:只有直系子级的div会被获取。

3.  vertical-align样式

vertical-align 用于设置垂直对齐的样式 ;vertical-align 样式只应用与行内元素和替换元素, 如元素和元素。vertical-align 样式不能继承 。

vertical-align样式常用的值:

1.baseline(默认值):要求一个元素的基线与其父元素的基线对齐 ;2.sub(下标) 和 super(上标):sub值代表会使一个元素变成下标, super值代表会使一个元素变成上标   vertical-align: super;;3.百分数值:相对于该元素的line-height值,正百分数值会使元素升高, 负值则会使其降低.vertical-align: 50%; ;4.长度值:把一个元素升高或降低指定的距离. vertical-align: 20px; 

4.  为什么现在不流行使用table布局?

缺点: 1、占更多的字节。(延迟下载时间,占用服务器更多的流量资源。) 2、阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。) 3、table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) 4、在某些浏览器中table里的文字的拷贝会出现问题。(这会让用户不悦。) 5、会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。) 6、一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间。) 7、对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容。) 8、代码阅读性较差者。(不但无法利用CSS,而且会你不知所云) 9、设计完成后修改较为困难,很难通过CSS让它展现新的面貌。

5.  div+css布局

浮动布局 :浮动布局可以使元素block块状化。可以使块元素同行排列。

定位布局 : 定位布局可以指定元素到指定的位置,常用语,弹框和移动端布局;

弹性布局 :该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。 这种布局方式在条目尺寸未知或动态时也能工作。这种布局方式已经被主流浏览器所支持,可以在 Web 应用开发中使用。

6.  什么是Sticky Footer?

所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。

7.  method: 描述:提交的请求方式                       值:get/post    

get请求: 优点:     速度快     给服务器造成的压力小  ;缺点:     保密性差 提交信息一目了然     对于传输的文件的大小有限制    

post请求: 优点:     保密性好     可以上传比较大的文件; 缺点:     速度慢         对服务器有一定压力

enctype: 描述:规定在发送表单数据之前如何对其进行编码。

值:     1.application/x-www-form-urlencoded 在发送前编码所有字符(默认)     2.multipart/form-data    不对字符编码。     在使用包含文件上传控件的表单时,必须使用该值     3. text/plain         空格转换为 "+" 加号,但不对特殊字符编码。        

表单是网页与用户的交互工具,帮助我们来获得用户的反馈等,用于向服务器传输数据; 注意提交的网址的请求方式 ;上传文件时,需要更改form属性enctype的值为multipart/form-data  ;   表单中的元素,需要设置name属性,保证表单中的数据可以传送的服务器    ;

你可能感兴趣的:(前端)