导航:首页 > 万维百科 > 网页设计覆盖优先级

网页设计覆盖优先级

发布时间:2020-09-06 00:34:51

1、网页制作中如何使两个重叠在一起的FLASH显示有优先级

使用 层
层有优先级的概念的,你可以把要优先显示的FLASH显示在前面的层上。
FLASH支持透明显示设置,手动修改下HTML代码即可,或者发布的时候直接发布成背景透明的。

2、怎么解决两个CSS定义冲突?

解决方法有很多,如果可以对html改动的话,就给你需要细化的页面元素加多一个class或者ID就行了,当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下,直接用css的方法来实现你想要的效果——
方法一 细化选择符
假如全局是这样来定义一个元素的样式的:.abc {background:#000},同时这个class为abc的元素是隶属于某个元素的,比如下面这样的html代码结构
<div class="container">
<div class="abc"></div>

</div>
那么在细化css里面,只需要在.abc前面加多一个父元素的选择符就行了:
.container .abc {background:#fff}
这样.container .abc的优先级就大于了.abc,自然细化css里面的background设置也就不会被全局CSS覆盖了~~

方法二 提升样式的优先级
这种方法个人不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important,例如这样:
.abc {background:#fff !improtant;}
这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。

方法三 改变两个样式的加载顺序
这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。

3、跪求高手指点:如何给网站页面信息归类排列优先级?如何架构一个页面、一个网站?

工作中面试过很多理论很棒的同学,感觉这些同学即将走上或刚刚走上工作岗位,作为一名初级设计师*开始还是较难将这些理论与实际工作应用相结合的,致使形成求职与招聘双方都不愿看到的潜在矛盾,使我感悟很深,初期的设计工作中到底需要什么样的机能呢?很愿意做这样的一位中间人,尽量用自己的理解拉进大家与公司之间的距离,使之契合(尽量避免误导同学,欢迎资深的、非资深的同学批评指正)。在后面我会将文献作者示例与自己多年设计经验结合,不断地优化出一些可以精简又实用的文字,用通俗的白话诠释出来,希望与大家共同探讨。

在我踏入设计行业的那个年代,大家对设计师的共同理解是,具备审美、有绘画基础的艺术家,并掌握实用美术产品设计能力,可以说这个职位的要求是非常具有专业性的与行业前期发展特点的。甚至那时在公司可以现学软件。

而现在,随着更多得新名词的引入:UI设计师、交互设计师、用户体验设计等等,我们可以理解到,设计师不只是要具备美学基础了,更需要掌握产品原型设计、设计心理学、信息管理,甚至互动营销方面的知识等,成为更多学科的综合素质人才。很多学校都同时开辟了这样的专业课程,来适应现在的市场需求。素质培养,理论知识的学习是学校的培训基础,而综合能力培养确是一直薄弱的环节,比如:将理论付诸于实践的对具体产品研究中如何掌握视觉设计与产品易用性的平衡;如何掌握市场需要的初级设计师能力等,这些都是值得研究与探讨的。

没错,我们不能要求所有的应聘者都是完全的综合素质优秀的人才,我想做到这一点也确实不容易。但是我们可以分析,现在用人单位招聘设计师一般会找“学产品设计的理工类”和“学工艺美术的文科类”这两类人才较多,为什么?正是因为现有产品结构设计的需要,不再只是一味的追求视觉或实现产品功能、结构等,而是视觉、可用性一个都不能少。而我在面试现有理工类产品设计同学时,发现大部分人员只停留在理论层面,对假想产品分析非常透彻,非常棒,但似乎视觉设计不属于他们的范畴,随然也学了视觉设计相关课程,可就是不能独立完成视觉设计任务。可这也是一种综合能力的表现之一呀。在实际工作中,我们更多应用是团队协作,但是独立对任务的实现也是需要的,或者把自己的设想用相应的软件实现出来与大家分享,都需要掌握一定的视觉设计能力,注意我这里讲的是“掌握”,不是“熟练”,因为学科不同必互有所长,可以理解。但用人单位往往需要提前预算,在有限的招聘名额上找到最合适的、能力最好的人员,应聘者之间也就形成了竞争关系,那些对互联网了解较好,做过一些产品的人员往往会被优先选择,比如:做过企业网站设计,自己的博客设计,Icon设计等,因为这些可以很好的体现他对设计细节的把握,对一个网站架构的理解与实现流程的思考分析。同时也说明他在这些方面有很好的设计能力。说的再细一些:做过网站的设计师,有可能掌握网站的架构设计和页面的结构设计,有可能具备内容信息的整合能力,有可能对设计风格的全局掌控和具体页面、Icon等设计,有可能掌握与客户沟通站在用户角度思考的能力,有可能自己或与工程师协作完成页面的最终制作,甚至自己申请域名与存储空间等,这些能力都是只学课本而不容易得到的。

反之,学工艺设计的同学需要加强理论修为,注意了解多领域知识,形成对设计的理性思考,注意感性与理性之间的应用平衡。同样要多做、多动手设计。

我们面试常问一个问题,你们为什么选择IT行业择业呢?大多回答互联网行业很有挑战性,很有成就感,可以学到更多知识等。但是有没有问自己对互联网产品设计了解多少?是不是应该先具备一些互联网设计专业知识呢?

如何压缩可用的图片?如何设计网页的色彩?如何给页面信息归类排列优先级?如何架构一个页面、一个网站?最后如何熟练使用软件完成设计?… …

还有这些软件你掌握了吗?

photoshop?常用界面视觉设计软件

Indesign?illustrator?Freehand?常用大型流程分析、概念图设计制作

Dreamweaver?页面制作,页面间的交互连接控制

Visio?流程图设计

Word? PowerPoint?文档、演示文档设计

Excel?表格设计(可作进度控制表,比Project简单通用)、

Flash?Firework?动画、广告设计,界面设计,设计人员掌握

还有很多软件可以学习,艺多不压身嘛,但不同行业有自己的软件分类,要懂得轻重取舍,比如:有一个同学来面试网页设计师,他的CORL DRAW、CAD应用熟练,但是PhotoShop、illustrator、Dreamweaver却一般,最终无法胜任工作。

4、如何提升网页设计的视觉层次感

1. 明确元素设计目标
网页上的各项元素通常都有其存在的目的和意义,在构建视觉层次时我们就可以从这方面着手,根据网页元素的不同角色确定优先级,然后进行视觉层次的构建。
2. 考虑用户浏览模式
当用户初次访问网站时,他们一般不会仔细浏览所有内容,而是会进行快速的扫视,确定其中是否有自己感兴趣的内容。
3. 功能性优先
我们常常会有这样一个误区,认为视觉层次是服务于网站设计美感的。其实,视觉层次设计的功能性反而要更重要一些。设计师在构建视觉层次时首先需要确保每个元素发挥了自己的作用,比如提供给用户清晰的导航菜单、可见的购买途径等,然后再考虑元素组合的界面美观与否。
4. 善用留白
留白或者说负空间,不仅仅是指界面元素之中空白的区域,它更是视觉层次构成的核心元素之一。在视觉层次设计中,留白一方面可以用来联系或区分不同内容元素,创造别具一格的布局。另一方面它还可以帮助强调某个关键元素,让它获得用户额外的关注。
5. 使用黄金分割
黄金准则主要是指1:1.618的页面比例,它被公认为是最具美感的,在自然界、日常生活、舞台布局等多个方面都有着不同的应用。

5、网页制作-关于浏览器显示兼容问题

关于css对各浏览器的兼容问题的确令人很头痛~~!!
我自己在平常的设计中,通常使用以下方法,如果有什么错误,请指正,一起进步~
区分三款浏览器简单方法:
#example
{
color:
#333;
}
/*
Moz
FF
*/
*
html
#example
{
color:
#f0f;
}
/*
IE6
*/
*+html
#example
{
color:
#0ff;
}
/*
IE7
*/
效果很好,不过有句要补充一下!
在兼容IE7的*+html的hack一定要在顶部加入DTD声明,否则无效
将下面这句声明加入下面可运行的html的顶部,就可以看到效果拉~当然要保证你的浏览器是IE
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD
HTML
4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
以下是就一些有可能产生的疑问的一些总结,希望对你也有帮助!!
1.为什么在不同的浏览器显示效果不一样?
因为不同浏览器对于css样式表的解析不一样,所以导致样式乃至层布局发生变化。例如,ff中设置padding属性时,div会相应增加height和width,而ie的解析是不会的,再例如ff对盒模型的解析和ie相差两个象素。
2.设计时要做到所有浏览器都兼容吗?
我的答案是即使能做到也没有必要去做,科技是在进步的,用户总是在推陈出新的使用这新版本的浏览器,根据“设计诉说”的站点统计小样本结果显示,6225个访问者中有72.1%使用IE6.0;12.7%使用IE7.0;7.9%在使用FF2.0,剩余的不同版本的浏览器占的百分比都不到1%
所以我认为只要做到IE6
FF2.0
以及新出的IE7.0兼容即可,顶多向下兼容一下IE5.5,完全没有必要为了那些个小数点费劲脑子。如果有必要可以另外设计css文件,然后通过js判断浏览器版本进行选择相应的文件。
3.css样式的优先级是怎么样的?
这个是个好问题,当你弄明白这个,我想应该可以很自如的运用一些兼容样式表的技巧了。在正常的IE中,如果你在css中重复定义一个属性时,浏览器解析的是后面的属性,举个例子
box
{
height:100px;
height:200px;
height:400px;
height:300px;
}
重复定义盒模型的高度属性,越后面优先级越高,所以浏览器解析出的结果就是高度为300px。
4.如何做到让IE6.0与FF兼容?
最常用的一种方法了,也是屡试不爽的——“!important”,这个字段是用来提高优先级的,而IE6.0对于找个字段是无法识别的,于是FF与IE6.0就可以分开解析了。例如,在IE下显示red,FF下显示blue,只需要这么写
color
{
background-color:blue
!important;
background-color:red;
}
“!important”FF可以识别,blue那行提高优先级,因此在FF中blue优先级高于red,显示为蓝色
IE6.0将上面的样式识别成
color
{
background-color:blue;
background-color:red;
}
red优先级高,所以显示为红色。
切记,上下两句的位置一定不能颠倒。问为什么的再好好看看上两个问题,再不明白就面壁去....
5.如何做到让更低版本IE兼容?
其实我认为做到IE6.0与FF2.0已经足够,5.5的兼容用“
/**/”
5.0的兼容用“>”,具体我就不说了,说实在我也不大懂,可以去google一下
6.如何做到IE7.0兼容?
这个问题我也要问大家,大家有答案的告诉我,因为新版的IE7.0对于“!important”具有识别能力,可是对于盒以及padding等的解析却和IE6.0差不多,于是乎,完全兼容了IE6.0和FF2.0的就似乎兼容不了IE7.0,捣腾了好久,还是不知道怎么办。
7.css对浏览器兼容应做到完全一致吗?
个人认为在满足可读性的原则和不影响整体布局的前提下,界面有些许的位置不同是可以允许的,要在不同浏览器下做到一模一样,那真是太费劲了。

6、移动网页设计:为什么手机优先

响应式网站越来越受到大家的欢迎,有利也有弊的因素。它没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。下面就和大家分析如何运用响应式web设计的各项基本原则来实现。为了简单起见,就说说响应式网站的布局。希望对你有所受益。

7、HTML中嵌入CSS的四种方式及优先级,如何选择

1. 行内样式

行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方式,同时也是修改最不方便的样式。

<p style="background-color: #999900">行内元素,控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素,h2 标题元素</h2>
<p style="background-color: #999900">行内元素,控制段落-2</p>
<strong style="font-size:30px;">行内元素,strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素,div 块级元素</div>
<em style="font-size:2em;">行内元素,em 强调</em>2. 内嵌式

内嵌式通过将 CSS 写在网页源文件的头部,即在 <head> 和 <head> 之间,通过使用 HTML 标签中的 <style> 标签将其包围,其特点是该样式只能在此页使用,解决行内样式多次书写的弊端。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
text-align: left;  /*文本左对齐*/
font-size: 18px;  /*字体大小 18 像素*/
line-height: 25px;  /*行高 25 像素*/
text-indent: 2em;  /*首行缩进2个文字大小空间*/
width: 500px;  /*段落宽度 500 像素*/
margin: 0 auto;  /*浏览器下居中*/
margin-bottom: 20px;  /*段落下边距 20 像素*/
}
</style>
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。(百度公司会议室名为青玉案,即是这首词的词牌)。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激,与李博士的“分析搜索技术”非常相似,从而构成百度的搜索概念,也最终成为了百度的图标形象。在这之后,由于在搜索引擎中,大都有动物形象来形象,如 SOHU 的狐,如 GOOGLE 的狗,而百度也便顺理成章称作了熊。百度熊也便成了百度公司的形象物。</p>
<p>在百度那次更换 LOGO 的计划中,百度给出的 3 个新 LOGO 设计方案在网民的投票下,全部被否决,更多的网民将选票投给了原有的熊掌标志。</p>
<p>此次更换 LOGO 的行动共进行了 3 轮投票,直到第 2 轮投票结束,新的笑脸 LOGO 都占据了绝对优势。但到最后一轮投票时,原有的熊掌标志却戏剧性地获得了最多的网民选票,从而把 3 个新 LOGO 方案彻底否决。</p>
</body>
</html>3. 链接式

链接式通过 HTML 的 <link> 标签,将外部样式表文件链接到 HTML 文档中,这也是网络上网站应用最多的方式,同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离,实现结构层和表示层的彻底分离,增强网页结构的扩展性和 CSS 样式的可维护性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>
<h3>楼上的,<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>4. 导入样式<style type="text/css">
@import url=("css路径名");
</style>

这种方法一般不用,可以直接忽略。

一般都是采用链接样式,行内样式和内嵌样式 维护起来相对麻烦,

优先级(从高到底)

行内样式>内嵌样式>链接样式>导入样式。

8、网页制作 javascript中 与 或 非 的优先级是什么 ?

优先级:非>与>或
例如
if( !a&!b || !c&d ){
// (a、b为false) 或者 (c为false,d为true )

};

9、如图所示,怎么在网页制作中设置z-index,让那个3个div处在最下层

一般情况下,Z-index默认值是0;值最大的浮在最上层;

比如说

<html>

<head>

<style type="text/css">

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

</style>

</head>


<body>

<h1>这是一个标题</h1>

<img class="x" src="/i/eg_mouse.jpg" /> 

<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

</body>


</html>


如果想要鼠标在文字上方的,只需要将z-index的值设为1即可。


三个DIV,可以根据你的需要来设置z-index 的值。最下层的值最小,最上层的值最大。

10、网站设计要遵循哪些原则?

1、响应式布局:自适应PC、手机、平板端,网站的可访问性非常重要,越来越多的人使用手机搜索访问网站;
2、安全稳定:网站从本质上来说一款软件,是软件都会需要升级,因此使用专业的建站系统搭建网站除了功能完善,还可以在线升级
3、尊重知识产权:当前很多所谓的定制建站公司为了节省成本或受限于自己的技术水平,模仿抄袭建站行业的标杆企业模板或是模仿同行,从而会给公司埋下严重的侵权法律风险。

与网页设计覆盖优先级相关的知识