关于前端界面美化

1.关于web想说的一点点心里话
用好dreamweawer这个工具事情只成功了一小部分,但是会帮你省好多力气,最重要的还是要懂一些web知识,这样就成功了一大半。界面的友好性自然少不了js的支持,上网搜的过程中还是知道自己还有很多不懂的技术问题,项目做到现在,我也真的觉得增删改查连接数据库部分简直就是赤裸裸的八股文,就是界面真的太不听话让人很难受,我明明记得web老师夸过我,我的网页做出来不会是差的,现在想想,真的是丑爆了,还是要继续学习啊。

2.关于超链接
我觉得在实现界面跳转这个小功能来说,超链接真的太丑了,那四个伪类hover,link,active,visited个人觉得是件费力不讨好的事情,因为有的浏览器根本不支持。hover已经足够了。
四个属性:
在这里插入图片描述
。。。。。所以就记住_blank这一个属性就行了

单单实现界面的跳转,我觉得超链接很丑,默认带有下划线,我个人比较喜欢button标签:它太可爱了,

<button onclick="window.location.href='要跳转的路径名'">
按钮的名字
</button>

3.关于框架
只学html的时候并没有学习过框架,在动态网页中常常会遇到,在一个界面内想要显示的需要调用不同的java代码,说的通俗点,在一个页面内,想显示的内容需要用不同的sql语句才可以,在这种情况下,就需要用框架。特意去学习了框架的相关内容。一张图说明一下
在这里插入图片描述
这是比较常用的界面,大界面main.html可以写成如下(里面的控制属性可以网上搜着来学习,让界面更加接近真实):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大界面</title>
</head>
<frameset rows="24%,69%,7%" cols="*" border="0px">
        <frame src="top.html" scrolling="no" >
        <frameset cols="30%,70%" border="1px">
            <frame src="left.jsp" scrolling="no" >
            <frame src="right.jsp" scrolling="yes">
        </frameset>
     <frame src="bottom.jsp" scrolling="no" >
    </frameset>
     <noframes>
	 <body>浏览器不支持框架!</body>
</noframes> 
</html>

5.jsp传递参数
有三种方法:
(1)使用JSP的forward 或include动作,利用传参数子动作实现传递参数。
(2)在JSP页面或HTML页面中,利用表单传递参数。
(3)追加在网址后的参数传递或追加在超链接后面的参数。

实际上在我这次项目中常用的就是后两种方法,其中以表单传值比较常见。利用超链接传值比较受限,因为浏览器会限制传递的文件大小,但是在某些情况下相对于相较于表单还是有很大优势的

<a href="要跳转的路径?name=""">超链接文本</a>

例如:在当前界面下,想要跳转到另一个界面first.jsp中,我想当前界面的user.uid 传递过去,代码如下:

<a href="first.jsp?uid="user.uid"">点击这里跳转</a>

//first.jsp接收参数代码
<% =request.getParameter("uid");%>

显示的结果就是:123456


  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于Bootstrap框架的登录界面代码示例,附带了简单的UI美化效果: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <!-- 引入Bootstrap样式文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> <!-- 自定义样式 --> <style> body { background-color: #f5f5f5; } .login-container { margin-top: 100px; max-width: 400px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); background-color: #fff; } .login-header { background-color: #007bff; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #fff; font-size: 1.5rem; font-weight: bold; padding: 20px; } .login-form { padding: 20px; } .form-group { margin-bottom: 20px; } label { font-weight: bold; font-size: 1.1rem; } input[type="text"], input[type="password"] { border-radius: 3px; border: 1px solid #ccc; padding: 10px; font-size: 1.1rem; } button[type="submit"] { background-color: #007bff; color: #fff; border-radius: 3px; padding: 10px 20px; font-size: 1.1rem; border: none; cursor: pointer; } button[type="submit"]:hover { background-color: #0062cc; } </style> </head> <body> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="login-container"> <div class="login-header">Login</div> <div class="login-form"> <form> <div class="form-group"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username"> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password"> </div> <button type="submit" class="btn btn-primary btn-block">Submit</button> </form> </div> </div> </div> </div> </div> <!-- 引入Bootstrap JS文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> </body> </html> ``` 效果如下: ![登录界面效果图](https://i.loli.net/2021/10/12/DCzKZ2GM3fgdY9L.png)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值