1、行内样式。

可以直接把css代码写在现有的HTML标签元素的开始标签里面，并且css样式代码要写在style=" "双引号中才可以，

如：

<p style="color:red">这里文字是红色。</p>

2、内部样式。

如果想让HTML标签和css样式区分开来，可以采取将css样式代码写在<style type="text/css"> </style>标签之间。

这里的<style></style>可以写在<head></head>标签之间或者<body></body>标签之间。

<head>

<style type="text/css">　　

    body {background-color: red}　　

    p {margin-left: 20px}

</style>　　

</head>

3、外部样式

将css单独放置于一个文件中，在jsp中通过link引入。

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

         pageEncoding="utf-8"%>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Login</title>

  <link rel="stylesheet" type="text/css" href="style.css"/>   <!--引入css样式-->

</head>

<body>

<%

  Object message = request.getAttribute("message");

  if(message!=null && !"".equals(message)){

%>

<script type="text/javascript">

  alert("<%=request.getAttribute("message")%>");

</script>

<%  }  %>

<div id="login">

  <h1>Login</h1>

  <form action="Servlet?method=login" method="post" onsubmit="return check()">

    <input type="text" required="required"  placeholder="请输入账号" name="id"></input>

    <input type="password" required="required"  placeholder="请输入密码" name="password"></input>

    <button class="but" type="submit">登录</button>

  </form>

</div>

</body>

</html>

style.css

html{

    width: 100%;

    height: 100%;

    overflow: hidden;

}

body{

    width: 100%;

    height: 100%;

    font-family: 'Open Sans',sans-serif;

    margin: 0;

    background-color: #4A374A;

}

#login{

    position: absolute;

    top: 50%;

    left:50%;

    margin: -150px 0 0 -150px;

    width: 300px;

    height: 300px;

}

#login h1{

    color: #fff;

    text-shadow:0 0 10px;

    letter-spacing: 1px;

    text-align: center;

}

h1{

    font-size: 2em;

    margin: 0.67em 0;

}

input{

    width: 278px;

    height: 18px;

    margin-bottom: 10px;

    outline: none;

    padding: 10px;

    font-size: 13px;

    color: #fff;

    text-shadow:1px 1px 1px;

    border-top: 1px solid #312E3D;

    border-left: 1px solid #312E3D;

    border-right: 1px solid #312E3D;

    border-bottom: 1px solid #56536A;

    border-radius: 4px;

    background-color: #2D2D3F;

}

.but{

    width: 300px;

    min-height: 20px;

    display: block;

    background-color: #4a77d4;

    border: 1px solid #3762bc;

    color: #fff;

    padding: 9px 14px;

    font-size: 15px;

    line-height: normal;

    border-radius: 5px;

    margin: 0;

}

css文件位置与对应jsp文件位置一样即可

idea新建css文件方法：https://jingyan.baidu.com/article/636f38bb4ad6fed6b9461061.html

CSS样式写在JSP代码中的几种方法的更多相关文章

  1. 编写Java程序_输入三个整数x,y,z，请把这三个数由小到大输出，请写出实现代码。（3种方法）

    要求说明: 输入三个整数x,y,z,请把这三个数由小到大输出. 实现代码: 第1种方法: import java.util.Scanner; public class xyzMaxMin{ publi ...

  2. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  3. 对“使用MyEclipse，写的jsp代码因有汉字而无法保存”问题的解决

    使用MyEclipse编辑jsp时.有时会出现"使用MyEclipse,写的jsp代码因有汉字而无法保存"的现象,怎样解决呢? Window-->Preferences--& ...

  4. 【转】使用JavaParser获得Java代码中的类名、方法形参列表中的参数名以及统计总的文件个数与不能解析的文件个数

    遍历目录查找Java文件: public static void ergodicDir(File dir, HashSet<String> argNameSet, HashSet<S ...

  5. Tomcat部署发布JSP应用程序的三种方法 (转)

    Tomcat部署发布JSP应用程序的三种方法     1.直接放到Webapps目录下      Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应 ...

  6. Power BI官方视频(2) Power BI嵌入到应用中的3种方法

    今天给大家介绍3种将Power BI嵌入到应用中的方法. 本文原文地址:Power BI官方视频(2) Power BI嵌入到应用中的3种方法 Power BI系列文章地址:微软Power BI技术文 ...

  7. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  8. JavaScript确定一个字符串是否包含在另一个字符串中的四种方法

    一.indexOf() 1.定义 indexOf()方法返回String对象第一次出现指定字符串的索引,若未找到指定值,返回-1.(数组同一个概念) 2.语法 str.indexOf(searchVa ...

  9. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

随机推荐

  1. LOTO示波器汽修专用款选型指南

    LOTO示波器汽修专用款选型指南 LOTO各种型号的示波器其实都可以用作汽车传感器信号波形的检测.汽修应用中,工程师对示波器的性能要求对于LOTO产品来说不算高. 在我们销售和技术支持的积累过程中,我 ...

  2. 3. 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识bombardier

    目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...

  3. Hadoop原生对象存储Ozone

    Hadoop 社区推出了新一代分布式Key-value对象存储系统 Ozone,同时提供对象和文件访问的接口,从构架上解决了长久以来困扰HDFS的小文件问题.本文作为Ozone系列文章的第一篇,抛个砖 ...

  4. linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题

    发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...

  5. 2022年官网下安装MongoDB最全版与官网查阅方法（5.0.6）

    一.下载安装 1.百度搜索,找到官网,或直接访问:https://www.mongodb.com/ 2.寻找下载位置,双击下载. 3.找到本地位置,双击执行,进入欢迎界面,选择next. 4.勾选协议 ...

  6. CF492E题解

    屑题. 考虑对于每一个 \((x,y)\),将其与 \(((x+dx) \mod n,(y+dy) \mod n)\) 连边. 答案就是连通块中权值最大的那个. 考虑对于 \((x_1,y_1)\) ...

  7. Java的jinfo命令使用详解

    jinfo命令简介 jinfo(Java Virtual Machine Configuration Information)是JDK提供的一个可以实时查看Java虚拟机各种配置参数和系统属性的命令行 ...

  8. java反射获取类的成员函数，成员变量，构造函数

    package com.imooc.reflect;import javax.sound.midi.Soundbank;import java.lang.reflect.Constructor;imp ...

  9. Bert不完全手册3. Bert训练策略优化！RoBERTa & SpanBERT

    之前看过一条评论说Bert提出了很好的双向语言模型的预训练以及下游迁移的框架,但是它提出的各种训练方式槽点较多,或多或少都有优化的空间.这一章就训练方案的改良,我们来聊聊RoBERTa和SpanBER ...

  10. ldap常用命令

    单独查询用户信息 ldapsearch -D "cn=admin,dc=hrbeu,dc=edu,dc=cn" -b "ou=hbr,dc=hrbeu,dc=edu,dc ...