GNOME3任务栏、标题栏过宽问题

Debian 7.0 默认安装的是GNOME 3.4.2桌面系统,缺省状态下,用户会发现桌面系统的桌面任务栏及标题栏宽度太大,影响美观,同时也浪费屏幕显示的有效宽度,针对这个问题我们可以通过以下方式进行优化. 任务栏优化: 使用vi /usr/share/gnome-shell/theme/gnome-shell.css,直接找到如下行: #panel { background-color: black; font-weight: bold; height: 1.28em; } 将原来的heig…

Ecshop导航栏标题栏的伪静态设置

当Ecshop的伪静设置成功之后,左侧的分类标签,包括具体的产品页面都可以顺利的打开伪静态页面,但是点击导航栏,或者标题栏的时候,却还是之前的数据库标签页的方式,这是怎么一回事呢? 这是由于,Ecshop的默认模板的导航栏,是采用直接指定页面的方式来制定的,所以当伪静态设置成功了之后,需到后台手动修改导航栏的链接页面,就可以了,具体操作顺序如下: 找到“系统设置”的“自定义导航栏”栏目,点击进入: 找到自己需要修改的导航栏目,点“编辑”: 如下,手动修改链接地址,或者修改系统栏目到指定的相关栏目…

Ionic2 渐变隐藏导航栏|标题栏

废话少说直接上代码.... //导入需要用到的命名空间 ViewChild,Content import { Component, ViewChild } from '@angular/core'; import { NavController, ModalController, ToastController, Content } from 'ionic-angular'; @Component({ selector: 'home', templateUrl: 'home.html', })…

Win7任务栏图标大小调整为等宽

打开注册表,找到HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics,新建DWORD,输入MinWidth,大图标设为56,小图标设定为36: 参考:http://www.wikihow.com/Customize-the-Size-of-the-Windows-7-Taskbar-Icons 编辑文件: 任务栏图标等宽.reg Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\C…

CSS布局 - 三栏布局

CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局采用浮动实现的三栏布局有以下特点及注意事项: · 注意DOM结构的排列顺序. 因为左右两侧的DOM都是浮动布局,而中间的DOM则是普通的文档流,所以为了规避浏览器正常的页面渲染,即先解析左侧DOM(浮动),再解析中间的DOM(普通文档流,宽度100%)而导致解析最后的右侧DOM(浮动)时因为宽度的问题,而掉到下一行的情况. · 因为DOM结构顺序实际内…

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务.当然内容与用户资源也是不能忽视的.尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成. 一.CSS3概要 CSS(Cascading Style Sheet)是层叠样式表的…

视区相关单位vw, vh..简介以及可实际应用场景

这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2636 一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和…

css em单位

本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器字体大小而进行整体缩放. 用户可以根据他们的需要而调整浏览器字体大小,例如有的人视力不好,可能需要改变浏览器的默认字体大小. 这时,我们希望页面元素的宽度.外边距.内边距等尺寸元素也会根据字体大小而进行成比例的缩放,这时我们需要使用em单位而不是px单位,因为px单位是固定的,一旦赋值元素的尺寸就不…

[总结]WEB前端开发常用的CSS/CSS3知识点

css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工…

视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰你”是不一样的.正好,机缘巧合,最近又与这两个单位想见.大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局.想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~). 然而…… //zxx: 先卖个关子,一点一点唠叨来~~ vw, vh这…

HTML&CSS面试高频考点(二)

HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + border + padding) + margin,即真实大小. *参考标准模式与兼容模式的区别,兼容模式下为怪异盒模型. *注意box-sizing可以改变盒模型(box-sizing:border-box即为怪异盒模型). 7. 水平垂直居中的方法 (1)定宽居中 1. absolute + 负margin…

css实现水平-垂直居中的方法

* 定宽居中: 1.absolute+负margin 2.absolute+margin:auto 3.absolute--calc 4.min-height:100vh + flex + margin:auto * 不定宽居中 1.absolute + transform 2.lineheight 3.writing-mode 4.caa-table 5.flex 6.grid 一.定宽居中 1.absolute+负margin position: absolute; top: 50%; le…

纯JS实现KeyboardNav(学习笔记)二

纯JS实现KeyboardNav(学习笔记)二这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写这篇主要是添加css,优化js编写逻辑和代码排版 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态 CSS样式…

【读书笔记《Bootstrap 实战》】4.企业网站

上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos (http://www.zappos.com/) □ Amazon (https://www.amazon.com/) 尽管这些网站网站各有特色,但共同的一点就是它们都很复杂. 如果按照区域划分,可以将这些网站的主页分成三部分. □ 页头区:这一部分包含Logo.带下拉菜单的主导航.二级和实用链接导…

NeHe OpenGL教程第三十五课：播放AVI

转自[翻译]NeHe OpenGL 教程前言声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线教程的编写,以及yarn的翻译整理表示感谢. NeHe OpenGL第三十五课:播放AVI 在OpenGL中播放AVI: 在OpenGL中如何播放AVI呢?利用Windows的API把每一帧作为纹理绑定到OpenGL中,虽然很慢,但它的效果不错.你可以试试. 首先我得说我非常喜欢这一章节.Jon…

web前端开发面试题（未完待续）

一.HTML与XHTML的不同:1)XHTML元素必须被正确地嵌套 2)元素必须被关闭如:<h1>--</h1>关闭 3)标签名必须用小写字母 4)XHTML文档必须有根元素二.盒子模型:CSS框模型(BOX Model)规定了元素框处理元素内容.内边距.边框.和外边距的方式,俗称盒子模型. 三.多列布局分为:圣杯布局和双飞翼布局双飞翼布局(常用)和圣杯布局的相同点和不同点: 相同点:1)中间栏放最前面(最先加载) 2)每一部分都要浮动(float) 3)左边:margi…

width:100vh有感而发

在看一个网页的代码是看到 width:100vh 纳尼...这这我怎么没有见过,这是个什么属性,随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的.... 感叹入行已整整两年却... 先介绍一下vh:相对于视窗的高度,那么vw:则是相对于视窗的宽度 "视区"所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小. 详细vh的用法,大家可以参…

width:100vh与min-height:calc(100vh + 51px)

vh:相对于视窗的高度,那么vw:则是相对于视窗的高度. “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小. 详细vh的用法,大家可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ calc是英文单词calculate(计算)的缩写,是CSS3的一个…

sencha touch NavigationView 源码详解（注释）

Ext.define('Ext.navigation.View', { extend: 'Ext.Container', alternateClassName: 'Ext.NavigationView', xtype: 'navigationview', requires: ['Ext.navigation.Bar'], config: { /** * @cfg * @inheritdoc */ baseCls: Ext.baseCSSPrefix + 'navigationview', /**…

关于margin:-10000px;padding:10000px;的理解

原文链接: 内外补丁负值法是指通过内外补丁的设置来解决一些我们通常方法不能实现的效果.例如:可以通过改变盒模型的样式来使几列div由内容撑开高度但几列div与最高的一栏等高的问题.但是为什么会出现这样的情况呢?先来充分理解一下margin和padding:说的直白一些margin就是模块与模块之间的间隙,而padding是边框与内容之间的间隙.当设置padding-bottom:10000px;margin-bottom:-10000px;是先通过padding-bootom增大盒模型的高度,再…

CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去Can I use去查. 一 px 相对长度单位,浏览器的度量单位,相对于物理像素(显示器屏幕分辨率),1px在高清屏幕下可能占用2个物理像素.甚至3个物理像素,有关物理像素和px之间转换比,可以查看这篇文章. 二 em 相对于当前DOM元素的font-size. 如果设置当前元素的font-siz…

前端编程提高之旅（五）----写给大家看的css书

自实习也有几个月的时间了,以爱奇艺实习为敲门砖.进入了眼下这家公司.假设说当初能进爱奇艺是暂时袭击DIV+CSS的话,眼下在这家公司体验到.不论什么技术都必须悉知原理,这样才干做到庖丁解牛.做一个内行的人.css属性和使用方法都摆在那里,但假设用得好.除了躬身实践.提高理论积淀就特别必要了,这本<写给大家看的css书>高速扫过一遍之后,之前工作遇到过不清楚的问题,一扫而空,所以有必要总结下. css层叠的理解 css是层叠样式表的英文缩写.层叠意味着样式从文档结构中一个层次传…

html+css布局整理笔记

基本概念布局模型流动模型(Flow) 浮动模型(Float) 层模型(Layer) 流动模型默认的网页布局模式,流动布局模型有两个比较典型的特征: 第一,块级元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,且默认状态下,会计元素的宽度都为包含元素宽度的100%,即块级元素都会以行的形式占据位置. 第二,内联元素都会在所处的包含元素内从左到右水平分布,自然宽度取决于内容宽度(不考虑换行的情况下). 浮动模型任何元素在默认状态下都是不能浮动的,可以通过css定义其float属性让元素浮…

css3自适应布局单位vw,vh详解

视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口). 视口单位中的“视口”,桌面端指的是浏览器的可视区域:移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeig…

移动端的vh 和 vw简介和使用场景

vw 相对于视窗的宽度:视窗宽度是100vw:vh则类似,是相对于视窗的高度,视窗高度是100vh. 这里的视窗指的又是啥? 是浏览器内部宽度大小(window.innerWidth)? 是整个浏览器的宽度大小(window.outerWidth)? 还是显示器的宽度大小(screen.width)? “视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小.…

javascript30--day01--Drum kit

相关视频链接:https://www.bilibili.com/video/av8481988/?p=3 Drum kit 做题思路(1)监听键盘事件 addEventListener(‘事件名’,执行函数); window.addEventListener(“keydown”,playSound); (2)当A-L键按下的时候,播放音效 audio.play( ); (3)播放动画 Element.classList.add(“className”); 动画结束之后,移除动画 Element.…