<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#text {
width: 600px;
/*调整显示区的宽*/
height: 400px;
/*调整显示区的高*/
font-size: 14px;
line-height: 20px;
border: 1px solid #000000;
overflow-x: hidden;
/*不显示超过指定页的内容*/
overflow-y: hidden;
/*不显示超过指定高度的内容*/
word-break: break-all;
/*文本换行行为,如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了,汉字会被当作字母处理，所以中文的自动换行需要用这个属性值。还有一个word-wrap,不截断单词直接换行，但这个属性如果用到中文上，将产生不可预料的结果*/
}
</style>
</head>
<body>
<div style="width: 1000px;height: 100px;background-color: yellow;margin-left: auto;margin-right: auto;">
<div style="width: 200px;height: 100px;background-color: red;float: left;">
<div style="margin-top: 15px;margin-left: auto;margin-right: auto;text-align: center;">徐轲</div>
<div style="margin-left: auto;margin-right: auto;text-align: center;">1734110633</div>
<div style="margin-left: auto;margin-right: auto;text-align: center;">17计本3</div>
</div>
<div style="background-color: green;width: 600px;height: 100px;float: left;">
<div><img src="1.jpg" width="600px" height="100px"></div>
</div>
<div style="background-color: coral;width: 200px;height: 100px;float: left;">
<div style="border: 1px solid chartreuse;height: 30px;"><input onblur="checkUser(this)" style="outline: none;border: 0;background-color:coral ;"
placeholder="请输入用户名" height="40px" width="200px"></div>
<div style="border: 1px solid chartreuse;height: 30px;margin-top: 5px;"><input id="pwd" style="outline: none;border: 0;background-color:coral ;"
placeholder="请输入密码" height="40px" width="200px"></div>
<div style="float: right;margin-top: 5px;"><input type="button" value="登录"></div>
</div>
</div>
<div style="background-color: aqua;height: 100px;width: 1000px;margin-left: auto;margin-right: auto;margin-top: 20px;">
<div id="obj1" onmouseover="showinfo('obj1')" onmouseout="hideinfo('obj1')" style="margin-left: 260px;margin-top: 40px;float: left;width: 100px;text-align: center;">首页</div>
<div id="obj2" onmouseover="showinfo('obj2')" onmouseout="hideinfo('obj2')" style="float: left;width: 100px;margin-top: 40px;text-align: center;">新闻</div>
<div id="obj3" onmouseover="showinfo('obj3')" onmouseout="hideinfo('obj3')" style="float: left;width: 100px;margin-top: 40px;text-align: center;">反馈</div>
<div id="obj4" onmouseover="showinfo('obj4')" onmouseout="hideinfo('obj4')" style="float: left;width: 100px;margin-top: 40px;text-align: center;">图片</div>
<div id="obj5" onmouseover="showinfo('obj5')" onmouseout="hideinfo('obj5')" style="float: left;margin-top: 40px;text-align: center;">帮助</div>
</div>
<div style="width: 1000px;height: 400px;margin-left: auto;margin-right: auto;margin-top: 20px;">
<div style="float: left;width: 200px;height: 350px;background-color: aliceblue;">
<div id="obj6" onmouseover="showinfo('obj6')" onmouseout="hideinfo('obj6')" style="margin-top: 100px;text-align: center;">点赞</div>
<div id="obj7" onmouseover="showinfo('obj7')" onmouseout="hideinfo('obj7')" style="margin-top: 20px;text-align: center;">转载</div>
<div id="obj8" onmouseover="showinfo('obj8')" onmouseout="hideinfo('obj8')" style="margin-top: 20px;text-align: center;">发布</div>
<div id="obj9" onmouseover="showinfo('obj9')" onmouseout="hideinfo('obj9')" style="margin-top: 20px;text-align: center;">投诉</div>
<!-- <div style="width: 100px;float: left;margin-top: 50px;"><input style="width: 100px;" type="text" id="mytime" ></div>
<!-- <div style="float: left;width: 100px;margin-top: 50px;"><button style="width: 100px;" onclick="biao()">时钟</button></div> -->
<div id="mytime" style="background-color: darkcyan;margin-top: 50px;width: 200px;height: 50px;font-size: 13px;"></div>
</div>
<div style="float: left;width: 600px;height: 400px;background-color: bisque;">
<div id="text">
我与父亲不相见已二年余了，我最不能忘记的是他的背影 。
那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州打算跟着父亲奔丧回家。
到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半因为丧事，一半因为父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。
他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。
他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。
他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。
我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！
我说道：“爸爸，你走吧。”他往车外看了看说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。
我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。
他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子，这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的桔子往回走了。
过铁道时，他先将桔子散放在地上，自己慢慢爬下，再抱起桔子走。到这边时，我赶紧去搀他。他和我走到车上，将桔子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。
过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独立支持，做了许多大事。哪知老境却如此颓唐！他触目伤怀，自然情不能自已。
情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。
我北来后，他写了一信给我，信中说道：“我身体平安，惟膀子疼痛厉害，举箸提笔，诸多不便，大约大去之期不远矣。”
我读到此处，在晶莹的泪光中，又看见那肥胖的、青布棉袍黑布马褂的背影。唉！我不知何时再能与他相见！
</div>
<div id="pages" style="font-size:13px;"></div>
</div>
<div style="float: left;width: 200px;height: 400px;background-color: chocolate;">
<div>
<table width="200" height="400px" border="1">
<tr style="background-color: #000000;">
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr style="background-color: brown">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="background-color: darkseagreen;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
<div style="background-color: darkgray;margin-left: auto;margin-right: auto;margin-top: 20px;width: 1000px;height: 100px;">
<div style="font-weight: bold;font-size: 15px;margin-left: 200px;padding-top: 40px;float: left;">版权所有 若有侵权 请</div>
<div style="float: left;color: gainsboro;padding-top: 40px;margin-left: 10px;">与我们联系</div>
</div>
<script type="text/javascript">
//鼠标移动换色，放大
function showinfo(obj) {
document.getElementById(obj).style.background = "yellow";
document.getElementById(obj).style.fontSize = "20px";
}
function hideinfo(obj) {
document.getElementById(obj).style.background = "transparent";
document.getElementById(obj).style.fontSize = "15px";
}
//分页
var obj = document.getElementById("text"); //获取内容层
var pages = document.getElementById("pages"); //获取翻页层
window.onload = function() //重写窗体加载的事件
{
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量
pages.innerHTML = "<b>共" + allpages + "页</b>"; //输出页面数量
for (var i = 1; i <= allpages; i++) {
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">第" + i + "页</a> "; //循环输出第几页
}
}
function showPage(pageINdex) {
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度，输出指定的页
}
// function biao()
// {
// var time=new Date();
// var h=time.getHours();
// var m=time.getMinutes();
// var s=time.getSeconds();
// var timetext=document.getElementById("mytime");
// window.setTimeout(biao,500);
// timetext.value=h+":"+m+":"+s;
// }
//时间
setInterval("showTime(mytime)",1);
function showTime(time) {
var date = new Date(); //创建对象
var y = date.getFullYear(); //获取年份
var m = date.getMonth() + 1; //获取月份 返回0-11
var d = date.getDate(); // 获取日
var w = date.getDay(); //获取星期几 返回0-6 (0=星期天)
var ww = ' 星期' + '日一二三四五六'.charAt(new Date().getDay()); //星期几
var h = date.getHours(); //时
var minute = date.getMinutes() //分
var s = date.getSeconds(); //秒
var sss = date.getMilliseconds(); //毫秒
if (m < 10) {
m = "0" + m;
}
if (d < 10) {
d = "0" + d;
}
if (h < 10) {
h = "0" + h;
}
if (minute < 10) {
minute = "0" + minute;
}
if (s < 10) {
s = "0" + s;
}
if (sss < 10) {
sss = "00" + sss;
} else if (sss < 100) {
sss = "0" + sss;
}
document.getElementById("mytime").innerHTML = y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s + "." +
sss + " " + ww;
};
//登录验证
function checkUser(obj){
var user = obj.value;
var len=user.length;
if(user==""||len==0){
alert("输入的内容不能为空！");
}
else if((user.charAt(0)<"65" && user.charAt(0)> "90") || (user.charAt(0)<"97" && user.charAt(0)>"122"))
{
alert("首字母需为英文字符！");
}
// else
// {
// for( var i=0;i<len;i++){
// if(user.charAt(i)<"0" || user.charAt(i)>"9" || (user.charAt(i)<"65" && user.charAt(i)> "90")) || (user.charAt(i)<"97" || user.charAt(0)>"122")){
// alert("用户名只能由英文字符和数字组成");
// }
// }
// }
}
</script>
</body>
</html>
扫一扫
1311
12-11
05-31
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
