`

CSS样式问题集锦(一)

阅读更多

这里记录一些我在网页制作过程中曾经遇到的问题,把它帐在这里,希望对大家有所帮助。

  1. iframe不同时出现滚动条
    iframe的属性中设置:scrolling:no,在iframe引用的页面中加上以下样式:
    html,body{
      overflow-x:none;
    }  
  2. 滚动条样式
    SCROLLBAR-FACE-COLOR: #2A024D;
     SCROLLBAR-HIGHLIGHT-COLOR: #0042FF;
     SCROLLBAR-SHADOW-COLOR: #000000;
     SCROLLBAR-3DLIGHT-COLOR:#FDFDFD;
     SCROLLBAR-TRACK-COLOR: #000000;
     SCROLLBAR-ARROW-COLOR: #0042FF;
     SCROLLBAR-DARKSHADOW-COLOR: #000000;(颜色当然还是换自己喜欢的了...^^) 

    一、滚动条的轨迹,记作:scrollbar-track。所谓“轨迹”,指滚动条的滑动块运行时所必经的路线。
    二、滚动条的滑动块,即在它上面按下鼠标左键不放可上下或左右移动的滑动块以及滚动条两头的小方块,记作:scrollbar-face。face即滚动条的“脸”,注意它有三张“脸”:滑动条和两头的小方块。
    三、滚动条亮边框部分,记作:scrollbar-highlight。这个亮边框,和表格的亮边框概念是一样的,即左边和上边部分,滚动条的亮边框部分是指滚动条的“脸”(即滑动块和两头小方块)的亮边框。
    四、滚动条亮边框部分的外围还有一个立体修饰部分,记作scrollbar-3dlight。3d即立体的意思,它将包围在滚动条亮边框部分的外边。
    五、滚动条阴影部分,指主滑块和两头方块的阴影,位于左边和左下,记作:scrollbar-shadow。
    六、滚动条阴影部分还有一个强阴影部分,记作scrollbar-darkshadow,它包围在阴影部分的外边。
    七、滚动条两头方志标志箭头,记作:scrollbar-arrow,箭头方向为向下、向上、向左、向右。

  3. 在xhtml中,使用body无法控制滚动条样式问题
    使用body,html{}

  4. input元素与文字的垂直居中问题
    <p>
    <input type="text" name="author" id="author" style="vertical-align:middle" />
    <label for="author"><small>呢称</small></label>
    </p>

    就是给Input加上vertical-align:middle属性。
    将支持valign 特性的对象的内容与对象中部对齐

  5. img元素与文字的垂直居中问题
    img元素有个属性valign是控制其后面的元素与之的对齐方式,使用middle即可

  6.  div内部文字垂直居中
    <div style="height:22px; line-height:22px;">大家好。</div>
    也就是说设置height与line-height一致即可。这种方法对单行文字有效。

分享到:
评论

相关推荐

    css样式集锦

    CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,网页将在您丰富的想象力下千变万化。

    CSS3文字特效艺术文字样式代码.zip

    代码简介:CSS3文字特效艺术文字样式代码是一款超炫的CSS3文字特效集锦特效代码。

    超炫CSS3文字特效集锦

    今天我们要来分享十几种样式各异的CSS3文字特效,有些是3D的文字效果,有些是带有立体的文字阴影,而且色彩也都很不错。这几款CSS3文字特效用了很多text-shadow和filter属性,是这些CSS3属性,让枯燥的黑白文字变得...

    各种浏览器下常见css的兼容问题集锦

    什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个...

    cssSkill:css基础知识加应用技巧

    网页开发常用CSS样式收集 《css世界》学习笔记 正在更新 目标 希望在自我学习的同时也能帮助你的学习和工作 最后 :backhand_index_pointing_right:作为一名程序员,我和我一起同路的人,都在不断积累沉淀自己的知识...

    CSS3,HTML5和jQuery搜索框集锦

    这是一个使用纯CSS构建扩展建议搜索框的简单教程。 CSS的扩大搜索框 扩大搜索框是一个点击或输入东西时会变宽的一个简单搜索框。 使用CSS转换扩大搜索栏 我们将利用CSS转换扩展了的搜索栏。搜索栏最初在视图中...

    CSS Hack技术介绍及常用的Hack技巧集锦

    一、什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS ...

    CSS+DIV和JS特效代码

    网页菜单样式特效代码集锦!希望有需要的朋友会喜欢!

    CSS3文字特效艺术文字样式特效代码

    CSS3文字特效艺术文字样式代码是一款超炫的CSS3文字特效集锦特效代码。

    Birt使用技巧集锦

    网罗了网络上大家使用Birt的一些经验技巧,这个RAR文件主要包括: 1、Birt参数使用方法 2、Birt Java 整合开发详解 3、应付大部分应用的birt的css样式 4、在团队中使用birt 5、Birt经验谈

    CSS网页工程师就业实战集锦(WEB全栈前端开发)

    实战css的实际就业工作所需要的:导航菜单,图片,价格表,进度条,提示框,时钟,三角形,按钮,圆角,渐变,投影,阴影,响应式,表格,表格样式,表单,绘图,字体,字体图标,下拉菜单,加载动画,旋转动画,登陆界面,文字,图标等方面...

    网页设计相关资料

    内涵如下文件 50个实用的jquery案例.doc ...网页制作常见问答集锦.chm 网站设计和制作理论知识.chm 网站重构:应用Web标准进行设计.pdf 烟台开发区网站建设方案设计书.doc 样式表滤镜中文手册.chm 做网站全程指导.pdf

    jQuery带箭头提示框tooltips插件集锦

    摘要: ...可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用。自动尺寸调整为本地化的文本使用。 cluetip clueTip插件可以让你轻松展现出奇特的工具提示,当用户的鼠标

    wordpress模板常用函数集锦

    style.css : CSS(样式表)文件index.php : 主页模板archive.php : Archive/Category模板404.php : Not Found 错误页模板comments.php : 留言/回复模板footer.php : Footer模板header.php : Header模板sidebar.php : ...

    wordpress 代码调用方法与技巧集锦

    复制代码代码如下:style.css 样式表文件index.php 主页文件single.php 日志单页文件page.php 页面文件archvie.php 分类和日期存档页文件searchform.php 搜索表单文件search.php 搜索页面文件comments.php 留言区域...

    LeadingEndStudy:前端自学项

    实用css小集锦210312 Emmet210313 布局练习210314 flex实现⽔平垂直居中的最简单⽅式 flex实现双⻜翼布局 flex实现圣杯布局 瀑布流布局 模板引擎pug基本语法210315 布局练习(响应式布局)210316 如何封装自己的...

    IBM WebSphere Portal门户开发笔记01

    9、HTML A链接CSS样式 251 10、CSS强制换行样式 251 11、CSS强制同行超出部分隐藏样式 253 12、CSS设置行间距样式 253 13、CSS水平下拉菜单被FLASH覆盖如何解决 253 14、禁止选择页面上的文字来拷贝 254 15、JS屏蔽...

    javascrip上百技术总集

    JavaScript极速狂飙:组合拼接字符串的效率 JavaScript极速狂飙:CSS样式表的背景渲染效率 JavaScript面向对象的支持--(1) JavaScript面向对象的支持--(2) JavaScript面向对象的支持--(3) JavaScript...

Global site tag (gtag.js) - Google Analytics