请问：在css和html中下图的样式是怎样实现的？两排文字不在一条水平线，不必套用两个div吧？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了请问：在css和html中下图的样式是怎样实现的？两排文字不在一条水平线，不必套用两个div吧？相关的知识，希望对你有一定的参考价值。
参考技术A 不用div也得至少三个html标签实例：
div外框盒子，包住内容，整体设置样式文字大小颜色
第1个span是设置字体加粗背景加图标，图标也可以新加标签或者加入图片来做
第2个span设置为红色
（备注）：你可以用其他标签来做，块元素必须设置浮动。内联元素会因，文字基线和默认属性，有相应的边距，解决办法很多，看用哪个了
<div>
<span class="icon">北大校内信息</span>
今天又<span>10</span>条新通知
</div> 参考技术B 可以用上下标的方式，CSS用来控制字体，颜色等
<html>
<body>
下标：
<p>
北大校内信息 <sub>今天有<span style="color:red">10</span>条新通知</sub>
</p>
上标：
<p>
北大校内信息 <sup>今天有<span style="color:red">10</span>条新通知</sup>
</p>
</body>
</html>追问
看上去很相似了，但是下标的字变小了……
追答也可以变大嘛，加样式
我建议这个的可以用dl 的结构方式 <dl><dt>北大校内信息</dt><dd>今天有....</dd></dl> 参考技术D 放span,div,table里都可以，设置不同的margin-top或者padding-top就可以了。追问
北大校内信息今天有10条新通知
然后
#notice
padding-top:10px；
这样试着不行，该怎么写代码呢？
怎样用纯HTML和CSS更改默认的上传文件按钮样式
参考技术A 我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：步骤1.创建一个简单的HTML标记
Upload
第2步：CSS：
有点棘手了
.fileUpload
position:
relative;
overflow:
hidden;
margin:
10px;
.fileUpload
input.upload
position:
absolute;
top:
0;
right:
0;
margin:
0;
padding:
0;
font-size:
20px;
cursor:
pointer;
opacity:
0;
filter:
alpha(opacity=0);
为简单起见，我使用应用了BootstrapCSS样式的按钮
(div.file-upload)。
演示：
上传按钮，显示选中的文件
不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。
JavaScript：
document.getElementById("uploadBtn").onchange
=
function
()
document.getElementById("uploadFile").value
=
this.value;
;
DOM:
Upload
以上是关于请问：在css和html中下图的样式是怎样实现的？两排文字不在一条水平线，不必套用两个div吧？的主要内容，如果未能解决你的问题，请参考以下文章