CSS 此图没看懂求解释

html-css015

CSS 此图没看懂求解释,第1张

我只是猜测，不一定对，单词 Awesome 的意思是：使人畏惧的；极好的；令人敬畏的；可怕的；

按字面上的理解就是：

1.css 是使人畏惧的；

2.css 是极好的；

3.css 是令人敬畏的；

4.css 是可怕的；

我觉得根据这个图，这里想表达的意思估计是第2条：css 是极好的；

因为外面有个框框，这个暗示了一个区块套住文字，当这个区块有一个固定的宽度时，按照“正常”的方式 AWESOME 这个词的宽度超过了外面区块宽度，因此 OME 应该被自动打断后换到下一行，并把区块的高度撑高一行，而这里并没有。

所以我觉得这里是在反讽 css 有无数可怕的细节要处理。

----------------------------------

PS：

我很好奇的百度了这句英文，老外有卖这个杯子的，原来是专门卖给网页设计师的：

About the product:

关于产品：

Clever design for the web designer's inside joke!

对于网页设计师的内部笑话巧妙的设计！

CSS IS AWESOME

Your web developers will overflow their box model when they see you sporting this hilarious new t-shirt! Then they'll go back to using tables.

大意是：CSS是可怕的，您的Web开发人员会遇到溢出边界(暗示遇到各类纠缠不清的细节)，当他们看到你的这新T恤(估计还有这个样式的衣服卖)！他们会重新使用表格来制作web页面。

内涵笑话，意思就是懂这个语言的人才看得懂的笑话(其实没什么笑点，老外体内内置的幽默系统跟我们不大一样，也许他们觉得好笑)

我搜索到了一系列杯子，还有c#、java之类的很多编程语言的杯子，也是这种形式讽刺这些语言里面经常被人抱怨的问题，要会这个语言的人才懂。

其实这个css笑话并不怎么样，因为连续的英文或数字超过宽度不断行，表格也存在同样的问题，都需要处理，严格的说这个溢出问题不是css的错。

div是层，就像是一个容器，属性不多所以大多是介绍css的，

他们不是一个东西

css面板是方便你编写css属性的

css控制div和其他样式网上很多教程，最好买本书好好研究下。

谁都是从不会到会的，没有关系的。呵呵

<!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">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

body{ background:#666font:12pxline-height:25px}

body,ul,li,ol,dl,dt,dd{ margin:0pxpadding:0px}

ul,li,ol,dl,dt,dd{ display:blocklist-style:none}

.main{ width:940pxpadding:0px 10pxmargin:0px autobackground:#FFF}

.lfmain{ width:400pxfloat:left}

.rfmain{ width:530pxfloat:right}

.cls{ clear:both}

.news{ border:solid 1px #09C}

.news dt{ height:35pxbackground:#09Cpadding-left:30px}

.news dt ul li{ width:100pxfloat:leftheight:35pxline-height:35pxtext-align:centercolor:#FFF}

.news dt ul .cli{ background:#FFFcolor:#039}

.news dt ul .dli{ background:#0FFcolor:#039}

.news dd{ padding:10px}

.news dd li{ height:25pxoverflow:hidden}

.h10{ height:10pxoverflow:hidden}

</style>

</head>

<body>

<script language="javascript">

function qh(i,ttclass,ttid,nrid,num){

//i 是当前id编号 如id=tt2 i的值应该为2

//ttclass 为当前显示栏目标题类名称 如'cli'

//ttid 是标题id去掉数字部分，如 id=tta3取值应该为'tta'

//nrid 是内容区域的id去掉数字部分

//num 有几个选项 取值正整数

for(m=1m<=numm++){

if(i==m){

document.getElementById(nrid+i).style.display="block"

document.getElementById(ttid+i).className=ttclass

}else{

document.getElementById(nrid+m).style.display="none"

document.getElementById(ttid+m).className=""

}

}

}

</script>

<div class="main">

<div class="lfmain">

<dl class="news">

<dt>

<ul>

<li class="cli" id="tt1" onmouseover="qh(1,'cli','tt','nr',3)">本站公告</li>

<li id="tt2" onmouseover="qh(2,'cli','tt','nr',3)">行业资讯</li>

<li id="tt3" onmouseover="qh(3,'cli','tt','nr',3)">优惠政策</li>

</ul>

</dt>

<dd>

<ul id="nr1" style="display:block">

<li>男人最担心的事情没钱，女人最担心的男人没钱</li>

<li>请不要抱怨这个社会，你要学会适应这个社会</li>

<li>在学校有老师指导，到社会别人都想看你的笑话</li>

<li>周六晚，我爸给说很担心我</li>

</ul>

<ul id="nr2" style="display:none">

<li>最爱国的事情凤姐去美国，终于不恶心中国人</li>

<li>最流行安慰话：元芳，你怎么看？</li>

<li>在我们还没有上大学，工作是管分配</li>

<li>在我们上小学，是要交学费</li>

</ul>

<ul id="nr3" style="display:none">

<li>昨天已经过去，明天还没有到来，今天正在进行</li>

<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>

<li>机会是给有准备的人提供的</li>

<li>在我们上小学，是要交学费</li>

</ul>

</dd>

</dl>

<div class="h10"></div>

<dl class="news">

<dt>

<ul>

<li class="cli" id="tta1" onmouseover="qh(1,'cli','tta','nra',3)">本站公告</li>

<li id="tta2" onmouseover="qh(2,'cli','tta','nra',3)">行业资讯</li>

<li id="tta3" onmouseover="qh(3,'cli','tta','nra',3)">优惠政策</li>

</ul>

</dt>

<dd>

<ul id="nra1" style="display:block">

<li>男人最担心的事情没钱，女人最担心的男人没钱</li>

<li>请不要抱怨这个社会，你要学会适应这个社会</li>

<li>在学校有老师指导，到社会别人都想看你的笑话</li>

<li>周六晚，我爸给说很担心我</li>

</ul>

<ul id="nra2" style="display:none">

<li>最爱国的事情凤姐去美国，终于不恶心中国人</li>

<li>最流行安慰话：元芳，你怎么看？</li>

<li>在我们还没有上大学，工作是管分配</li>

<li>在我们上小学，是要交学费</li>

</ul>

<ul id="nra3" style="display:none">

<li>昨天已经过去，明天还没有到来，今天正在进行</li>

<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>

<li>机会是给有准备的人提供的</li>

<li>在我们上小学，是要交学费</li>

</ul>

</dd>

</dl>

</div>

<div class="rfmain">

<dl class="news">

<dt>

<ul>

<li class="dli" id="nn1" onmouseover="qh(1,'dli','nn','na',3)">本站公告</li>

<li id="nn2" onmouseover="qh(2,'dli','nn','na',3)">行业资讯</li>

<li id="nn3" onmouseover="qh(3,'dli','nn','na',3)">优惠政策</li>

</ul>

</dt>

<dd>

<ul id="na1" style="display:block">

<li>男人最担心的事情没钱，女人最担心的男人没钱</li>

<li>请不要抱怨这个社会，你要学会适应这个社会</li>

<li>在学校有老师指导，到社会别人都想看你的笑话</li>

<li>周六晚，我爸给说很担心我</li>

</ul>

<ul id="na2" style="display:none">

<li>最爱国的事情凤姐去美国，终于不恶心中国人</li>

<li>最流行安慰话：元芳，你怎么看？</li>

<li>在我们还没有上大学，工作是管分配</li>

<li>在我们上小学，是要交学费</li>

</ul>

<ul id="na3" style="display:none">

<li>昨天已经过去，明天还没有到来，今天正在进行</li>

<li>不可能所有美好的事情都能按照你自己的愿望存在或实现</li>

<li>机会是给有准备的人提供的</li>

<li>在我们上小学，是要交学费</li>

</ul>

</dd>

</dl>

</div>

<div class="cls"></div>

</div>

</body>

</html>