weixin_38221608
buyax
采纳率53.3%
2017-11-28 02:05

前端页面问题,请大佬提点...我是真的不会~

10
已采纳

如题我后端的,一个页面改了改去,丑的不行,请教怎么修改~

图片说明

我努力修改成这样子了~

图片说明

 <%@ 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>
        &nbsp;
        <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">&nbsp;保存</a> 
            </td>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>
                <a id="returnHomeId" class="easyui-linkbutton" iconCls="icon-back" style="width: 75px" 
                href="${ctx}/rjs/weixin/menu/weiXinMenu">&nbsp;返回</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">&nbsp;确定</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 大小 他展示的时候都不变化,
请大佬指点下~

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

16条回答

  • qq_37524684 子幽 4年前
    <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>
    
    点赞 1 评论 复制链接分享
  • one_isi_all one_isi_all 4年前

    同做后台的。直接找现成的模板修修改改就可以了

    点赞 评论 复制链接分享
  • qq_39301452 qq_39301452 4年前

    尝试用百分比做,可以适应各种浏览器,也可以兼容

    点赞 评论 复制链接分享
  • sinat_28505133 一个猴子请来的救兵 4年前

    一看就是搞微信二级菜单

    点赞 评论 复制链接分享
  • SaintRen SaintRen 4年前

    你得先说你想要什么样的效果啊

    点赞 评论 复制链接分享
  • sinat_41200024 wendycwb 4年前

    引用一个框架,直接用里面的class就可以了,所有样式都有。

    点赞 评论 复制链接分享
  • greenmelod 小扣柴扉的春天 4年前

    用css style啊。

    点赞 评论 复制链接分享
  • cui929434 对吃没兴趣 4年前

    用插件,引入css样式

    点赞 评论 复制链接分享
  • furthur furthur 4年前

    设置行高lineheight 再把width设置到具体控件上,并且不要用固定的像素值,用百分比,如width=100%

    点赞 评论 复制链接分享
  • hillsalami hillsalami 4年前

    加上style试一下

    点赞 评论 复制链接分享
  • qq_15365411 迁于乔木 4年前

    你的页面太乱了,整体的布局都不对,标准的
    <!DOCTYPE html>



    Title



    点赞 评论 复制链接分享
  • shlwb0 shlwb0 4年前

    写两个分别的类 css 这样看起来整齐点

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 4年前

    控件的width你要设置到控件上,你设置到td上干嘛

    点赞 评论 复制链接分享
  • FlyAngle1 我是一只小小小小小鸟 4年前

    width调的话,加到内层标签上,如span或者input

    点赞 评论 复制链接分享
  • qq_37524684 子幽 4年前

    看了一下你的代码,你是要改td的吧,表格元素里你改一个td会影响他所在的一列的,所以你给每一个都单独设置width是不起作用的

    点赞 评论 复制链接分享
  • YANLONN YANLONN 4年前

    加上style试一下,再不改变的话,打开浏览器的开发者工具进行调试,推荐google,看影响因素,就能调节了,可能原因格式问题,权重问题。

    点赞 评论 复制链接分享

相关推荐