‘壹’ 什么是CSS 定位和浮动
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。
另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。
‘贰’ UI设计需要学前端开发吗
UI设计不一定需要精通前端,但是如果UI设计了解前端可以减少和开发人员沟通的技术成本,让团队协作更加高效。那UI设计如何学习前端,需要学习到什么程度呢?
我们分享一个前端教程-Web前端UI设计,这里面详细讲解了UI设计中的Web前端设计规则及工具,可以帮助大家深入理解Web前端UI设计方法。
1、HTLM基础认知DIV框架及CSS样式
首先要了解HTLM基础、CIV框架以及CSS样式, HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。DIV元素是用来为HTLM文档内大块的内容提供结构和背景的元素。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
2、浮动原理、Margin认知
Margin,是CSS的语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。
3、框架应用搭建
框架很多,在这个教程中选择一个主流框架带大家看看前端框架如何搭建。
4、插入图片、文字标签和版头、导航栏
编写的网页中插入图片,可以使浏览网页的用户得到更好的体验效果。在这一部分会讲解插入图片、文字标签以及版头和导航栏如何实现。
5、Banner块插入、内容文字排版、内联元素、A标签和Banner链接定位
Banner是网络广告最早采用的形式,也是目前最常见的形式。它是横跨于网页上的矩形公告牌,当用户点击这些横幅的时候,通常可以链接到广告主的网页。而网页中的文字内容排版也直接影响着网页的美观以及网页的用户体验。
6、锚点标签、超链接标签、固定定位和绝对定位、相对定位
<a> 标签用于定义超链接,用于从一张页面链接到另一张页面。用于设置锚点,用于页面定位。
7、导航二级菜单显示隐藏
很多网页中的二级菜单栏不直接显示,需要鼠标移动到一级菜单或者点击一级菜单才会展开显示二级菜单。
8、input表单
input表单可以获取用户的信息,做出对应的动作,教程中直观的展示input表单的应用方法。
其实以上教程只是web前端很小的一部分,UI设计如果能够了解前端知识,在设计中可以更好的考虑实现问题,也能够更好的和开发人员交流,也能够提高团队协作的效率,加速项目的进度。
‘叁’ C# web页面 浮动控件如何做
放到DIV里面,然后设置DIV的style="position:fixed;top:0px;left:0px"是放在左上
style="position:fixed;bottom:0px;right:0px"是放在右下
‘肆’ Web电子地图的实现原理请教
这种东西有必要自己完全去写吗?如果只是一个地图应用,你可以考虑使用第三方的插件,例如:MapX,它是MapInfo公司的地图插件,功能非常强大。
----------------------------------------------------------------------
自己实现,你自己用用google或者的地图,分析一下它它们ajax请求,就能学到基本流程。同时,我觉得做出来,和做出来一个产品级的东西是2个概念。如果只是玩玩,那可以随便实现一下。
另外你可以去大学文献检索里面,找个叫:一种基于A J A X的电子地图平滑移动算法的实现的文章,它是讲一种平移算法的,还挺简单的,可以学习一下。
‘伍’ 右浮动的原理及规则
Web前端写页面,肯定离不开一种布局,左右布局,左右布局里面,最常用到,也少出问题的就是浮动对齐float/left/right。作为一个资深的老初级前端,别的不敢说,这个浮动我还是摸得很透彻的,前些日子与同事对这个右浮动产生了一些分歧,无法睡服他,也只能写一篇文章来做自我安慰了。
首先来说说浮动的概念以及其产生的效果。
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
可能的值
第一个元素右浮动的情况下,第一个元素会向右对齐,第二元素会继承第一个元素的默认初始点(这个初始点是所有页面的统一规则,默认的左上角为初始位置),如下图显示效果及代码
左浮动不用管,这里主要说一下右浮动,当初与同事产生的分歧也就是在这里:
左右布局两个div,右浮动究竟应该写在第一个div上还是第二个div上?
这里我的答案是左右布局的两个div,右浮动应该写在第一个div上。
为什么是这个规则?
首先确定一点,不管右浮动的div会影响谁,右浮动属性会使本身div在右侧对齐;
其次,默认的初始位置是左上,浮动之后就会变成右上,浮动的这个属性是在“左”“右”的这条水平线上进行位移。
如果左上有第一个div,那么默认的第二个div会在第一个div的下方定位;因为第一个位置已经被第一个div占了,在没有浮动的情况下,他占据的是第一个整个从左到右的水平全部位置,尽管他可能显示效果就几像素,就是这样的机制,别问我为什么,我也不知道;而第二个div只能从第二个位置开始定位,如果这时候给第二个div添加右浮动,产生的结果就是第二个div在第二个水平位置进行右对齐,而不是第一个div的水平位置右对齐,因为第一个位置已经被第一个div给水平占满了。
结果就是下图显示效果,a的水平区域都已经被a占满了,b的右浮动只能从b的初始位置进行右位移。
以上就是我左右布局的两个div,右浮动应该写在第一个div上的原因
当然,你们可以用a的左对齐重置b的初始位置到a的右上角,管不了管不了。只是我会坚持我的右对齐理论,为什么?因为规整,心理舒坦!
‘陆’ web前端什么是浮动定位
float:left | right
‘柒’ UI设计前端主要学些什么
UI设计不一定需要精通前端,但是如果UI设计了解前端可以减少和开发人员沟通的技术成本,让团队协作更加高效。那UI设计如何学习前端,需要学习到什么程度呢?
我们分享一个前端教程-网页链接,这里面详细讲解了UI设计中的Web前端设计规则及工具,可以帮助大家深入理解Web前端UI设计方法。
1、HTLM基础认知DIV框架及CSS样式
首先要了解HTLM基础、CIV框架以及CSS样式, HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。DIV元素是用来为HTLM文档内大块的内容提供结构和背景的元素。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
2、浮动原理、Margin认知
Margin,是CSS的语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。
3、框架应用搭建
框架很多,在这个教程中选择一个主流框架带大家看看前端框架如何搭建。
4、插入图片、文字标签和版头、导航栏
编写的网页中插入图片,可以使浏览网页的用户得到更好的体验效果。在这一部分会讲解插入图片、文字标签以及版头和导航栏如何实现。
5、Banner块插入、内容文字排版、内联元素、A标签和Banner链接定位
Banner是网络广告最早采用的形式,也是目前最常见的形式。它是横跨于网页上的矩形公告牌,当用户点击这些横幅的时候,通常可以链接到广告主的网页。而网页中的文字内容排版也直接影响着网页的美观以及网页的用户体验。
6、锚点标签、超链接标签、固定定位和绝对定位、相对定位
<a> 标签用于定义超链接,用于从一张页面链接到另一张页面。用于设置锚点,用于页面定位。
7、导航二级菜单显示隐藏
很多网页中的二级菜单栏不直接显示,需要鼠标移动到一级菜单或者点击一级菜单才会展开显示二级菜单。
8、input表单
input表单可以获取用户的信息,做出对应的动作,教程中直观的展示input表单的应用方法。
其实以上教程只是web前端很小的一部分,UI设计如果能够了解前端知识,在设计中可以更好的考虑实现问题,也能够更好的和开发人员交流,也能够提高团队协作的效率,加速项目的进度。
‘捌’ web前端中,用于对浮动框架的对齐方式如果不是align属性,那是用哪个
float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
‘玖’ Web前端基础】css中浮动属性有什么
float right none(不浮动) inherit从父元素继承浮动的属性值
‘拾’ web前端如果父级和子级都加了浮动会有什么现象
在WEB前端当中,如果针对元素进行了浮动的设置,则该元素会脱离文档流而存在,会引起父级元素的塌陷,同时会对同一级别的元素造成布局上的影响。
但是,当为父级元素也设置了浮动之后,父级元素也脱离文档流,父级元素和子级元素都属于浮动元素,此时,父级元素高度塌陷的问题反而会被解决(即:另一个元素的父级元素浮动,是针对该子级元素清浮动的一种方法),但是由于父级元素发生浮动,父级元素的兄弟级元素以及父级元素的父级元素,依旧会受到布局的影响。
如果是清除浮动,可以使用多种方法来实现,最为推荐的其实是after伪元素清浮动,会更好用,也是当前WEB前端开发当中最为主流的一种清除浮动方法