网页设置——如何设置整个网页的背景色-
DW怎么设置网站的背景图像?
DW怎么设置⽹站的背景图像?
⾃⼰想插⼊⼀张喜欢的图⽚作为这个⽹站的背景,但⼜不知道怎么操作,所以下⾯⼩编就为⼤家介绍DW怎么设置⽹站的背景图像⽅法介绍,来看看吧!
步骤
双击打开我们电脑上已安装好的DW⽹页设计软件
要先新建⼀个空⽩的HTML⽂档
默认进⼊到了代码页⾯
我们再切换到设计页⾯,同时点击右键,最后⼀个就是页⾯属性的设置
进⼊到属性板块,找到背景,在浏览中,找⼀张要作为背景的图⽚
路径选好之后,确定
这张图⽚就充满了整个设计页⾯,这就是我们接下来要设计⽹站的主背景了
以上就是DW怎么设置⽹站的背景图像⽅法介绍,操作很建安的,⼤家学会了吗?希望这篇⽂章能对⼤家有所帮助!。
电脑360浏览器7.1改黑色夜间模式CSS
电脑360浏览器7.1改⿊⾊夜间模式CSS#333333360浏览器7.1极速模式下更改背景⾊360的极速浏览模式(即Chromium内核)与IE内核相⽐速度上确实快了不少。
但是刚上⼿时在操作上可能不太习惯,尤其是⽹页的背景颜⾊的设置选项根本找不到是吧?其实纯⼿动的⽅式完全可以实现哟!当然现在也有第三⽅的扩展,不过这⾥西西还是建议⼤家⼿动来搞定。
操作⽅法如下:1)找到360浏览器安装程序所在的⽬录,然后依次进⼊360se7 > User Data > Default > User StyleSheets⽂件夹,⾥⾯只有⼀个名为Custom.css的⽂件。
2)右键编辑这个CSS⽂件,将后⾯的代码复制进去保存。
代码为:html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abb r,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,s up,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,t head,th,td{background:#333333 !important;color:#A0A0A0 !important;border-colo r:#A0A0A0 !important;}input,button,textarea,select,option,optgroup{background-color:#444444 !important;color:#CCCCCC !important;border-color:#A0A0A0 !important; }a,a *{color:#93BCEC !important;background-color:#333333 !important;}a:active,a:hover,a:acti ve *,a:hover *{color:#1F72D0 !important;background-color:#C0C0C0 !important;},然后重启浏览器即可⽣效。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库:CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1:制作“李彦宏——众里寻他千百 度”网页 5.2 知识库:CSS图像样式
目录
5.3 基础项目2:制作“少年中国说”网页 5.4 知识库:CSS背景样式 5.5 提高项目:制作“低碳生活 从我做起”网页 5.6 拓展项目:制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下:
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色(比如 red)。 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
rgb_number
transparent inherit
name属性或id属性相关联,创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定,所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域,其属性及属性值如下:
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示: 当vertical-align的值为bottom或者sub时,IE与Firefox 的显示结果是不一样的,它们无所谓谁对谁错。在工作中,建 议尽量少地使用浏览器间显示效果不一样的属性值。
如何设计深色系网页
如何设计深色系网页想要借助深沉的色调来创造情绪相对独特的网站〔制定〕,是有一些可供遵循的常见的制定技巧,今天我主要给大家分享如何制定深色系网页,希望对你们有帮助!一、深色不一定是黑色首先,必须清楚这一点,深色不一定是黑色。
在选择配色时,在明亮的颜色中加入黑色或灰色得到的颜色通常会显得更深沉浓重,而这些颜色往往会包涵之前的色调。
在Hooligan网站中,制定师不仅使用了深黑色的背景,还使用了与黑色背景相匹配的暗金色,两种深色之间的明暗对比依旧存在,而白色的标题文本构成了三个层次。
这个层次不仅在视觉上吸引人,而且创造了一种沉稳厚重的氛围。
二、阴影的使用阴影和光线往往伴随着出现,而阴影的舞台效果充满戏剧性和神秘感,这就是为什么制定师会喜爱它的原因,这种制定会让用户产生兴趣和好奇。
在Clear Motion的网站中,车辆四周区域被阴影所包围,文本内容容易引起用户的注意。
与此同时,用户还会好奇这辆车有什么特别的地方,以及它看起来有什么不同。
在黑暗的氛围中,用户的好奇心会不由自主地高涨起来。
三、黑色叠加层黑色半透明层叠加到图像上这也是制造深色系背景常见的技术。
在图像的选择和不同的透明度下,背景图像浮现出来的效果和氛围都有很大的不同。
在透明度较低的状况下,黑色叠加图层会让用户看不清背景中的信息,这使得背景信息在整个制定中参加度较低。
在透明度较高的状况下,更多的背景元素通过叠加浮现,与前景元素产生交叉和互动。
但是一般来说,黑色叠加层同意元素之间的对比,使得行为呼唤元素更容易发挥作用。
在Fhoke网站中,透明的覆盖层让背景中的场景适当地显示出来,但是真正吸引人注意力的,仍然在标题和左侧的行为指引上。
四、字体的选取Punk is Not Dead这个网站给你的感觉是否独一无二的?网站的制定非常清楚,辨识度很高,网站本身还有音频组件,它的制定从视频到音频,整体充满了朋克风格。
深色背景和明亮的字体颜色有助于实现这一点,但字体的选择是最关键的。
[汇总]豆沙色设置方法
设置方法:打开控制面板中的"显示"选择外观(appearance)-高级(advanced),然后在项目(items)那栏选窗口(windows),再点颜色(color)-其它颜色(others),然后把Hue(色调)设为85,Sat(饱和度)设为90,Lum(亮度)设为205。
然后单击添加到自定义颜色(Add to custom colors),按“确定”,一直确定。
把窗口设成绿色之后,再来把IE的网页背景也变成养眼的绿色吧:打开IE,点击工具(TOOLS),点INTERNET选项(INTERNET OPTIONS),点右下角的辅助功能(Assessibility),然后勾选不使用网页中指定的颜色(ignore colors specified on web pages),然后点“确定”退出。
00如何将电脑屏幕颜色改回初始设置00将电脑屏幕改成了保护眼晴颜色,如何改回初始设置呢?我是按下面的方法将电脑屏幕颜色改成了豆沙绿,这样虽然是眼睛没有那么累,但是,浏览网页的时候,有一些网页控件看不见了,所以想改回来,请高手帮助.那么怎么才能改变底版的颜色,变白色为淡绿色呢。
在这儿我将每一步的具体的操作方法做了个截图,希望可以帮助大家哟。
第一步:点击开始。
再找控制面板,再点显示对话框,第二步:选择“外观”然后点击“高级”第三步:在项目中,选上“窗口”,再点“颜色”--其它颜色,第四步:然后把Hue(色调)设为85,Sat(饱和度)设为90,Lum(亮度)设为205。
然后单击“添加到自定义颜色”,按“确定”。
一直确定。
这样就可以把窗口设成绿色了。
来看一下效果吧00桌面--属性--外观,色彩方案换一个,再换回来,绿色就没了00@:桌面—>右键—>属性—>外观—>高级—>项目选择(窗口)、颜色1(L)选择(其它)将色调改为:85。
饱和度:123。
亮度:205—>添加到自定义颜色—> 自定义颜色选定点确定—>确定—>再次确定网页背景颜色也改成豆沙绿的方法:@:点击浏览器工具一栏—>Internet选项—>右下角的辅助功能—>格式—>选择不使用网页中的指定颜色(C)—>确定—>再次确定0000。
第8课《网页的数据呈现》教学设计 2024—2025学年浙教版(2023)初中信息技术八年级上册
五、“评”(8 分钟)
1.教师对勇于展示的同学进行鼓励,并鼓励其他学生质疑、挑战、纠错、补充。 2.师生共同总结本节课收获: ①认识了 CSS(层叠样式表) ②CSS 语法结构: 选择符{样式属性 1:属性值 1;样式属性 2:属性值 2;样式属性……}选择符:用 来选择要定义样式的对象。 ③CSS 的类型:内部样式表、外部样式表、内联样式表。 优先级:内联样式>内部样式>外部样式 ④分离式的 CSS 优点:提高网页加载速度易于维护和更新提高开发效率,利用 CSS 可以实现多样的页面样式效果
六、“练”(5 分钟)
1. 用 CSS 样式表美化网页。 2. 尝试使用图像标签,在网页里加入一张平铺模式的背景图。
教学板书
一、网页数据呈现的方式 二、CSS 三、样式表的基本结构
教学反思
本节课内容比较抽象枯燥,但也是本单元核心知识点,注意讲解与布置任务时要分解成 小任务,确保学生都能学会、完成,逐步攻破难点。
引出本节课的内容:使用 CSS 设置样式。
1 备注
二、“思”(12 分钟)
什么是 CSS 呢?阅读 p39 页内容。 (一)CSS 的样式
字号、字体、颜色、位 置以及图片的大小......
(二)CSS 的优点
1、样式与内容分离
2、网页加载速度快
3、一致的样式设计
4、容易维护和更新
5、响应式设计
6、可扩展性
三、“议”(7 分钟)
任务三:CSS 是专门用来设置样式的,使用它可以将内容结构和样式设置分离,那 么如果有多个页面需要应用同一种样式,该如何呢?以小组为单位,观察教师展示网 页文件范例的代码,里面没有对元素有样式设置的代码,却有页面样式效果,讨论这 是为什么?
四、“展”(7 分钟)
网页布局色彩搭配技巧
⽹页布局⾊彩搭配技巧⽹页设计的基础--⽹页布局正如您现在看到的,⽹页的布局变得越来越重要。
访问者不愿意再看到只注重内容的站点。
虽然内容很重要,但只有当⽹页布局和⽹页内容成功结合时,这种⽹页或者站点才是招⼈喜欢的。
缺任何⼀⾯你都⽆法留住太过“挑剔”的访问者。
⽹页布局的基本理念最开始⽹页呈现在你⾯前的时侯,它就好像⼀张⽩纸,它需要挥洒你的设计才华。
假如你知道什么是⼀种约定俗成的标准或者说⼤多数访问者的浏览习惯,那么你可以在此基础上加上⾃⼰的东西。
总结出来就是先锋在线⽹站制作⼈员对⽹页布局的设计理念:1.页⾯尺⼨:⼀般分辨率在800×600的情况下,页⾯显⽰尺⼨为780×428象素;分辨率在640×480的情况下页⾯显⽰尺⼨为620×311象素;分辨率在1024×768的情况下,页⾯显⽰尺⼨为1007×600。
分辨率越⾼页⾯尺⼨越⼤。
我们经常看到有的⽹页上的说明:本⽹页适合在1024×768分辨率下浏览...不要搞成这样!永远不要让浏览者调整分辨率去适应你的⽹页尺⼨,⽽是应该⾃动适应浏览者的分辨率尺⼨,这就是使⽤者(浏览者)优先原则。
浏览器的⼯具栏也是影响页⾯尺⼨的原因。
⼀般⽬前的浏览器的⼯具栏都可以取消或者增加,那么当你显⽰全部的⼯具栏时,和关闭全部⼯具栏时,页⾯的尺⼨是不⼀样的。
在⽹页设计过程中,向下拖动页⾯⼤概是惟⼀给⽹页增加更多内容(尺⼨)的⽅法。
但我想提醒⼤家除⾮你能肯定站点的内容能吸引⼤家拖动,否则不要让访问者拖动页⾯超过三屏。
虽然现在很多⿏标都有滚轮设计,但是⽹页的设计布局是越少⽤到⿏标越好。
2.整体形象:是图形与⽂本的结合应该是层叠有序的整体。
虽然,显⽰器和浏览器都是矩形,但对于页⾯的造型,你可以充分运⽤⾃然界中的其它形状以及它们的组合:矩形、圆形、三⾓形、菱形等轮廓。
对于不同的形状,它们所代表的意义是不同的。
⽐如矩形代表着正式,规则,你注意到很多ICP和政府⽹页都是以矩形为整体造型;圆形轮廓代表柔和,团结,温暖,安全等,许多时尚站点喜欢以圆形为页⾯整体造型轮廓;三⾓形、梯形代表着⼒量,权威,牢固,侵略等,许多⼤型的商业站点为显⽰它的权威性常以三⾓形为页⾯整体造型;菱形代表着平衡,协调,公平,⼀些交友站点常运⽤菱形作为页⾯整体造型。
在ASP网页中如何设置背景图片
在ASP⽹页中如何设置背景图⽚序号中⽂说明标记语法备注1 背景颜⾊ {background-color:数值}2 背景图⽚ {background-image: url(URL)|none}3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位 {background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜⾊|背景图象|背景重复|背景附件|背景位置}1.背景颜⾊:background-color语法:{background-color:数值}说明:参数取值和颜⾊属性⼀样注意:在HTML当中,要为某个对象加上背景⾊只有⼀种办法,那就是先做⼀个表格,在表格中设置完背景⾊,再把对象放进单元格。
这样做⽐较⿇烦,不但代码较多,还要为表格的⼤⼩和定位伤些脑筋。
现在⽤CSS就可以轻松地直接搞定了,⽽且对象的范围很⼴,可以是⼀段⽂字,也可以只是⼀个单词或⼀个字母。
例⼦:给部分⽂字加背景颜⾊给部分⽂字加背景颜⾊表格背影颜⾊:style="background-color:red"2.背景图⽚:background-image语法:{background-image: url(URL)|none}说明: URL就是背景图⽚的存放路径。
如果⽤“none”来代替背景图⽚的存放路径,将什么也不显⽰。
例⼦:给部分⽂字加背景图⽚ .imgbgstyle { background-image: url(logo.gif)}3.背景重复:background-repeat语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}作⽤:背景图⽚重复控制的是背景图⽚平铺与否,也就是说,结合背景定位的控制可以在⽹页上的某处单独显⽰⼀幅背景图⽚说明:参数取值范围:·inherit 继承·no-repeat 不重复平铺背景图⽚·repeat·repeat-x 使图⽚只在⽔平⽅向上平铺·repeat-y 使图⽚只在垂直⽅向上平铺注意:如果不指定背景图⽚重复属性,浏览器默认的是背景图⽚向⽔平、垂直两个⽅向上平铺。
网页html基础教程
了解html的发展信息
要掌握html,就必须了解它的发展。大家可以通 过下面俩个链接了解html文档草案的现状、未来 html的发展已经url的工作原理的升级文档等。
1./:提供一个链接指向描述已被 确认为internet标准及现在被所有浏览器支持的 html特性的文档。
因此,所有文件的最基本结构如下:
<html>d>
<body>
……
</body>
</html>
Html
head
body
从上图中,我们可以容易的了解到整个html文件中 所有的数据均被建立为一个一个组件,并组织为一 个层次化的结构。
当利用html标记来定义组件时,定义标记不可交错, 否则将造成错误。下面的语法中,<head>标记与 <body>标记彼此交错,这样是不对的,如果标记 交错时,我们无法区别两个组件的范围
网页html基础教程
一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释
一.www基础
www(world wide web,简称互联网),一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面,而信 息子页则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界, 但也有可能不太清楚如何向全世界发布你自己 的信息——有关你自己的信息,如你个人的兴 趣、你的工作等。
面移至另一页面,也可以利用该页的地址或 url(uniform resource locator)统一资源定位 器来直接移至该指定页。
Web浏览器的选用
怎么给浏览器换皮肤
怎么给浏览器换皮肤
当你上网打开网页浏览器时,网页的皮肤颜色你可能会不满意,那么你可以根据自己的喜好更换浏览器的皮肤颜色,这儿和大家分享一种简单的方法。
给浏览器换皮肤的方法
打开网页浏览器,在浏览器的右上角有一个图标,左键单击打开。
打开后出现下面的网页,即皮肤中心。
你可以根据自己的喜好选择简洁、炫酷、清新、经典、皮肤大赛等。
单击打开后可以选择。
这儿我选择清新为例说一下。
选定后向下翻页,选择你喜欢的图案。
找到你喜欢的图案后,单击就可以自动为你的网页更换皮肤了。
几秒忠后,就可以看到效果了。
如何在Mac上更改Safari背景?
如何在Mac上更改Safari背景?
macOS Big Sur 为 Safari 带来了许多令⼈兴奋的⾃定义选项。
可以根据⾃⼰的⼯作风格和喜好更改其外观,从更改起始页背景到调整收藏夹、Siri 建议、阅读列表、iCloud 标签等。
就像壁纸⼀样,出⾊的背景图像可以帮助您进⼊最佳状态. 苹果提供了⼀些适合的 Safari 背景,或者您可以选择⾃定义背景。
如何在 Mac 上的 Safari 中设置⾃定义背景?
1.在 Mac 上打开Safari,然后单击主屏幕右下⾓的三个切换图标。
2.将弹出⼀个图标菜单,滚动浏览默认背景选项,或单击“+”添加⾃定义背景选项。
3.浏览⽂件夹并选择要在 Safari 中设置为背景的图像。
4.单击图像以查看其作为背景的半透明预览。
5.做出选择后,单击“选择”进⾏确认。
为 Safari 起始页设置⾃定义墙纸是多么容易。
虽然这似乎是⼀个很⼩的变化,但它确实为您的 Safari 增添了特⾊。
注意:当您希望更改⾃定义 Safari 背景时,您必须先删除现有的背景。
打开 Safari 开始页⾯→三切换图标→单击“x”,然后点击“+”添加⼀个新的。
如果您更喜欢没有背景的 Safari 起始页的简单 jane 呢?轻松禁⽤设置,打开 Safari →三切换图标→取消选中背景图像选项。
注销
Safari 进⾏了⼀些改头换⾯,可定制的起始页⾯是开始。
苹果的默认浏览器现在包含了令⼈难以置信的功能,例如选项卡中的 Favicon、⽹站预览、内置翻译⼯具、更好的密码监控,甚⾄还有隐私报告⼯具。
浅谈网页颜色的搭配技巧(前端必看)
浅谈⽹页颜⾊的搭配技巧(前端必看)⼀般来说,⽹页的背景⾊应该柔和⼀些、素⼀些、淡⼀些,再配上深⾊的⽂字,使⼈看起来⾃然、舒畅对于做⽹页的初学者可能更习惯于使⽤⼀些漂亮的图⽚作为⾃⼰⽹页的背景,但是,浏览⼀下⼤型的商业⽹站,你会发现他们更多运⽤的是⽩⾊、蓝⾊、黄⾊等,使得⽹页显得典雅,⼤⽅和温馨。
更重要的是,这样可以⼤⼤加快浏览者打开⽹页的速度。
⼀般来说,⽹页的背景⾊应该柔和⼀些、素⼀些、淡⼀些,再配上深⾊的⽂字,使⼈看起来⾃然、舒畅。
⽽为了追求醒⽬的视觉效果,可以为标题使⽤较深的颜⾊。
下⾯是我做⽹页和浏览别⼈的⽹页时,对⽹页背景⾊和⽂字⾊彩搭配积累的经验,这些颜⾊可以做正⽂的底⾊,也可以做标题的底⾊,再搭配不同的字体,⼀定会有不错的效果,希望对⼤家在制作⽹页时有⽤。
BgcolorΚ″#F1FAFA″———做正⽂的背景⾊好,淡雅BgcolorΚ″#E8FFE8″———做标题的背景⾊较好BgcolorΚ″#E8E8FF″———做正⽂的背景⾊较好,⽂字颜⾊配⿊⾊BgcolorΚ″#8080C0″———上配黄⾊⽩⾊⽂字较好BgcolorΚ″#E8D098″———上配浅蓝⾊或蓝⾊⽂字较好BgcolorΚ″#EFEFDA″———上配浅蓝⾊或红⾊⽂字较好BgcolorΚ″#F2F1D7″———配⿊⾊⽂字素雅,如果是红⾊则显得醒⽬BgcolorΚ″#336699″———配⽩⾊⽂字好看些BgcolorΚ″#6699CC″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#66CCCC″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#B45B3E″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#479AC7″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#00B271″———配⽩⾊⽂字好看些,可以做标题BgcolorΚ″#FBFBEA″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#D5F3F4″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#D7FFF0″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#F0DAD2″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂BgcolorΚ″#DDF3FF″———配⿊⾊⽂字⽐较好看,⼀般作为正⽂浅绿⾊底配⿊⾊⽂字,或⽩⾊底配蓝⾊⽂字都很醒⽬,但前者突出背景,后者突出⽂字。
网站规划与网页设计
段落标记放在一个段落的头尾,用于定义一个段落。 <p>...</p>标记不但能使后面的文字换到下一行,还可 以使两段之间多一空行,相当于两个<br /><br />标记。 段落标记的格式为: <p align="left|center|right|justify"> 文字 </p> 其中属性align用来设置段落文字在网页上的对齐方式: left(左对齐)、center(居中) 、 right(右对齐)和 justify(两端对齐)。缺省时默认为left。
– 4.所有的属性必须用引号""括起来 – <height=80>必须修改为: – <height="80"> – <input name=guitar type=checkbox value=guitar> × – <input name="guitar" type="checkbox" value="guitar" /> √
– 7.不要在注释内容中使用“--” – “--”只能发生在注释的开头和结束,也就是说, 在内容中它们不再有效。 • <!--这里是注释-----------这里是注释--> × • 用等号或者空格替换内部的虚线。 • <!--这里是注释============这里是注释-> √
段落标记
1 段落标记<p>...</p>
段落标记
2 换行标记<br> /<nobr>
强制换行标记<br> 格式: 文字<br /> 由于xhtml中Enterprise键产生的换行符会被忽略掉, 要换行就必须使用这个标记。 不换行标记<nobr> 格式:<nobr>文字</nobr> 对于输入公式、数字等信息时,会用到。
网页配色方案——黄色系
网页配色方案——黄色系yesky 2007-06-09色是阳光的色彩,具有活泼与轻快的特点,给人十分年轻的感觉。
象征光明、希望、高贵、愉快。
浅黄色表示柔弱,灰黄色表示病态。
它的亮度最高,和其他颜色配合很活泼,有温暧感,具有快乐、希望、智慧和轻快的个性,有希望与功名等象征意义。
黄色也代表着土地、象征着权力,并且还具有神秘的宗教色彩。
黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。
浅黄色系明朗、愉快、希望、发展,它的雅致,清爽属性,较适合用于女性及化妆品类网站。
中黄色有崇高,尊贵,辉煌、注意、扩张的心理感受。
深黄色给人高贵、温和、内敛、稳重的心理感受。
下面我们根据黄色系不同属性邻近色、同类色的高纯度低纯度色彩搭配做不同的举例分析。
黄色是所有彩色中明度最高的颜色。
上图看到HSB模式的H数值是60度,正是正黄色,但RGB数值中加入了B蓝色数值为51,因此降低了HSB的饱和度S为80%,但是大面积的黄色仍使得该页面色彩明亮显眼。
辅助色是纯黑色,非色彩明度最低的颜色。
大面积显眼的正黄色有黑色的线条压制,黄色顿时显得沉稳,页面增添内容感。
白色虽然是点睛色,但由于非色彩的白色与黄色的明度最高,因此这里似乎没有起到"点睛"的作用。
当鲜度、明度高的背景色与前景辅助色暗度低的黑色在明度形成较强烈的对比时,艳度降低,较能协调视觉。
整个页面配色单纯,却也不简单,形成另一种设计风格。
www.paralotna.pl该页面的配色很单纯,是同类色的黄色不同明度颜色,页面看起来干净、单纯。
点睛色白色淡黄色在深色黄色背景下比较显眼,且在最中间位置,是整个页面中的高调部分。
这三种黄色,明度都很高,只有背景辅助色明度稍低,点睛黄色H色相是三种颜色中黄色倾向最高的为57度,而60度是正黄色,因此明度也是最高的,充分的发挥其点睛色的作用。
背景色和前景色只在色相上明度上有非常微妙的变化,却也很巧妙,形成了变化较明显的空间层次感,削弱了同类色易产生的单调感。
网站调整为黑白的方法
⽹站调整为⿊⽩的⽅法当举⾏哀悼活动时,有时会要求将⽹站调整为⿊⽩⾊,确保展现效果肃穆凝重通过以下⽅法可快速将⽹站调整为⿊⽩⾸先,先下载grayscale.js⽂件,需要使⽤这个插件实现效果修改⾸页在html⽂件中加⼊以下代码(⾃⾏更换grayscale.js的路径)<!-- 特殊⽇⼦IE10及其以上浏览器全站灰⾊ --><script type="text/javascript" src="js/grayscale.js"></script><style>html, html *{filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}</style><script type="text/javascript">var navStr = erAgent.toLowerCase();if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11grayscale(document.body);grayscale(document.getElementsByTagName("img"));}</script>修改全站要将全站都变成⿊⽩的话,需要在全站公⽤的js⽂件中加⼊代码,如果没有公⽤js的话,就只能在每个页⾯加个js⽂件了公⽤js⽂件内容(⾃⾏更换grayscale.js的路径)://特殊⽇⼦IE10及其以上浏览器全站灰⾊document.write('<script type="text/javascript" src="js/grayscale.js" ></script>');document.write('<style>');document.write('html, html *{');document.write(' filter: gray !important;');document.write(' filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);');document.write(' filter: grayscale(100%);');document.write(' -webkit-filter: grayscale(100%);');document.write(' -moz-filter: grayscale(100%);');document.write(' -ms-filter: grayscale(100%);');document.write(' -o-filter: grayscale(100%); ');document.write('}');document.write('</style>');document.write('<script type="text/javascript">');document.write(' var navStr = erAgent.toLowerCase();');document.write(' if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){');document.write(' grayscale(document.body);');document.write(' grayscale(document.getElementsByTagName("img"));');document.write(' }');document.write('</script>');点击可切换⿊⽩如果需要点击⼀下变成⿊⽩,再点击⼀下变回原样,需要在html⽂件中加⼊以下代码(⾃⾏更换grayscale.js的路径)<style>/* 特殊⽇⼦全站灰⾊ */.site-gray, .site-gray *{filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}</style><a href="javascript:;" class="site-gray" data-gray="0">⽹站变灰</a><!-- 特殊⽇⼦IE10及其以上浏览器全站灰⾊ --><script src="js/grayscale.js"></script><script>var navStr = erAgent.toLowerCase();$(".site-gray").click(function(){var gray = $(this).attr("data-gray");if( gray == 0 ){if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11 grayscale(document.body);grayscale(document.getElementsByTagName("img"));}$("html").addClass("site-gray");$(this).attr("data-gray", 1);}else{if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11 grayscale.reset(document.body);grayscale.reset(document.getElementsByTagName("img"));}$("html").removeClass("site-gray");$(this).attr("data-gray", 0);}});</script>。