前端页面有哪三层构成，分别是什么？作用是什么？
　　1、结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面&内容是什么&的问题。
　　2、表示层：由CSS负责创建，解决了页面&如何显示内容&的问题。
　　3、行为层：由脚本负责。解决了页面上&内容应该如何对事件作出反应&的问题。
css的基本语句构成是什么？
　　选择符{属性1:值1;属性2:值2;...}等。
主流的浏览器分别是什么内核？
　　IE：Trident内核
　　Mozilla FireFox：Gecko内核
　　Chrome、Safari：Webkit内核
　　Opera：Presto内核
经常遇到的浏览器兼容性有哪些？如何解决？
　　1、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
　　2、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:将其转化为行内属性。测试代码如下：
&title&Demo&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&style type="text/css"&
float: left;
width: 150px;
height:<span style="background-color: #f5f5f5; color: #px;
background:#EEE;
margin: 5px 0 5px 150px;
&div class="one"&Double Margin Bug(150*150)&/div&
　　正常的应该是：
　　但在IE6中是这样的：
　　加上display:后才正常。
　　3、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码：
height:5px;
width:<span style="color: #px;
background:#F60;
　　HTML没变，还是&div class="one"&&/div&，在IE6下显示为：
　　这个一看就知道不止5px，CSS改为下面两种之一就可以了：
height:5px;
width:<span style="color: #px;
overflow:hidden;
background:#F60;
/*--或--*/
height:5px;
width:<span style="color: #px;
font-size:2px;
line-height:2px;
background:#F60;
　　注意这里加了line-height:2px后还要加上font-size才行。效果如图：
　　4、min-height在IE6下不起作用。解决方案是添加 height:auto !height:其中xx就是min-height设置的值。
　　5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;
　　6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:}样式。
　　7、input边框问题。去掉input边框一般用border:就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。
　　ie6的默认CSS样式，涉及到border的有border-style:border-width:2浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:。
　　解决方案是用:border:0或border:0或border:none:border-color:transparent;，推荐用第三种方案。
　　8、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。测试代码：
&style type="text/css"&
height:<span style="background-color: #f5f5f5; color: #px;
background:#CCC;
height:50px;
margin-top:50px;
background:#AAA;
&div class="box1"&
&div class="box1_1"&box1_1&/div&
　　chrome & FireFox & IE8 & IE9下的效果为：
　　IE6 & IE7 下的效果：
　　对于这两种显示效果，我倒认为IE6&IE7是正确的，不知道是否有朋友能给出解释。
　　解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。
　　9、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：
&style type="text/css"&
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
border:1px solid #CCC;
float:left;
height:50px;
&div class="one"&One&/div&
&div class="two"&Two&/div&
　　正常应该是：
　　IE6中是：
　　解决办法是改变设计思路，如果真有两个div重合的需求，可以用下面的代码实现：
&style type="text/css"&
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
border:1px solid #CCC;
position:relative;
position:absolute;
&div class="parent"&
&div class="one"&One&/div&
&div class="one"&Two&/div&
　　10、父子关系的标签，子标签浮动导致父标签不再包裹子标签。测试代码：
&style type="text/css"&
background:#888;
border:5px solid #888;
float:left;
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
background:#F60;
&div class="parent"&
&div class="one"&One&/div&
　　在IE、Chrome、Firefox下都是下面的效果：
　　可以看到父元素并没有包裹子元素，这是因为float造成的，解决方案是清除浮动就行了，用下面的代码可以解决：
&style type="text/css"&
background:#888;
border:5px solid #888;
zoom:1;/*--for IE--*/
.parent:after{ /*--for other broswer--*/
content:".";
display:block;
line-height:0;
clear:both;
visibility:hidden;
float:left;
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
background:#F60;
&div class="parent"&
&div class="one"&One&/div&
　　现在效果是：
　　最后关于float力荐两篇文章：、
如何居中一个浮动元素?
　　父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
&!DOCTYPE html&
&title&Demo&/title&
&meta charset="utf-8"/&
&style type="text/css"&
position:relative;
float:left;
position:relative;
float:left;
right:50%;
&div class="p"&
&h1 class="c"&Test Float Element Center&/h1&
你如何管理CSS文件、JS与图片？
　　1、对各个项目中CSS，JS里的稳定的通用代码进行提取，形成公共文件，然后利用CDN等资源进行缓存，减轻服务器压力。
　　2、去掉JS、CSS里的冗余代码，对代码进行精减。
　　3、对JS、CSS进行压缩合并，减少请求次数。
　　4、对页面上的小图标，背景等图片进行合并，减少请求次数。
　　5、JS、CSS、图片均用版本控制工具进行管理，方便修改与恢复。
　　我能想到的就这么多，请大家继续补充。
　　以上总结只是依据本人目前的水平给出的自己的看法，不确保严格正确，如果有误欢迎大家指出。
　　以上题目主要是选自淘宝2011年HTML&CSS面试题的剩余几题。如果大家有什么好的前端面试题，欢迎提供。
阅读(...) 评论()CSS课堂交流区问题汇总
问题一：如何实现浏览器兼容版的inline-block显示display:inline-在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，请实现兼容ie6、ie7的通用的方式。使用display:inline-block属性:可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。注：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果 , 而不能说IE6/7支持 display:inline-block！如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。实际有效的方法共有2种：方法1：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。兼容各浏览器的代码如下：div {display:inline-*display: *zoom:1;...}方法2：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout
不会消失）。代码如下（…为省略的其他属性内容）： div {display:inline-...}div {*display:}问题二：实现一个自适应布局已知HTML结构和效果图如下：&div class="parent"&
&div class="side"&侧栏&/div&
&div class="main"&主栏&/div&&/body&要求如效果图中标注，两栏间距为10px，请写出这个两列布局的CSS。相关重点文章： 横向两列布局（左列固定，右列自适应）的4中实现方式 解答版本一：
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&
&title&Document&/title&
&style type="text/css"&
/*圣杯布局*/
color: #fff;
font-size: 25px;
text-align: center;
padding-left: 210px;
overflow: hidden;
margin-bottom: 20px;
background-color: blue;
float: left;
width: 100%;
height: 100px;
line-height: 100px;
background-color: red;
float: left;
width: 200px;
height: 100px;
line-height: 100px;
margin-left: -100%;
position: relative;
left: -210px;
/*双飞翼布局*/
.parent1 {
color: #fff;
font-size: 25px;
text-align: center;
overflow: hidden;
margin-bottom: 20px;
margin-left: 210px;
background-color: blue;
float: left;
width: 100%;
height: 100px;
line-height: 100px;
background-color: red;
float: left;
width: 200px;
height: 100px;
line-height: 100px;
margin-left: -100%;
/*flex布局*/
.parent2 {
color: #fff;
font-size: 25px;
text-align: center;
display: -webkit-flex;
display: flex;
background-color: red;
width: 200px;
height: 100px;
line-height: 100px;
margin-right: 10px;
background-color: blue;
height: 100px;
line-height: 100px;
-webkit-flex: 1;
&!-- 圣杯布局 --&
&div class="parent"&
&!-- 主栏是页面的主内容，需要优先加载html --&
&div class="main"&主栏&/div&
&div class="side"&侧栏&/div&
&!-- 双飞翼布局 --&
&div class="parent1"&
&!-- 主栏是页面的主内容，需要优先加载html --&
&div class="box"&
&div class="main1"&主栏&/div&
&div class="side1"&侧栏&/div&
&!-- flex布局 --&
&div class="parent2"&
&div class="side2"&侧栏&/div&
&div class="main2"&主栏&/div&
&/html&演示结果：解答版本二：横向两列布局：左列固定，右列自适应方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度&自适应宽度列的高度
padding:0;
font-size:30px;
font-weight:bold;
text-align:center;
line-height:200px;
position:absolute;left:0;top:0;
width:200px;
height:200px;
background:red;
margin-left:210px;
background:blue;
height:200px;
}方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）
padding:0;
font-size:30px;
font-weight:bold;
text-align:center;
line-height:200px;
width:200px;
height:200px;
float:left;
background:red;
height:200px;
margin-left:210px;
background:blue;
}方法三：使用Flex布局
padding:0;
font-size:30px;
font-weight:bold;
text-align:center;
line-height:200px;
display:flex;
width:200px;
height:200px;
background:red;
margin-right:10px;
background:blue;
height:200px;
}方法四：利用BFC不与浮动元素重叠的特性
width: 200px;
height: 100px;
float: left;
background: red;
margin-right: 10px;
/* 创建BFC
overflow: hidden;
background: blue;
height: 100px;
}关于BFC特性问题三：实现一个Tab请按以下效果图和图中标注完成HTML和CSS：
默认第一个Tab为选中状态。解答：&!DOCTYPE html&&html&&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
*{margin: 0;padding: 0;}
#parent{width:574px;height:200px;border: solid 1px #999;text-align: center;box-sizing: border-box;z-index:1;}
.item{position: absolute;display: none;background: #ffffff;top:60px;left: 10px;}
ul{width: 100%;display: flex;}
ul li{height:40px;background: #f1f1f1;flex-grow: 1;border-bottom: 1px solid #cecece;border-right:1px solid #cecece;list-style: none;}
ul li a{ text-decoration: none;color: black;font: 14px "微软雅黑";line-height: 40px;}
li:hover{border-bottom: none;background:none;}
li:hover div{display: block;}
li:first-child div{display: block};
&/style&&/head&&body&&div id="parent"&
&li&&a href="#item1"&课程内容&/a&&div class="item item1" id="item1"&课程内容&/div&&/li&
&li&&a href="#item2"&学习计划&/a&&div class="item item2" id="item2"&学习计划&/div&&/li&
&li&&a href="#item3"&技能图谱&/a&&div class="item item3" id="item3"&技能图谱&/div&
&/ul&&/div&&/body&&/html&问题四：请按以下效果图和要求完成一个弹窗的HTML和CSS：总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单行文字且超出隐藏并显示“...”，背景色为#eeeeee。内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，字体均为12px的宋体。段落：行高1.5倍。按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”解答版本一：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
*{margin: 0;padding: 0;}
.parent{width: 300px;border:1px solid #cccccc;border-radius: 5px;position:fixed;left:50%;top:50%;transform: translate(-150px,-75px);}
.nav{font:14px/40px "微软雅黑";background:#eeeeee;padding:0 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.close{background: url(../x.png);position: absolute;cursor: pointer;height: 10px;width: 10px;top: 10px;right: 10px;}
.content{background: white;font:12px/20px "宋体";}
span{margin: 20px;}
p{margin: 20px;line-height: 1.5;}
.button{margin: 0 auto;width: 80px;height: 30px;background: blue;color: white;border-radius: 5px;margin-bottom: 20px;text-align: center;display: flex;align-items: center;justify-content: center;}
&div class="parent"&
&div class="nav"&
&span&标题栏&/span&
&div class="close"&&/div&
&div class="content"&
&p&内容区段落&/p&
&div class="button"&确定&/div&
&/html&解答版本二：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&弹窗&/title&
&style type="text/css"&
margin:0; padding:0;
html,body{
height: 1000px;
box-sizing:border-box;
width: 302px;
border-radius: 5px;
border: 1px solid #cccccc;
position: fixed;
z-index: 1;
left: 50%;
transform:translate(-50%,-50%);
width: 100%;
height: 40px;
font:14px "微软雅黑";
vertical-align: center;
background-color: #eeeeee;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
vertical-align: center;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
margin:10px 20px;
.icon img{
width: 10px;
height: 10px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
width: 10px;
height: 10px;
margin: 20px;
background: #ffffff;
font:12px "宋体";
text-align: center;
.body button{
margin:0 auto;
border-radius: 5px;
text-align: center;
width: 80px;
height: 30px;
color: white;
background: blue;
margin: 0 auto 20px;
line-height: 1.5;
white-space: pre-wrap;
width: 100%;
&div class="pop"&
&div class="head"&
&p&标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏&/p&
&span class="icon"&
&img src="../x.png"&
&div class="body"&
&p&内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落&/p&
&button type="submit"&确定&/button&
&/html&解答版本三：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
/* 只为看fixed效果 */
height: 12000px;
回退自身一半宽度和长度（估计值），使之位于中央 fixed定位。
只有左上和右上角需要圆角。
position: fixed;
left: 50%;
/*margin-left: -151
margin-top: -100*/
transform:translate(-50%,-50%);
width: 300px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: solid 1px #cccccc;
标题栏，用flex布局。justify-content控制元素均匀分散在两边，align-items控制元素垂直居中
文本的溢出控制，text-overflow overflow
white-space搭配使用。
height: 40px;
padding:0 20px;
font-size: 14px;
font-family: "Microsoft Yahei";
background-color: #eeeeee;
text-overflow : ellipsis;
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content:space-between;
align-items : center;
/* cursor控制鼠标指针样式*/
border: 0px;
background-image: url("../x.png");
height: 10px;
width: 10px;
cursor: pointer;
/* 内容区域 设置有关文本的一些属性。*/
.container
padding: 20px;
font-size: 12px;
font-family: "宋体";
/* 子元素选择器。设置行高。*/
.container p
line-height: 1.5em;
/* 按钮属性，用属性选择器选中。*/
input[type = "button"]
display: block;
margin: 20px auto 0;
background-color: rgba(15, 89, 255, 0.85);
color: white;
width: 80px;
height: 30px;
text-align: center;
border-radius: 5px;
&div class = "body"&
&div class = "theBox"&
&div class = "titleBar"&标题栏&button class = "XBtn"&&/button&&/div&
&div class = "container"&
&p&内容区段落&/p&
&input type = "button" value = "确定" /&
&/html&解答版本四：
&DOCTYPE html&
&meta charset="utf-8"&
&title&弹窗&/title&
&style type="text/css"&
*{margin:0;padding:0;}
.popup_window{
postion:fixed;
width:300px;
margin:25% auto 25%;
border:1px solid #cccccc;
border-radius:5px;
.title_bar{
display:inline-block;
padding:0 20px 0;
width:260px;
height:40px;
font:14px "微软雅黑";
background:#eeeeee;
line-height:40px;
float:right;
position:relative;
background-image: url("../x.png");
width: 10px;
height: 10px;
top:-40px;
right:10px;
cursor: pointer;
.title_tip{
width:150px;
line-height:40px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
padding:20px;
background:#FFF;
.content p{
font:12px/1.5 "宋体";
.sumbit_button{
margin:20px auto 0;
border-radius:5px;
text-align:center;
cursor: pointer;
&div class="popup_window"&
&div class="title_bar"&
&p class="title_tip"&嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿&/p&
&div class="close"&
&span&X&/span&
&div class="content"&
&p&&strong&总体：&/strong&弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），
圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。&br /&&strong&标题栏：&/strong&左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单
行文字且超出隐藏并显示“...”，背景色为#eeeeee。&br /&&strong&内容区：&/strong&由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，
字体均为12px的宋体。&br /&&strong&段落：&/strong&行高1.5倍。&br /&&strong&按钮：&/strong&水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。&br /&
&strong&关闭：&/strong&宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”&/p&
&div class="sumbit_button"&
&input type="submit" name="button" id="button" value="确定" style="width:80height:30color:background:"/&
&/html&相关重点文章：一个定位和居中问题的探讨
最新教程周点击榜
微信扫一扫DIV的CSS height:100%无效的解决办法 - 推酷
DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:&height:100%;&”是无效的。
那么如何才能让div的css height:100%生效呢？解决办法很简单，同时也能适配多个浏览器。
方法就是在css当中增加上：
html, body{ margin:0; height:100%; }
这样，在div中使用height:100%就能够正常显示了。
示例代码：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&无标题文档&/title&
html,body{ margin:0 height:100%;}
.container { height: 100%;}
.c2{ width:100%; background:#09F; font-size:36}
&div class=&container c2& &威易网 www.weste.net&/div&
显示效果：
这样就ok了。
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
没有分页内容
图片无法显示
视频无法显示
与原文不一致CSS 参考手册
CSS font-weight 属性
三段文字设置不同的字体粗细：
p.normal {font-weight:}
p.thick {font-weight:}
p.thicker {font-weight:900;}
属性定义及使用说明
font-weight 属性设置文本的粗细
JavaScript 语法：
object.style.fontWeight="900"
浏览器支持
所有主流浏览器都支持font-weight属性。
注意：IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。"inherit".
默认值。定义标准的字符。
定义粗体字符。
定义更粗的字符。
定义更细的字符。
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
规定应该从父元素继承字体的粗细。
CSS 参考手册:CSS font-weight 属性示例 --
梦之都 ,示例.
font-weight: normal
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.1//EN& &http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&CSS font-weight 属性示例&/title&
&style type=&text/css& media=&all&&
font-weight:
font-weight:
font-weight:
font-weight:
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
&p id=&normal&&font-weight: normal&/p&
&p id=&bold&&font-weight: bold&/p&
&p id=&bolder&&font-weight: bolder&/p&
&p id=&lighter&&font-weight: lighter&/p&
&p id=&100&&font-weight: 100&/p&
&p id=&200&&font-weight: 200&/p&
&p id=&300&&font-weight: 300&/p&
&p id=&400&&font-weight: 400&/p&
&p id=&500&&font-weight: 500&/p&
&p id=&600&&font-weight: 600&/p&
&p id=&700&&font-weight: 700&/p&
&p id=&800&&font-weight: 800&/p&
&p id=&900&&font-weight: 900&/p&}