当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 自定义容器和字体大小

CSS样式表
验证并修复css错误内容的相关工具
分享3个比较实用的CSS页面框架布局
CSS幻灯片教程:制作高效可维护组件化的CSS代码
网页制作基础知识:html特殊符号
CSS教程:按整洁易懂的结构组织CSS样式
查看和编辑CSS中用到的颜色:CSS Prism
帮助你学习CSS的在线CSS工具网站
CSS网页设计参考:把HTML标记分类
CSS进阶:几个Reset CSS的八卦问题
WEB设计技巧:网页虚线制作方法剖析
WEBJX收集CSS格式化和造型网页高级教程
CSS3教程:在CSS中使用的颜色
学习WEB标准心得:网页重构的思路
轻易创建css导航工具:CSS Tab Designer2
总结学习web标准的十个重要理由
CSS实例教程:CSS制作星级评价的功能
CSS实例教程:纯CSS实现圆角框
多个css、js文件自动合并、压缩
网页设计教程:CSS文字排版技巧大全
Photoshop制作CSS网页制作的背景图

No. « 115 116 117 118 »

技术文章搜索

关键字

CSS样式表 中的 自定义容器和字体大小

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 97 ::
收藏到网摘: n/a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<title>Home</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css" media="all">


body
{
margin: 1em;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

body *
{
margin: 0;
}

#content
{
padding: 1em;
background-color: #BBDDFF;
background-image: url(column_bg.gif);
background-repeat: repeat-y;
background-position: 30em 0;
text-align: left;
}

#content p
{
margin-bottom: 1em;
}

#footer
{
margin-top: 1em;
padding: 1em;
background-color: #0066CC;
text-align: left;
}

#footer a
{
color: #FFFFFF;
}

#header
{
margin-bottom: 1em;
padding: 1em;
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}

#leftContent
{
padding-right: 10em;
}

#options
{
margin-bottom: 1em;
text-align: right;
}

#options a
{
color: #000000;
}

#rightContent
{
float: right;
width: 8em;
}

#widthContainer
{
font-size: 0.8em;
width: 40em;
margin: auto;
}

.clearer
{
clear: both;
}


</style>

<script type="text/javascript">
<!--


function scaleWidth()
{
var optimalLineLength = "35em";
var extraAccounting = "12em";
var minimumTextHeight = "10px";
var windowWidth = document.body.clientWidth;
var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));

if (optimalSize >= parseInt(minimumTextHeight))
{
document.body.style.fontSize = optimalSize + "px";
}
else
{
document.body.style.fontSize = parseInt(minimumTextHeight) + "px";
}

return true;
}


function textSize(size)
{
var theContainer = document.getElementById("widthContainer");
var increment = 0.1
var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);

if (!currentSize)
{
currentSize = 0.8;
}

if (size == "smaller")
{
theContainer.style.fontSize = (currentSize - increment) + "em";
}
else
{
theContainer.style.fontSize = (currentSize + increment) + "em";
}

return true;
}


-->
</script>

</head>


<body onload="scaleWidth();" onresize="scaleWidth();">
<div id="widthContainer">
<div id="options">

<a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> |
<a href="#" onclick="textSize('bigger'); return false;">Text bigger</a>
</div>
<!-- END options -->
<div id="header">
<h1>Browser-width defined font size</h1>
</div>
<!-- END header -->

<div id="content">
<div id="rightContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>
</div>
<!-- END rightContent -->
<div id="leftContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>

<p>
Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.
</p>
<p>
Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.
</p>
<p>
Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.
</p>
<p>

Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
</p>
</div>
<!-- END leftContent -->
<div class="clearer">
</div>
</div>
<!-- END content -->
<div id="footer">
<a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>

</div>
</div>
<!-- END widthContainer -->
</body>


</html>