Please tell me how to display pages on the web_html/css

As shown in the picture, I want to fill in the information in the text box or drop-down box below:

Then when previewing, it will look like this:

I don’t know how this is achieved: you can use a plug-in or edit it yourself!
Just fill in the information on a general resume website, and then preview or export it in this form!
Please tell me some methods or tips! Very O(∩_∩)O Thank you

Reply to the discussion (solution)

Is there any trick to this, but there is an edit page, edit The page has some editable controls, and then the form is submitted (edited or added)

There is also a display information page. This kind of page only needs to get the information from the library based on the ID and display it on the page. It can also be output directly on the page

Modifying information is just a normal page for data submission, which can be achieved with js and jquery
Previewing resume information is just reading data from the database and displaying it

Is there any trick to this? It’s just that there is an editing page. The editing page has some editable controls, and then the form is submitted (edited or added)

There is also a display information page, this kind of page You only need to get the information from the library based on the ID and display it on the page. You can also directly output it on the page. It is easy, but what about the format? Can I find that template above for output?

Modifying information is just a general page for data submission, which can be achieved with js and jquery
Previewing resume information is just reading data from the database and displaying it. What I need is the displayed template. I know when outputting It's very easy. You can take it out from the database and put it in several frames, but it's not beautiful. I just want to put the data obtained from the database into a good template, just like the second picture. These formats are much better than simple boxes! Is there any demo or website that can achieve this effect?

Modifying information is just a general page for data submission, which can be achieved with js and jquery
Previewing resume information is just reading the data from the database and displaying it. What I need is the display template, I I know that the output is very easy. It can be taken out from the database and placed in several frames, but this is not beautiful. I just want to put the data obtained from the database into a good template, and I want the second picture The pictures are the same, and the layout formats are much better than simple boxes! Is there any demo or website that can achieve this effect?
Can you write css? Just lay out the div css yourself

Modifying information is just a normal page for data submission. It can be achieved with js and jquery
Previewing resume information is just reading data from the database for display What I need is the displayed template. I know it is very easy to output. I can take it out of the database and put it in several frames, but this is not beautiful. I just want to put the data obtained from the database into In a good template, just like the second picture, the layout formats are much better than simple boxes! Is there any demo or website that can achieve this effect?
Can you write css? Just lay out the div css yourself. I know a little bit, but I don’t write much. I prefer to have controls. Please recommend one! Thank you very much, O(∩_∩)O~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>简历预览</title><meta name="description" content="前程无忧为企业提供人才招聘、猎头、培训、测评和人事外包在内的全方位的人力资源服务，帮助个人求职者与企业搭建最佳的人才招募和人才培养渠道。"><meta name="keywords" content="人才，招聘，简历，工作，面试，薪酬，跳槽，猎头，培训，测评，人事"><meta name="robots" content="all"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /></head><body bgcolor="#FFFFFF"><table width="778" border="0" cellpadding="0" align="center">  <tr align="right">    <td style="padding-right:20px;">      <img src="http://img01.51jobcdn.com/im/2009/cv/print_ico.gif" align="absmiddle" /><a style="text-decoration:none;color:#333333;" href="javascript:window.print();">打印</a>  <img src="http://img01.51jobcdn.com/im/2009/cv/daochu_ico.gif" align="absmiddle" /><a style="text-decoration:none;color:#333333;" href="javascript:cv_export('0','http://my.51job.com','83885741');">导出</a>    </td>  </tr></table><style>					table {						FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: '宋体'					}					td {						FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: '宋体';					}					P {						FONT-SIZE: 12px; LINE-HEIGHT: 150%; FONT-FAMILY: '宋体'					}					.blue {						COLOR: #256fb8					}					A:link {						COLOR: #296ebb; TEXT-DECORATION: none					}					A:visited {						COLOR: black; TEXT-DECORATION: none					}					.cvtitle {font-weight:700; color:#256fb8; font-size:14px; padding-top:5px;}					.blue1 {	COLOR: #ff7400					}					.blue1 {color:#256fb8;}					.blue2 {	COLOR: #ff7400					}					.font14 {font-size:14px;}					.graybutton {color:#676767;}					.v_table001{	width:710px;	line-height:22px;	margin:0 0 10px 10px;	padding:0px;	text-align:left;	}				</style><table width="778" border="0" cellpadding="0" align="center"><tr><td><table style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px auto; BORDER-RIGHT-WIDTH: 0px" cellspacing="0" cellpadding="0" width="760" align="center" border="0"><tbody><tr><td style="BORDER: #93B0ED 2px solid;" valign="top" colspan="2"><table cellSpacing="0" cellpadding="0" width="97%" align="center" border="0" style=" PADDING-RIGHT: 0px; PADDING-LEFT: 0px;  PADDING-BOTTOM: 0px; MARGIN: 6px auto;  LINE-HEIGHT: 22px; PADDING-TOP: 6px; "><tr><td align="left" valign="top" class="text_left" width="80px"><span style="height:10px;font-weight:bold;">简历关键字：</span></td><td align="left" valign="top" class="text_left">php mysql javascript</td></tr></table><table cellSpacing="0" cellpadding="0" width="760" align="center" border="0"><tbody><tr><td valign="top"><table style="BORDER: #3076BC 1px solid; PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #F5FAFE; PADDING-BOTTOM: 0px; MARGIN: 8px auto;  LINE-HEIGHT: 22px; PADDING-TOP: 8px; " cellspacing="0" cellPadding="0" width="97%" align="center" border="0"><tbody><tr><td style="BORDER-BOTTOM: #88b4e0 1px dashed" height="30"><span style="FLOAT: right"><img height="1" src="http://img01.51jobcdn.com/im/2009/resumetemplate/space.gif" width="12" border="0"/></span><span style="FONT-SIZE: 25px; LINE-HEIGHT: 30px; HEIGHT: 30px"><strong>萧敬腾</strong><a target="_blank" href="http://my.51job.com/payservice/verify/introduce.php" onfocus="blur();" title="您未通过诚信认证，通过专业认证后将点亮该图标"><img src="http://img01.51jobcdn.com/im/2009/verify/ico_gou.gif" style="position:relative;top:4px" border="0"/></a></span><img height="1" src="http://img01.51jobcdn.com/im/2009/resumetemplate/space.gif" width="15" border="0"/></td></tr><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="26" colspan="4"><span class="blue1"><b>一年以上工作经验  |  男  |  25岁(2006年3月16日)																			   |  未婚  |  170cm  |  群众</b></span></td><td width="17%" rowspan="6" align="center" valign="middle"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/resume_match_manpic.gif" width="90" height="110"/><span>										                 (ID:83885741)										              </span></td></tr><tr><td width="10%" height="20">居住地：</td><td width="42%" height="20">杭州-江干区</td><td width="11%" height="20"/><td width="20%" height="20"/></tr><tr><td height="20">电　话：</td><td height="20" colspan="3">136123123123（手机）							</td></tr><tr><td height="20">E-mail：</td><td height="20" colspan="3"><a href= "mailto:787574729@qq.com																	   " class="blue1" >																	abx@qq.com																	  </a>																	<span id="qqstid"><img src="http://wpa.qq.com/pa?p=2:787574729:45" align="absmiddle"  /></span></td></tr></table></td></tr></tbody></table><table width="97%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="45%" colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:8px auto;line-height:22px;padding:0 0 0 8px;"><tr><td colspan="2"><span class="blue" style="font-size:14px;"><b>最近工作</b></span><span style="color:#676767;"><b>                          	[ 2年]                          </b></span></td></tr><tr><td width="59">公　司：</td><td width="230">XXX有限公司</td></tr><tr><td>行　业：</td><td>互联网/电子商务</td></tr><tr><td>职　位：</td><td>php程序员</td></tr></table></td><td width="43" align="center"/><td width="49%" colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:8px auto;line-height:22px;padding:0 0 0 10px;"><tr><td colspan="2"><span class="blue" style="font-size:14px;"><b>最高学历</b></span></td></tr><tr><td width="59">学　历：</td><td width="230">本科</td></tr><tr><td>专　业：</td><td>信息安全</td></tr><tr><td height="22">学　校：</td><td>XXX大学</td></tr></table></td></tr></table><hr/><table width="97%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:8px auto;line-height:20px;padding:0 0 0 8px;"/><table width="97%" border="0" align="center" cellspacing="0" cellpadding="0"><tr><td align="left" valign="middle" class="cvtitle">自我评价</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td id="Cur_Val" valign="top">本人对工作认真负责，耐吃苦，遇到困难不畏惧，具有独立分析问题和解决问题的能力、强烈的责任感和很好的团队合作精神，具有很强的自学能力，能够承受工作压力，均虚心请教学习从而达到工作目标，处事冷静，稳重。性格开朗，活泼，对待事物抱有积极向上的态度，有一定的沟通组织能力、擅于与人协调。希望可以得到这次机会，发挥自己应有的水平为贵公司效劳</td></tr><tr><td height="10" align="left" valign="middle"/></tr></table><table cellSpacing="0" cellPadding="0" width="97%" align="center" border="0"><tbody><tr><td class="cvtitle" vAlign="center" align="left">求职意向</td></tr><tr><td vAlign="center" align="middle" height="4"><img height="4" src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" style="padding-left: 1px"/></td></tr><tr><td vAlign="center" align="left" height="10"/></tr><tr><td vAlign="center" align="left"><table class="table_set" cellSpacing="0" cellPadding="0" width="100%" border="0"><tbody><tr><td class="text_left">到岗时间： 	                                	<span class="text" style="PADDING-LEFT: 10px">一周以内</span></td></tr><tr><td class="text_left">					                          工作性质：					                          <span class="text" style="padding-left:10px;">全职</span></td></tr><tr><td class="text_left">					                          目标地点：					                          <span class="text" style="padding-left:10px;">杭州</span></td></tr><tr><td class="text_left">											  						期望月薪：																		<span class="text" style="padding-left:10px;">面议/月</span></td></tr><tr><td class="text_left">					                          目标职能：					                          <span class="text" style="padding-left:10px;">软件工程师</span></td></tr></tbody></table></td></tr><tr><td vAlign="center" align="left" height="20"/></tr></tbody></table>

Copy after login

<table width="97%" border="0" align="center" cellspacing="0" cellpadding="0"><tr><td align="left" valign="middle" class="cvtitle">工作经验</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr><td colspan="2" class="text_left">2012      /3--至今：XXX技有限公司（少于50人）            [ 2年]          </td></tr><tr><td width="22%" class="text_left">所属行业：</td><td width="78%" class="text">互联网/电子商务</td></tr><tr><td class="text_left"><b>技术部</b></td><td class="text"><b>php程序员</b></td></tr><tr><td id="Cur_Val" colspan="2" valign="top">负责XXX项目</td></tr><tr><td colspan="2" align="center" valign="middle"><hr size="1" noshade="noshade"/></td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">项目经验</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr><td colspan="2" class="text_left">2012      /3--至今：XXX工作</td></tr><tr><td class="text_left" valign="top">软件环境：</td><td class="text">Apache</td></tr><tr><td class="text_left" valign="top"> 硬件环境：</td><td class="text">window</td></tr><tr><td class="text_left" valign="top"> 开发工具：</td><td class="text">PHP+MySQL+Apache</td></tr><tr><td width="16%" class="text_left" valign="top">项目描述：</td><td width="84%" id="Cur_Val" valign="top">能力超强</td></tr><tr><td class="text_left" valign="top">责任描述：</td><td id="Cur_Val" valign="top">负责整个网站的前期设计工作</td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">教育经历</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr><td width="26%" class="text_left">2007      /9--2011      /7</td><td width="30%" class="text">XXX大学</td><td width="30%" class="text">信息安全</td><td width="14%" class="text">本科</td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">语言能力</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table border="0" cellspacing="0" cellpadding="0" style="width:100%"><tr><td style="width:85%"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr height="25"><td width="130" class="text_left">英语（良好）		  </td><td class="text">		      听说（一般），读写（良好）		    </td></tr></table></td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">IT    技能</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr><td width="30%" class="text_left">技能名称</td><td width="30%" class="text">熟练程度</td><td width="25%" class="text">使用时间</td><td width="15%" class="text"/></tr><tr><td colspan="4" align="center" valign="middle"><hr size="1" noshade="noshade"/></td></tr><tr><td class="text_left">HTML</td><td class="text">熟练</td><td class="text">24月          </td><td rowspan="7"> </td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">其他信息</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"/></tr><tr><td align="left" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_set"><tr><td width="16%" id="Cur_Val" valign="top">特长：<BR>              </td><td width="86%" id="Cur_Val">熟悉使用div+CSS、JavaScript、ajax、jQuery、HTML及DHTML等多语言编写能力<BR>熟悉MS SQL Server、mysql数据库管理系统基本操作及维护<BR>了解linux操作系统，会使用linux命令，一般shell编程<BR>PHP+MySQL+Apache开发程序、有一定的良好php编程能力</td></tr><tr><td colspan="2" align="center" valign="middle"><hr size="1" noshade="noshade"/></td></tr><tr><td width="16%" id="Cur_Val" valign="top">推荐信：<BR>              </td><td width="86%" id="Cur_Val">本人对工作认真负责，耐吃苦，遇到困难不畏惧，具有独立分析问题和解决问题的能力、强烈的责任感和很好的团队合作精神，具有很强的自学能力，能够承受工作压力，均虚心请教学习从而达到工作目标，处事冷静，稳重。性格开朗，活泼，对待事物抱有积极向上的态度，有一定的沟通组织能力、擅于与人协调。希望可以得到这次机会，发挥自己应有的水平为贵公司效劳</td></tr></table></td></tr><tr><td height="20" align="left" valign="middle"/></tr><tr><td align="left" valign="middle" class="cvtitle">附 件</td></tr><tr><td align="middle" valign="middle" height="4"><img src="http://img01.51jobcdn.com/im/2009/resumetemplate/line1_1.gif" width="100%" height="4" style="padding-left: 1px"/></td></tr><tr><td height="10" align="left" valign="middle"><table border="0" cellspacing="0" cellpadding="0" style="width:738px;line-height:22px;" class="v_table001"><tr><td valign="middle" rowspan="3"><img src="http://img01.51jobcdn.com/im/2009/cv/icon_51job.gif" width="44" height="34"/></td><td style="width:600px" valign="top">作品</td></tr><tr><td id="Cur_Val" valign="top">XXX作品部分展示</td></tr><tr><td valign="top">www.baidu.com</td></tr><tr><td colspan="2" valign="top"><HR size="1" width="100%" style="color:#e0e0e0"/></td></tr><tr><td valign="middle" rowspan="3"><img src="http://img01.51jobcdn.com/im/2009/cv/icon_51job.gif" width="44" height="34"/></td><td style="width:600px" valign="top">XXX网站</td></tr><tr><td id="Cur_Val" valign="top">XXX作品部分展示</td></tr><tr><td valign="top">www.baidu.com</td></tr></table></td></tr></table></td></tr></tbody></table></td></tr><tr style="HEIGHT: 10px"><td style="HEIGHT: 10px" colSpan="2"/></tr><tr><td style="WIDTH: 100%; HEIGHT: 20px" align="middle" colSpan="2"/></tr></tbody></table></td></tr></table></body></html>

Copy after login

You can change the page you copied from 51job

The page that was taken from 51job. You can change it yourself. Thank you very much. Could it be that you right-click - "View source code"? This is a completely written page. I feel that if I do it myself, the workload will be a bit heavy. Do you know any controls? For example, jQuery or something?

This kind of thing is originally determined according to the needs, including the style and layout. If you want to be quick, then go to the Internet to buy ready-made ones, but whether the style and layout of others are what you want is another matter

This kind of page has no workload at all. It just implements a simple layout. If it doesn’t work, you can consider using a table to pile it up. After all, the table is relatively simple. Maybe the focus of the work lies in how to interact with the database. Aspects

This kind of thing is originally determined according to needs, including style and layout. If you want to be quick, go to the Internet to buy ready-made products, but whether the style and layout of others are what you want is another matter.

This kind of page has no workload at all. It just implements a simple layout. If it doesn't work, you can consider using a table to pile it up. After all, the table is relatively simple. Maybe the focus of the work lies in how to communicate with the database. In terms of interaction, is there any way to use controls to create a pop-up effect? (There should be, I just don’t know how to get it!)

What are controls?

Page display must first be laid out. The layout requires html css

The display effect on the page is implemented using js scripts, such as pop-up windows, drag and drop, and animation effects

You can use jquery to achieve certain so-called effects http://jqueryui.com/toggle/

What is a control?

Page display must first be laid out. The layout requires html css

The display effect on the page is implemented using js scripts, such as pop-up windows, drag and drop, and animation effects

You can use jquery to achieve certain so-called effects http://jqueryui.com/toggle/ For example, a text editing tool can be embedded in a certain section of the page, so that users can edit text in a variety of ways. Editing of pictures, etc., the role of this control insertion! It's possible with jQuery, but it's just not integrated!

How come there are ready-made controls for this? They are all written by the css div myself

If you need any functional controls, you can find them online

For example, the edit box control, a typical example ckeditor address http://ckeditor.com/ demo

Under normal circumstances, we can use the form elements in HTML to complete it. If you have special needs, you can find some online encapsulation controls to implement it, but many of them are extensions of jquery.

How come there are ready-made controls? They are all written by the css div myself

With so many answers, does the author still not want to give points for posting? Sigh... I was passing by while studying

I don’t understand why this real-life template needs to be made with controls. It’s just some text display, and no controls are used at all. If you don’t know how to layout, then use Dreamweaver to layout well. Otherwise, you can write it by hand, use div layout or table layout. The one-by-one layout can be realized with ulli.

With so many answers, does the author still not want to give points for posting? Hey... passing by while studying, bad guy! !

I don’t understand why this real-life template needs to be made with controls. It’s just some text display and doesn’t use controls at all. If you don’t know how to layout, then use Dreamweaver to layout well. Otherwise, you can write it by hand, use div layout or table layout. The one-by-one layout can be realized with ulli. It's because I don't have enough time and I'm not very familiar with UI writing that I turn to simple and fast controls!

With so many answers, does the author still not want to give points for posting? Hey... passing by while studying, bad guy! !
Haha, actually I don’t want to. But with so many answers, I think many of them are wonderful. Points are given as a reward for these people.

With so many answers, does the poster still not want to give points? Hey... passing by while studying, bad guy! !
Haha, actually I don’t want to. But with so many answers, I think many of them are wonderful. Points are given as a reward for these people. If you give points early, you will kill people and answer them!
Actually, yours is really simple. I didn't think there was anything.
div css database is done.
No matter what the page you store looks like, as long as your database table is built, it will be fine.
When outputting, control the style of the page and output the corresponding items, and it will be OK. This is what I am currently doing. A certain expert above also said that you can directly apply the template of a certain website and then fill in the data! I would like to ask if there is such a form of pop-up box? There should be some, but I forgot, please let me know! 3 is possible!

You can try to pop up an editing page

If it is a pop-up box, you can refer to the example

If it is a pop-up page, you can refer to iframe

You can try to pop up an editing page

If it is a pop-up box, you can refer to the example

If it is a pop-up page, you can refer to iframe. Thank you very much. I will definitely learn it when I have time. ,O(∩_∩)OThank you

Please tell me how to display pages on the web_html/css_WEB-ITnose

Reply to the discussion (solution)