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. 统信DTK开发套件应用技术分享

    近年来,信创产业发展迅猛,国产软硬件适配的需求日益增加,但国内CPU架构种类繁多,导致大量的适配投入.同时,由于底层代码质量不同.代码实现风格不统一等问题,造成自研操作系统的应用开发门槛高,应用生态严 ...

  2. feign服务中调用，传递token

    默认spring-boot 微服务中 用feign来做服务间调用,是不会携带token传递的.为了能让服务间调用的时候带上token,需要进行配置,增强resTemplate   1.先实现请求拦截器 ...

  3. Spring源码之九finishRefresh详解

    Spring源码之九finishRefresh详解 公众号搜索[程序员田同学],专职程序员兼业余写手,生活不止于写代码 Spring IoC 的核心内容要收尾了,本文将对最后一个方法 finishRe ...

  4. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  5. python中的super是什么？

    技术背景 python中的super,名为超类,可以简单的理解为执行父类的__init__函数.由于在python中不论是一对一的继承,还是一子类继承多个父类,都会涉及到执行的先后顺序的问题.那么本文 ...

  6. Java案例——猫与狗（接口版）

    一.需求:对猫跟狗进行训练,加入跳高功能,采用抽象类和接口实现,并创建测试类测试 二.分析: 1.定义接口(Jummping) 成员方法 跳高(): /*定义跳高接口 * */public inter ...

  7. Golang 常见设计模式之装饰模式

    想必只要是熟悉 Python 的同学对装饰模式一定不会陌生,这类 Python 从语法上原生支持的装饰器,大大提高了装饰模式在 Python 中的应用.尽管 Go 语言中装饰模式没有 Python 中 ...

  8. 4月10日 python学习总结 模块和面向对象

    1.hashlib  1.什么叫hash:hash是一种算法,该算法接受传入的内容,经过运算得到一串hash值 2.hash值的特点是:2.1 只要传入的内容一样,得到的hash值必然一样=====& ...

  9. 通过blacklist来禁用驱动

    blacklist黑名单 我们在linux中安装驱动,有时会遇到受限或冲突,通常解决方式都是要修改blacklist.conf.对内核模块来说,黑名单是指禁止某个模块装入的机制 在 /etc/modp ...

  10. CVE-2014-3120 （命令执行漏洞）

    环境配置 vulhub环境搭建 https://blog.csdn.net/qq_36374896/article/details/84102101 启动docker环境 cd vulhub-mast ...