1.第一个小实例是编写简易的百度首页
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; chartset=UTF-8">
<html>
<head>
<style type="text/css">
.div1{
text-align: center;
}
.div2{
text-align: center;
width:600px;
height: 30px;
margin: 0 auto;
}
.div3{
text-align: center;
}
input[type=button] {
appearance:button; /* 将元素呈现为按钮 */
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
box-sizing:border-box; /* 令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中 */
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */;
padding: 0;
width: 100px;
height: 50px;
}
ul{
list-style-type: none;
}
li{
float: left;
width: 60px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<div class="div1">
<img src="http://www.baidu.com/img/bdlogo.gif" />
</div>
<div class="div2">
<ul>
<li><a href="">新闻</a></li>
<li><a href="http://www.baidu.com/">网页</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">知道</a></li>
<li><a href="">音乐</a></li>
<li><a href="">图片</a></li>
<li><a href="">视频</a></li>
<li><a href="http://map.baidu.com/">地图</a></li>
</ul>
</div>
<div class="div3">
<input style="width:600px; height:30px;" />
<input id="input2" type="button" value="百度一下" />
</div>
</div>
</body>
</html>
这里遇到的一个坑，<input class="input2" type="button" value="百度一下"/>这一行设置的input高度只在IE浏览器中生效，而其它Safari、Chrome等浏览器则无法显示给定的行高。所以需要在css中增加appearance的说明，将元素呈现为button。
结果显示：
2.一个带视频、图文、超链接的例子
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<html>
<head>
<style type="text/css">
body{text-align:center}
</style>
</head>
<body>
<div class="alldiv" style="margin:0 auto;width:600px;height:200px">
<div style="margin:0 auto;">
<script type="text/javascript">
if(localStorage.pagecount){
localStorage.pagecount = Number(localStorage.pagecount) + 1;
}
else{
localStorage.pagecount = 1;
}
document.write("页面访问统计：" + localStorage.pagecount);
</script>
<h1>
哪凉快哪待着去，夏天也就25度左右！
</h1>
<div>
<div>
<p align="center">这几天，“哪凉快哪呆着去”，真不是一句骂人的话，这绝对是最真挚的关怀，最深藏不露的爱。小编特别搜罗了几个夏天也就25度左右的清凉避暑胜地。</p>
<br />
<a style="text-decoration:none;color:black;cursor:default; font-weight: bold; font-size:20px;">
1. 阿尔山 梦幻的地方
</a>
<p><span>一望无垠的大草原，广袤无边的大森林，惊险刺激的冰雪，汩汩流淌的温泉，每每提起这些，你也许很快就会联想到内蒙古、大兴安岭、哈尔滨……但你知道吗？在北国边城有这样一个神奇的地方：著名的四大草原在这里交汇，巍巍的大兴安岭在这里驻足，全国首屈一指的冰雪资源在这里厚积，世界最大的温泉群在这里流淌了几个世纪。它就是位于中蒙边界的内蒙古阿尔山市。</span></p>
<img src="1.jpg" style="width:90%; height:90%;"></img>
<br />
<p><span>阿尔山温泉滑雪场</span></p>
<p><span>地址：内蒙兴安阿尔山内蒙古兴安盟阿尔山滑雪场 </span></p>
<p><span>门票：80元</span></p>
<br />
<br />
<a style="text-decoration:none;color:black;cursor:default; font-weight: bold; font-size:20px;">
2. 博斯腾湖 “世外桃源”
</a>
<p>博斯腾湖与雪山、湖光、绿洲、沙漠、奇禽、异兽同生共荣，互相映衬，组成丰富多彩的风景画卷。<span style="color:blue;">大湖水域辽阔，烟波浩淼，天水一色，被誉为“沙漠瀚海中的一颗明珠”。小湖区，苇翠荷香，曲径邃深，被誉为“世外桃源”。</span></p>
<img src="2.png" style="width:480px; height:320px;"></img>
<br />
<p><span>博斯腾湖</span></p>
<p><span>地址：新疆新疆库尔勒市博斯腾湖</span></p>
<p><span>门票：45元</span></p>
<br />
<br />
</div>
<div>
<p><span>下面请欣赏MV《小幸运》：</span>
<video src="小幸运.mkv" controls="controls" loop="loop" width="640px" height="480px"></video>
</p>
<br />
<br />
</div>
<div>
<p>这是我的个人博客链接：
<a href="https://my.oschina.net/u/3640519/blog/1503454">点击这里</a>
</p>
<br />
<br />
</div>
</div>
</div>
</div>
</body>
</html>
图片资源：
结果显示：
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
