前端页面问题,请大佬提点...我是真的不会~
如题我后端的,一个页面改了改去,丑的不行,请教怎么修改~
我努力修改成这样子了~
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<script type="text/javascript" src="${ctx}/static/js/validation.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.form.js"></script>
<script src="${ctx}/static/kindeditor-4.1.10/kindeditor-all-min.js"
type="text/javascript"></script>
<script src="${ctx}/static/kindeditor-4.1.10/lang/zh_CN.js"
type="text/javascript"></script>
<div id="descriptionDiv" style="margin: 2%; width: 98%">
<!-- <tr style="height: 30px">
<td colspan="2"></td>
</tr> -->
<br>
<tr style="height: 20px">
<td><span class="labelFont">菜单名称:</span></td>
<td><input type="text" id="menuName" name=""
maxlength="20" style="width: 205px; height: 20px;"/></td>
</tr>
<br/>
<tr style="height: 20px">
<td><span class="labelFont">上级菜单:</span></td>
<td><input class="easyui-combobox" id="parentName"
style="width: 218px; height: 30px;"
data-options="valueField:'parentId', textField:'parentName'" /></td>
</tr>
<br/>
<br/>
<tr style="height: 20px">
<td><span class="labelFont">type类型:</span></td>
<td><select class="easyui-combobox" id="type" style="width: 218px; height: 30px;">
<option name="type" value="sub_button">(一级)sub_button</option>
<option name="type" value="view">(二级)view</option>
<option name="type" value="click">(二级)click</option>
</select></td>
</tr>
<br/>
<br/>
<tr style="height: 20px">
<td><span class="labelFont">key的值:</span></td>
<td><input type="text" id="keyValue" name=""
maxlength="20" style="width: 205px; height: 20px;"/></td>
</tr>
<br/>
<tr style="height: 20px">
<td><span class="labelFont">菜单等级:</span></td>
<td><select class="easyui-combobox" id="grade" style="width: 218px; height: 30px;">
<option name="grade" value="1" selected="selected">1级菜单</option>
<option name="grade" value="2">2级菜单</option>
</select></td>
</tr>
<br/>
<br/>
<tr style="height: 20px">
<td><span class="labelFont">跳转地址:</span></td>
<td><input type="text" id="url" name="url"
maxlength="250" style="width: 205px; height: 20px;"/>
</td>
<td>
<font color="red">注意：正确url请加协议（https://或者http://）</font>
</td>
</tr>
<br/>
<!-- <tr style="height: 20px">
<td colspan="2"></td>
</tr> -->
<tr>
<td><a id="saveBtn" class="easyui-linkbutton"
iconCls="icon-save" style="width: 75px"> 保存</a>
</td>
<td>
<a id="returnHomeId" class="easyui-linkbutton" iconCls="icon-back" style="width: 75px"
href="${ctx}/rjs/weixin/menu/weiXinMenu"> 返回</a>
</td>
</tr>
</div>
<div id="successDialog" class="easyui-dialog" title="提示"
data-options="resizable:true,minimizable:false,collapsible:false,maximizable:false,closed:true"
fit="false" style="width: 300px; height: 100px;">
<i style="margin-top: 30px">保存成功</i><br /> <a
class="easyui-linkbutton" iconCls="icon-ok"
style="width: 75px; margin: 0px auto"
href="${ctx}/rjs/weixin/menu/weiXinMenu"> 确定</a>
</div>
<script type="text/javascript">
//文档加载完成
$(document).ready(function() {
loadStatus();
$("#saveBtn").click(function() {
loadStatus();
});
});
$(document).ready(function() {
$("#saveBtn").click(function() {
var menuName = $("#menuName").val();
var parentName = $('#parentName').combobox('getText');
var parentId = $('#parentName').combobox('getValue');
var type = $('#type').combobox('getValue');
var keyValue = $("#keyValue").val();
var grade = $('#grade').combobox('getValue');
var url = $("#url").val();
if (menuName == "") {
$.messager.alert("消息", "请填写菜单名");
return;
}
if (type == "") {
$.messager.alert("消息", "请选择type类型");
return;
}
if (grade == "") {
$.messager.alert("消息", "请选择菜单等级");
return;
}
if ($.trim($("input[name=url]").val()) != ""){
var fwdurl=$("input[name=url]").val();
var res=!!fwdurl.match(/^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/);
if(!res){
$.messager.alert("消息", "请输入正确的链接地址");
return;
}
}
el
$.ajax({
url : "${ctx}/rjs/weixin/menu/insertMenu",
type : "post",
async : false,
cache : false,
data : {
menuName : menuName,
parentId : parentId,
type : type,
keyValue : keyValue,
grade : grade,
url : url
},
dataType : "json",
success : function(resp) {
if (resp.status == 1) {
$("#successDialog").dialog("open");
} else {
$.messager.alert("消息", resp.message);
}
},
error : function(jqXHR, textStatus, errorThrown) {
if (jqXHR.getResponseHeader("sessionStatus") != "timeout") {
if ($("#flagSpan").val() == 1) {
$.messager.alert("消息", "添加菜单失败，请稍后再试");
} else {
$.messager.alert("消息", "跳转类型或排序错误!");
}
}
}
})
});
});
//上级名称下拉
function loadStatus() {
$.ajax({
url : "${ctx}/rjs/weixin/menu/getParentName",
type : "post",
async : false,
cache : false,
dataType : "json",
success : function(resp) {
if (resp.data != null && resp.status == "1") {
var data = resp.data;
var fdata = [];
for (var i = 0; i < data.length; i++) {
fdata.push(data[i]);
}
$("#parentName").combobox("loadData", fdata);
}
},
error : function() {
$.messager.alert("错误", "请求失败，请稍后再试");
}
});
}
</script>
不知道为什么,怎么折腾里面的width 大小 他展示的时候都不变化,
请大佬指点下~
<style>
table{
background-color: #000
}
td{
background: #fff;
}
td input{
height:100%;
width:100%;
border:0px;
}
</style>
<!--上面的加载head里，或者写下css里，这是一些演示-->
<table>
<tr>
<td width="300">此处加了一个，，该列全部跟着变</td><td><input type="text" name="name" ></td><td>注释、提示</td>
</tr>
<tr>
<td width="200">此处又加了一个，无变化</td><td rowspan="2"><input type="text" name="name" value="这儿合并了此列的两行，合并时删掉下面的"></td><td>注释、提示</td>
</tr>
<tr>
<td width="400">此处再加了一个，他是跟随宽度最大的一起变</td><td>注释、提示</td>
</tr>
<tr>
<td>测试测试</td><td><input type="text" name="name" ></td><td>注释、提示</td>
</tr>
<tr>
<td>测试测试</td><td colspan="2"><input type="text" name="name" value="这儿合并了此行的后两列，合并时删掉后面的"></td>
</tr>
</table>
加上style试一下，再不改变的话，打开浏览器的开发者工具进行调试，推荐google，看影响因素，就能调节了，可能原因格式问题，权重问题。
看了一下你的代码，你是要改td的吧，表格元素里你改一个td会影响他所在的一列的,所以你给每一个都单独设置width是不起作用的
width调的话，加到内层标签上，如span或者input
控件的width你要设置到控件上，你设置到td上干嘛
写两个分别的类 css 这样看起来整齐点
你的页面太乱了，整体的布局都不对，标准的
<!DOCTYPE html>
Title
加上style试一下
设置行高lineheight 再把width设置到具体控件上，并且不要用固定的像素值，用百分比，如width=100%
用插件，引入css样式
用css style啊。
引用一个框架，直接用里面的class就可以了，所有样式都有。
你得先说你想要什么样的效果啊
一看就是搞微信二级菜单
尝试用百分比做,可以适应各种浏览器,也可以兼容
同做后台的。直接找现成的模板修修改改就可以了