Java Web开发–网页篇[5]–样式

网页不仅要显示内容,还要美观,比如设置网页的背景色、字体的颜色、字体的大小。如果要给不同部分设置不同的样式,需要两个标签<div><span>
这两个标签没有具体的含义,只是用来区分区域的,比如现在我想设计一个网页,上面是标题栏“猫哥的文章大全”,左边是菜单栏“文章一、文章二、文章三”,右边是具体的内容栏即“每篇文章具体的内容”。
这样的话,可以设计为

<html>
<body>
<div id="title">猫哥的文章
</div>
<div id="menu">
    <span>文章一</span><span>文章二</span><span>文章三</span>
</div>
<div id="content">
    这篇文章很精彩
</div>
</body>
</html>

运行一下代码,就发现了,<div><span>虽然都是包裹内容的标签,但是<div>前后自动换行,<span>前后不换行,一般来说分区域的时候都是需要换行的,所以<div>标签很火,经常在市面上看到相关字样的教程,其实<div>标签就是网页上用来划分区域的标签而已,具备了一个换行的功能。

好了,既然是要划分区域,那么区域的位置和样式肯定要有区别(没区别划分区域干嘛?),那这个位置和样式就要借助CSS来实现了!CSS也是一种语言,用来描述网页样式的(样式的意思就是外观),举个例子先,它一般借助html标签的style属性来实现。例如:
<div id="title" style="color:red;font-size:30px;">猫哥的文章</div>
style属性中可以写多个样式,中间用分号分割即可。

到了这一句,有两个挺大的问题,第一,怎么有个id=“title”,id是干嘛的?第二,感觉代码好乱,不舒服。

解释下,id是标签的唯一标识,之前也说过name是标签的名字,可以这么理解,id就是标签的身份证号、name就是标签的姓名。CSS可以通过id找到唯一一个标签,然后设置这个标签的样式。
这句加粗字体的话,说明了第二个问题的解决办法。可以用下面的代码实现与<div id="title" style="color:red;font-size:30px;">猫哥的文章</div>同样的效果。

<html>
<head>
<style type="text/css">
	#title{color:red;font-size:30px;}
</style>
</head>
<body>
<div id="title"">猫哥的文章</div>
<div id="menu">
    <span>文章一</span><span>文章二</span><span>文章三</span>
</div>
<div id="content">
    这篇文章很精彩
</div>
</body>
</html>

解释下,部分只有区域(div)和内容,所有跟样式、显示相关的放在<head>标签下的<style type="text/css">标签中,其中type=“text/css”,表示使用css语言来描述style(样式)。
#title中,#表示按id选取,所以是选取id="title"的标签,然后{color:red;font-size:30px;}中,大括号表示前面选取的样式在大括号中设定。然后就是颜色的为红色、字体大小为30px,以:分割设定内容和设定值。

其实,在html中也有一些描述样式的标签,但是建议统统忽略,html表现主题内容和分区,具体分区的位置和区域内的样式,交给css吧。这样也有个很大的好处,程序员写html,css神马的,就交给美工吧!(在现实中,有很多极端,有的公司程序员包打天下,前端到后端到数据库全干了,有的公司html和css是美工的,程序员纯后端,不管哪种,都应该了解html、了解css,猫哥属于能读懂html和css,能写,但是要弄得漂亮美观,这个还需要2亿多个艺术细胞啊)。

至此,我们把这个网页分为了3部分,还设置了标题部分的颜色和字体,但是我们想要的,标题栏在上面、左边菜单栏、右边内容,还没实现,这就牵扯到布局啦,布局实际上也属于样子方面的,可以依赖CSS实现,在下一篇手记再实现吧!


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
在MyEclipse下创建servlet,代码如下: package servlets; import java.io.IOException; import java.io.PrintWriter; import java.util.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.sql.*; public class LoginServlet extends HttpServlet { private String name; private String pass; /** * Constructor of the object. */ public LoginServlet() { super(); } /** * Destruction of the servlet. <br> */ public void destroy() { super.destroy(); // Just puts "destroy" string in log // Put your code here } /** * The doPost method of the servlet. <br> * * This method is called when a form has its tag value method equals to post. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.name=request.getParameter("account"); this.pass=request.getParameter("password"); PrintWriter out=response.getWriter(); //驱动程序名 String driverName="oracle.jdbc.driver.oracleDriver"; //数据库用户名 String userName="system"; //密码 String userPasswd="zmh"; //数据库名 String dbName="XE"; //表名 String tableName="lib_user"; //联结字符串 String url="jdbc:oracle:thin:@localhost:1512:XE"; try { Class.forName("oracle.jdbc.driver.oracleDriver"); Connection connection=DriverManager.getConnection(url); Statement statement = connection.createStatement(); String sql="SELECT * FROM +lib_user"; ResultSet rs = statement.executeQuery(sql); while(true) { if(rs.next()) { if((this.name.equals(rs.getString(1)))&&(this.pass.equals(rs.getString(2)))) { out.print("<h1>"+"Login Success!"); break; } } else { out.print("<h1>"+"Account or Password Is Invalid!"); break; } } return; } catch(SQLException e) { } catch(ClassNotFoundException e) { } } /** * The doGet method of the servlet. <br> * * This method is called when a form has its tag value method equals to get. * * @param request the request send by the client to the server * @param response the response send by the server to the client * @throws ServletException if an error occurred * @throws IOException if an error occurred */ public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); } /** * Initialization of the servlet. <br> * * @throws ServletException if an error occurs */ public void init() throws ServletException { // Put your code here } } 创建login.jsp代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <html> <body bgcolor=white><Font size=1 > <script language="javascript"> function login_click() { form1.action="Login"; form1.submit(); } </script> <form name="form1"> <table> <tr> <td align="center"> Account: </td> <td> <input size="18" type="text" name="account"> </td> </tr> <tr> <td align="center"> Password: </td> <td> <input size="20" type="password" name="password"> </td> </tr> </table> <table> <tr> <td width="80"> <td width="60"> </td><input type="submit" name="login" value=" login " onClick="return login_click()"> </td> </tr> </table> </form> </body> </html> 配置web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>LibraryService</display-name> <servlet> <description>A Login Servlet</description> <display-name>LoginServlet</display-name> <servlet-name>LoginServlet</servlet-name> <servlet-class>servlets.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/LoginServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>login.jsp</welcome-file> </welcome-file-list> </web-app> 在浏览器输入:http://localhost:8088/LibraryService/login.jsp能显示登录界面,但是输入账号和密码后显示如下: HTtype Status report message /LibraryService/Login description The requested resource is not available. Apache Tomcat/7.0.53TP Status 404 - /LibraryService/Login 求高手指教,本人刚接触这类软件,实在是找不出问题来,求指教~~~~~~~~~~~~
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页