css新增UI样式

1.圆角 border-radius <style> .box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px; /*椭圆 x/y: x轴半径/y轴半径*/} </style> </head> <body> <div class="box"></div> </body> <style> .box…

一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body> <h1>中山大学</h1> </body> 效果 rgba透明度(选中的就透明)一般应用在背景透明,文字不透明.是rgb的一个拓展,a的值在(0,1)之间,就是针对前面的颜色的一个透明度/不透明度的描述. h1{ margin: 100px auto; color:…

CSS3新增UI样式

圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> // 如果是两个数字,则左上角和右下角一样,右上角和左下角一样 .box…

[原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引用外部css文件时, 需要拼出实际的含有IP地址的CSS文件地址, 并且需要用双斜杠(//)来代替单斜杠. =====后来遇到的问题: css文件里的样式, 在页面上显示没有问题, 但是打印预览却没有样式.... 又挣扎了一天, 原来问题是: lodop中的加入css文件后, 不能识别css类(.…

Css - 选择器和样式

Css - 选择器和样式标签选择器即使用html标签作为选择对象 <style> div{ background:red; } </style> <div>s</div> 类名选择器 html标签的类名由class属性指定,通过使用.class类名的形式可以选择指定的元素对象,可以为一个html标签指定多个class类名,每个类名以空格隔开即可. <style> .box{ background:red; } </sty…

amazeui学习笔记--css（基本样式4）--打印样式Print

amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的标题.链接显示在后面. <a href="http://www.amazeui.org">Amaze UI</a> 2.am-print-hide类: 浏览器可见,打印机隐藏. 二.打印样式Print 目录显示 URL 链接辅助 Class 参考链接打印样式组…

amazeui学习笔记--css（基本样式3）--文字排版Typography

amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块blockquote和定义列表(dl dt)注意一下 3.样式不能正常显示:拷贝过来的很多样式在博客中都不能正常显示二.文字排版Typography 目录字体字体定义字体辅助 Class Webkit 反锯齿字体相关链接元素基本样式标题 <h1> - <h6> 段落 &l…

amazeui学习笔记--css（基本样式2）--基础设置Base

amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素的盒模型设置为 border-box -moz-box-sizing: border-box; 3.em和px:根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px 4.字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem…

amazeui学习笔记--css（基本样式）--样式统一Normalize

amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 2.Normalize.css:在默认的HTML元素样式上提供了跨浏览器的高度一致性. 二.样式统一Normalize 在统一浏览器默认样式上,Reset 一度非常流行,更有简单粗暴的通配符 reset : Copy * { margin: 0; padding: 0; border:0; } 时…

CSS重构：样式表性能调优

这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章是基础知识的介绍,都了解的话可直接跳过.第四章是为样式分类,我比较感兴趣的是第四章(测试)和第五章(代码的组织和重构策略). 一.测试测试时需要考虑很多因素,其中包括以下几点: 1.正在用什么浏览器测试网页? 2.如何在不同的操作系统上测试各种各样的浏览器? 3.正在多大的窗口浏览网页? 4.如何快速测试大…

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符 E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐…

Flex中使用CSS控制页面样式

Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也可以新建一个CSS文件,在这个文件中写样式,后者更便于管理. 先来看看直接在mxml文件中写样式: 方法一:直接在想要控制的控件中直接写CSS元素,如left,right,top等: 方法二:还可以将CSS样式写在<fx:Style><fx:Style/>标签中,示例代码如下: <…

系列文章--精通CSS.DIV网页样式与布局学习

精通CSS.DIV网页样式与布局(八)——滤镜的使用精通CSS.DIV网页样式与布局(七)——制作实用菜单精通CSS.DIV网页样式与布局(六)——页面和浏览器元素精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式精通CSS.DIV网页样式与布局(四) ——页面背景精通CSS.DIV网页样式与布局(三)——中秋效果图精通CSS.DIV网页样式与布局(二)—— 段落精通CSS.DIV网页样式与布局(二) 精通CSS.DIV网页样式与布局(一) 神奇的验证码,我们一起来探究…

[CSS]cursor鼠标样式

用css控制鼠标样式的语法如下: <span style="cursor:*">文本或其它页面元素</span> 把 * 换成如下15个效果的一种: 下面是对这15种效果的解释.移动鼠标到解释上面,看看你的鼠标起了什么变化吧! hand 是手型 pointer 也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用. crosshair 是十字型 text 是移动到文本上的那种效果…

精通CSS+DIV网页样式与布局--图片效果

提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识: 精通CSS+DIV网页样式与布局--初探CSS 精通CSS+DIV网页样式与布局--CS…

精通CSS+DIV网页样式与布局--初探CSS

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q…

[总结]CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

js动态改变css伪类样式

首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 1…

css清除默认样式

CSS 清除默认样式通常有以下几句就够了: *{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:none} 如果你想写全也可以: /* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素…

css三种样式表写法

css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> </head>2.外链样式表: <link rel="stylesheet" href="1.css">3.行内样式表: <h1 style="font-size:30px;color:pink">红豆</h1>…

div+css隐藏内容样式方法

div css隐藏内容样式方法 div+css隐藏内容方法一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css隐藏滚动条 6.css隐藏div层一.使用css隐藏方法用到CSS样式单词及对应解释 - TOP 1.使用display:none;来隐藏所有信息(无空白位占据)推荐,CSS display手册查看2.使用overflow:hidden;来隐藏溢出的文字或图片适用推荐,css overf…

CSS控制列表样式属性list-style有哪些？怎么用？

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业…

收藏的一些有意思的CSS加载样式

先看下效果全部代码贴出,自己粘贴调试测试: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css加载样式</title> </head> <style> /*效果一*/ .spinner9 { margin: 100px auto; width: 90px; height: 6…

[前端开发] 8 个很有用的免费CSS的UI工具箱

搞web开发的不能不提到前端,下面就和大家分享下8个很有用的免费CSS的UI工具箱 1) UI CSS ui.css 是一个用来创建简洁的 Web 用户界面的工具,下载的文件只包含一个 css 文件. 2) UI Kit 3) CSS UI Kit 4)Lion UI Kit CSS 该工具箱基于 Xcode 组件(OS X Lion),提供了 OS X 应用的原型,主要用于 WebKit,但其他浏览器表现也不错. 5)Pure CSS 6) CSS UI Kit 7) Merto CSS UI…

CSS+DIV网页样式布局实战从入门到精通中文pdf扫描版

CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包括基本概念和语法.代码的编写方法.盒子模型及高级特性等:第6-11章主要介绍网页样式布局的常用设置,包括网页字体与对象尺寸.文本与段落.文本样式.文本颜色与效果.背景颜色与图像及图像效果等:第12-16章主要介绍网页样式布局的高级设置,包括网页表格.链接与项目列表.导航菜单.固定宽度布局及变宽度布局…