怎么才能达到这种效果
先看源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title></title>
</head>
<body>
<div>
<h1>春</h1>
<p>盼望着,盼望着,东风来了,春天的脚步近了,一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。
小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回
迷藏。风轻悄悄的,草绵软软的。</p>
<p>桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已
经满是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,
像眼睛,像星星,还眨呀眨的。</p>
</div>
</body>
</html>
div{
height: 600pxwidth: 416px /*定义盒子高度和宽度*/
border: solid 1px red /*border-width, border-style,和border-color.*/
padding: 115px 4em 0
/*为了避免背景图像重复平铺到边框区域,应禁止他平铺*/
background: url(../img/p3.jpg) no-repeat
/*设计背景图像的定位坐标点为元素边框上的左上角*/
background-origin: border-box /*相对位置*/
background-size: cover
overflow: hidden /*overflow属性指定如果内容溢出一个元素的框,会发生什么。*/
/*visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/
}
/*定义标题*/
div h1{
font-size: 18pxfont-family: "幼圆"
text-align: center
}
/*定义文章*/
div p{
text-indent: 2em/*text-indent 属性规定文本块中首行文本的缩进*/
line-height: 2em/*行高*/
font-family: "楷体"
margin-bottom: 2em
}
后面的细节慢慢挑出来演示一下。
保存是要用ajax存储到数据库的。我只给你写了一个转换控件的小例子,试试看吧。<!DOCTYPE html>
<html>
<head>
<title>蝴蝶飞起来了</title>
<style type="text/css">
td,.ipt{
width:50px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function edit(obj){
obj=$(obj).parent().parent()
obj.children('td:not(:last)').each(function(){
var self=$(this)
self.html('<input type="text" value="'+self.html()+'" class="ipt" />')
})
obj.children('td:last').html('<a href="#" onclick="save(this)">保存</a>')
obj=null
}
function save(obj){
obj=$(obj).parent().parent()
obj.children('td:not(:last)').each(function(){
var self=$(this)
self.html(self.children('input[class="ipt"]').val())
})
obj.children('td:last').html('<a href="#" onclick="edit(this)">更改</a>')
obj=null
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>单位</th>
<th>部门</th>
<th>职位</th>
<th>手机</th>
<th>Email</th>
<th>操作</th>
</tr>
<tr>
<td>AAAA</td>
<td>BBBB</td>
<td>CCCC</td>
<td>DDDD</td>
<td>EEEE</td>
<td>FFFF</td>
<td><a href="#" onclick="edit(this)">更改</a></td>
</tr>
</table>
</body>
</html>
这是以前帮一个朋友解决的,你参考一下吧。<!DOCTYPE html>
<html>
<head>
<title>蝴蝶飞起来了</title>
<style type="text/css">
td,.ipt{
width:50px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var col=['p1','p2','p3','p4','p5','p6']
function edit(obj){
obj=$(obj).parent().parent()
obj.children('td:not(:last)').each(function(i){
var self=$(this)
self.html('<input type="text" id="'+col[i]+'" name="'+col[i]+'" value="'+self.html()+'" class="ipt" />')
})
obj.children('td:last').html('<a href="#" onclick="save(this)">保存</a>')
obj=null
}
function save(obj){
$.post('update.action',{
'p1': $('#p1').val(),
'p2': $('#p2').val(),
'p3': $('#p3').val(),
'p4': $('#p4').val(),
'p5': $('#p5').val(),
'p6': $('#p6').val()
},function(){
obj=$(obj).parent().parent()
obj.children('td:not(:last)').each(function(){
var self=$(this)
self.html(self.children('input[class="ipt"]').val())
})
obj.children('td:last').html('<a href="#" onclick="edit(this)">更改</a>')
obj=null
})
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>单位</th>
<th>部门</th>
<th>职位</th>
<th>手机</th>
<th>Email</th>
<th>操作</th>
</tr>
<tr>
<td>AAAA</td>
<td>BBBB</td>
<td>CCCC</td>
<td>DDDD</td>
<td>EEEE</td>
<td>FFFF</td>
<td><a href="#" onclick="edit(this)">更改</a></td>
</tr>
</table>
</body>
</html>