font-size | 易学教程

响应式布局和css3

阅读更多关于响应式布局和css3

1.使用百分比 2.使用em，相对于上下文的百分比（body默认16px, 100%, 1em） body{ font-size: 16px; font-size: 100%; font-size: 1em; } 子元素相对body的大小。比如宽度为48px, 则设置 width: 3em 3.媒体查询，比较常用的框架bootstrap.css 4.css3 text-shadow (阴影）: 1px 1px 1px #000000; 右阴影下阴影模糊宽度阴影颜色　　　　　　　　　 -1px -1px 1px #000000; 上阴影左阴影模糊宽度阴影颜色　　　　　　　　 0 1px 0 #ffffff; 浮雕效果多重阴影：text-shadow: 0 1px 0 #fff, 4px 4px #000 box-shadow: 0 0 1px #ffffff; 水平偏移距离，垂直偏移距离，模糊半径，阴影颜色　　　　　　inset 0 0 30px #000; 内阴影多重阴影：box-shadow: 0 1px 0 #fff, 4px 4px 0 #000 渐变背景多重背景图片 background: url(), url(), url() 来源： https://www.cnblogs.com/byayn/p/12458355.html

小米商城首页的实现

阅读更多关于小米商城首页的实现

小米首页效果图 html代码由于代码过多，上传困难。请访问链接：https://share.weiyun.com/5BWIENo 小米商城源文件里面附带完整的源码文件 css代码 * { margin : 0 ; padding : 0 ; } ul,ol,li { list-style : none ; } img { display : block ; width : 100% ; } a { text-decoration : none ; } h1,h2,h3,h4 { font-size : 16px ; } body { font-size : 14px ; color : #000000 ; font-family : 宋体 , 微软雅黑 ; } html, body { width : 100% ; } /* css common */ .l { float : left ; } .r { float : right ; } .clear:after { content : "" ; display : block ; clear : both ; } .container { width : 1226px ; margin : 0 auto ; position : relative ; } .container-fluid { position :

博客园皮肤等设置

阅读更多关于博客园皮肤等设置

　　博客园官方皮肤略显单调，所以本人花费了一点时间进行设置。　　1.先来个整体外观查看：　　1.1：管理-》设置-》博客皮肤-》ClassicBlue: 　　1.2：页面定制css代码：（ ps :背景图片bg6.bmp,可以通过“文件”-》“上传”，复制当前文件链接即可） 1 #header{ 2 background: url(https://files.cnblogs.com/files/why-not-try/bg6.bmp) no-repeat; 3 } 4 a.headermaintitle{ 5 color: #FF9800; 6 font-size:35px; 7 } 8 .postTitle a:hover{ 9 color:gold; 10 } 11 .entrylistPosttitle a:hover{ 12 color:gold; 13 } 14 a.c_b_p_desc_readmore{ 15 font-weight:bold; 16 } 17 .postCon a{ 18 font-weight:bold; 19 } 20 #MySignature{ 21 background: palegoldenrod; 22 font-size: 20px; 23 text-align: center; 24 color: darkgoldenrod;

注册页面编写（html/css）

阅读更多关于注册页面编写（html/css）

图样展示照片在WEB-INF下方的image中照片链接： https://pan.baidu.com/s/1BhbA1J-19Y0FMokMsMtK0g 提取码：coru 特别适用于初学者 regist.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XINGGou</title>  <link rel="stylesheet" href="regist.css"> </head> <body>  <div id="header">  <div id="line1"> <img alt="logo" src="../image/logo_jt.jpg"> <span class="line"></span> <span class="regist">欢迎注册</span> </div>  <div id="line2"> <span> 已有帐号? <a href="#"> 请登录 </a> </span> </div> </div>  <div id="body"> <form> <table> <tr> <td>

博客界面美化

阅读更多关于博客界面美化

www.cnblogs.com/shaokele/ 美化无止境，还是学OI ！！！美化无止境，还是学OI ！！！美化无止境，还是学OI ！！！催更请留言～～博主很懒～～我的博客皮肤是Simple Memory 由于背景图比较高清，部分设备可能显示的很慢：）背景图可以自己换，修改代码第三行的网址即可现在的版本： “页面定制CSS代码” body { color: #000; background: url(https://i.loli.net/2018/07/18/5b4f176e73e07.png) fixed; background-size: cover; background-repeat: repeat; font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #home { opacity: 0.8; margin: 0 auto; width: 80%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba

字体大小自适应纯css解决方案【转】

阅读更多关于字体大小自适应纯css解决方案【转】

viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <style type="text/css"> #box { font-size: 4vw;} </style> </head> <body> <div id="box"> 我是靖鸣君我是靖鸣君我是靖鸣君 </div> </body> </html> 但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的： When the height or width of the viewport is changed, they are scaled accordingly. 插曲像这样的问题，我之前也遇到过

尚美的作业代码

阅读更多关于尚美的作业代码

!DOCTYPE html html head meta charset=“utf-8” / title></title style type=“text/css” html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,form,fieldset,legend,input,textarea,select{margin:0;padding:0;} body{font-size:16px;font-family: ‘微软雅黑’;} ul,ol,li{list-style:none;} h1,h2,h3,h4,h5,h6{font-size:16px;font-weight: normal;} b,strong{font-weight: normal;} i,em{font-style: normal;} a,u,ins{text-decoration: none;} img{border:0;display:block;} input,fieldset{outline: none;border:0;} .clear_fix:after{content:’.’; clear:both; height:0; overflow:hidden; display:block; visibility: hidden;} .clear_fix{zoom

css中单位的使用

阅读更多关于 css中单位的使用

css中许多的属性都需要添加长度，而长度一般由数字和单位构成，如1px,1.5em,2vh；也可以省略单位，如line-height:1.5,表示行高为字体大小的1.5倍；长度单位一般也分为相对长度和绝对长度。（一）绝对长度　顾名思义指的是一个固定的值，它并不随着外部环境的改变而改变（屏幕大小，操作系统的不同）；绝对单位中最常用的是px，像素单位，如width:10px,值的是元素宽度为10个像素大小；其他的如cm(厘米)、mm(毫米)、in(英寸)则基本上不会用到，因为在固定的设备上计算最好的单位还是px(像素)。（二）相对长度相对指的是要俩事物做对比，即拿一个长度找另一个基准长度作为参照，进行对比；对于在不同的设备上使用时，相对长度还是更合适用的，常用的相对长度单位有：em、ex、ch（相对于数字0的宽度）、rem（相对于html元素的font-size）、vw、vh、vmin、vmax、%。 1、em 　　em指的是相对于所在元素字体大小的长度单位 <!doctype html><html>　　<head> <style> .wrap{font-size:50px;width:2em;height:2em;} .box{font-size:20px;width:2em;height:2em;} </style> </head> <body>　　 <div

rem怎么计算

阅读更多关于 rem怎么计算

px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em：相对单位，继承父节点（层层继承，传递）基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 rem：相对单位，相对长度单位。r’是“root”的缩写，相对于根元素 <html> 的字体大小, 可理解为”root em”, 相对根节点html的字体大小来计算， CSS3 新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。 rem在移动端应用可参考淘宝的页面 http://m.taobao.com (html的font-size通过动态计算获取) 注：需设置meta缩放比1:1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> vw： viewpoint

css中关于单位的一些问题

阅读更多关于 css中关于单位的一些问题

Css中关于单位的一些问题相对字体长度： Em： Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。在没有任何CSS规则的前提下， 1em的长度是： 1em=16px=0.17in=12pt=1pc=4.2mm=0.42cm Em单位有点古怪，当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会宽点，也可能会窄点。 Rem: Rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。 Point: Point是一个物理度量单位，1pt=1/72 in.在CSS之外point是最常用的尺寸类型（可能这就是css支持point的原因）。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”

订阅 font-size