javaweb-day08-css

最新推荐文章于 2023-05-08 19:28:13 发布
最新推荐文章于 2023-05-08 19:28:13 发布
阅读量81 收藏
点赞数
分类专栏： Java 文章标签： html css web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45850095/article/details/112554429
版权

css

一.简介

css：Cascading Style Sheets 层叠样式表
  - 层叠：多个样式可以作用在同一个html标签上，同时生效

好处：
  1. 功能强大
  2. 将内容展示和样式控制分离
     - 降低网页代码耦合度
     - 分工协作,提高开发效率

二.结合方式

1.内联样式:
  • 在标签内使用style属性指定css代码
<div style="color:red">hello css</div>
2.内部样式:
  • 在head标签内，定义style标签，style标签体中的内容就是css代码
<style>
    div{
        color:blue;
    }
</style>
3.外部样式：

  • 定义css文件，在head标签中定义link标签，引入外部资源文件

    <link rel="stylesheet" href="a.css" />

注意：

  • 1,2，3种方式，css作用范围越来越大

  • 1方式不常用，后期常用2,3

  • 第3种格式可以写为：

    <style>
	@import "css/a.css";
</style>

  • 探究这三种方式的优先级。

--内联样式最高 
--内部和外部没有明显的优先级，取决于谁后加载

三种结合方式如下：
a.css代码

p{
    width: 200px;height: 100px;background: #fff819;/*黃色*/
}
div{
    width: 200px;height: 100px;background: #0dedff;/*青色*/
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>/*第二种内部样式*/
        div{
            width: 200px;height: 100px;background: #ff1c1c;/*红色*/
        }
    </style>
    <link rel="stylesheet" href="CSS/a.css"><!--第三种外部样式-->
    <style>/*第三种外部样式*/
        @import "CSS/a.css";
    </style>
</head>
<body>
<div style="width: 200px;height: 100px;background: #ff669d"><!--第一种内联样式  粉色-->
    布局快
</div>
<!--第三种覆盖第二种，加载器从上向下加载，后面覆盖前面。-->
<div>
    布局快
</div>
<!--第三种-->
<p>
    段落标签
</p>
</body>
</html>

运行结果（建议使用谷歌浏览器）
在这里插入图片描述

三.选择器

语法格式：

选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

-- 选择器：筛选具有相似特征的元素
注意：每一对属性需要使用分号隔开，最后一对属性可以不加分号。
1.基础选择器

  1. id选择器

    #id值{}   建议在一个html页面中id值唯一。

  2. 元素选择器

    标签名称{}

  3. class选择器

    .class属性值{}

    • 优先级：

      id选择器>class选择器>元素选择器

基础选择器相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id{/*id选择器*/
            width: 200px;
            height: 100px;
            background: #ff1c1c;/*红色*/
        }
        .class{/*class选择器*/
            width: 200px;
            height: 100px;
            background: #0dedff;/*青色*/
        }
        div{/*元素选择器*/
            width: 200px;
            height: 100px;
            background: #fff819;/*黄色*/
        }
    </style>
</head>
<body>
<div id="id">盒子1</div>
<div class="class">盒子2</div>
<div>盒子3</div>
</body>
</html>

运行结果：
在这里插入图片描述

2.扩展选择器

  1. 选择所有元素

    *{}

  2. 并集选择器

    选择器1，选择器2{}

  3. 交集选择器

    选择器1选择器2{}

  4. 后代选择器

    选择器1 选择器2{}

  5. 子代选择器

    选择器1 > 选择器2{}

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*并集选择器*/
        div,p{
            width: 200px;
            height: 100px;
            background: #ff1c1c;/*红色*/
        }
    /*交集选择器*/
        div#box{
            width: 200px;
            height: 100px;
            background: #fff819;/*黄色*/
        }
        /*后代选择器*/
        body pre{
            width: 200px;
            height: 100px;
            background: #0dedff;/*青色*/
        }
        /*子代选择器*/
        p>span{
            width: 200px;
            height: 100px;
            background: burlywood;/*棕色*/
        }
    </style>
</head>
<body>
    <div>盒子1</div>
    <div id="box">盒子2</div>
    <div><pre>盒子3</pre></div>
    <p>段落1</p>
    <p><span>段落2</span></p>
</body>
</html>

在这里插入图片描述

  1. 属性选择器

    [属性名="属性值"]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [name="name"]{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <from>
        <input type="text" id="inp1" name="name" value="tom"><br>
        <input type="text" id="inp2" name="name1" value="tom">
    </from>
</body>
</html>

在这里插入图片描述

  1. 伪类选择器–状态选择器

    元素：状态{}
如：
:link{}--链接状态
:visited{}--被访问过的状态
:hover{}--鼠标悬停的状态
:active{}--正在访问的状态
  • 案例
    • 表格悬停变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*链接状态*/
        :link{
            color: gold;/*黄色*/
        }
        /*被访问过状态*/
        :visited{
            color: #0dedff;/*青色*/
        }
        /*正在访问状态*/
        a:active{
            color: #ff1c1c;/*红色*/
        }
        table:hover{
            color: #ff669d;/*粉色*/
        }
    </style>
</head>
<body>
<a href="1.三种结合方式.html">超链接</a><br>
<div>盒子</div><br>
<p>段落</p>
<table cellpadding="15" cellspacing="0" width="200" border="1">
    <tr><td>100</td><td>200</td><td>300</td></tr>
</table>
</body>
</html>

在这里插入图片描述

四.属性

  1. 字体、文本

    • font-size:字体大小
    • color:文本颜色
    • text-align:对齐方式
    • line-height:行高

  2. 背景

    • background

  3. 边框

    • border:设置边框，是个复合属性

  4. 尺寸

    width：宽度

    height：高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            width: 900px;
            height: 500px;
            border: 5px dashed red;/*dashed 边距虚线 红色*/
            border-top: 20px solid blue;/*设置上边距 solid实线  蓝色*/
            background-image: url("imgs/a1.jpg");
            /*background-size: 900px 900px;*//*设置图片大小*/
            background-repeat: no-repeat;/*不允许重复*/
            background-color: #ff669d;/*背景色 粉色*/
        }
        #id2{
            width: 900px;
            height: 500px;
            background-image: url("imgs/b.jpg");
            border: 5px dashed chartreuse;/*绿色*/
            font-size: 30px;
            color: #ff1c1c;/*红色*/
            text-align: center;
            line-height: 60px;
        }
    </style>
</head>
<body>
<div id="id1">
    盒子
</div>
<div id="id2">
    床前明月光，<br>
    疑是地上霜。
</div>
</body>
</html>

在这里插入图片描述

  1. 盒子模型

    • margin：外边距

    • padding：内边距

      • 默认情况下内边距会影响整个盒子的大小
      • box-sizing:border-box;设置盒子的属性，让width和height就是盒子的最终大小。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;/*红色*/
        }
        .class1{
            width: 300px;
            height: 300px;
            background-color: chartreuse;/*绿色*/
        }
        .class2{
            width: 150px;
            height: 150px;
            background-color: #0dedff;/*青色*/
            margin: 50px;
            padding: 30px;
            /*保持盒子的尺寸*/
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="class1">
    <div class="class2">内盒子</div>
    外盒子
</div>
</body>
</html>

在这里插入图片描述

  • float:浮动

    • left
    • right

  • 定位

    相对定位relative（相对于正常位置进行定位）

  position: relative;
     left: 200px;

绝对定位absolute（相对于 static 定位以外的第一个父元素进行定位）

固定定位fixed

 属性：“left”, “top”, “right” 以及 “bottom”

拓展：

   :nth-child(i)属性 获取选中元素中的第i个

定位练习：

  • 将4个树立的正方形，变成一个大的正方形，如下图：

在这里插入图片描述

在这里插入图片描述
相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /*float: left;*//*左浮动*/
        }
        div:nth-child(1){
            background-color: #0dedff;/*青色*/
            position: relative;
        }
        div:nth-child(2){
            background-color: #ff669d;/*粉色*/
            position: relative;
            left: 200px;
            top: -200px;
        }
        div:nth-child(3){
            background-color: #ff1c1c;/*红色*/
            position: relative;
            bottom: 200px;
        }
        div:nth-child(4){
            background-color: #a3ff6f;/*绿色*/
            position: relative;
            bottom: 400px;
            left: 200px;
        }
    </style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</body>
</html>

绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /*float: left;*//*左浮动*/
        }
        div:nth-child(1){
            background-color: #0dedff;
            position: absolute;
        }
        div:nth-child(2){
            background-color: #ff669d;
            position: absolute;
            left: 200px;
        }
        div:nth-child(3){
            background-color: #ff1c1c;
            position: absolute;
            top: 200px;
        }
        div:nth-child(4){
            background-color: #a3ff6f;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body><div>盒子1</div><div>盒子2</div><div>盒子3</div><div>盒子4</div>
</body>
</html>

固定定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            /*float: left;*//*左浮动*/
        }
        div:nth-child(1){
            background-color: #0dedff;
            position: fixed;
        }
        div:nth-child(2){
            background-color: #ff669d;
            position: fixed;
            left: 200px;
        }
        div:nth-child(3){
            background-color: #ff1c1c;
            position: fixed;
            top: 200px;
        }
        div:nth-child(4){
            background-color: #a3ff6f;
            position: fixed;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
<div>盒子3</div>
<div>盒子4</div>
</body>
</html>

效果图（三个定位效果都一样）
在这里插入图片描述

作业

  • 注册案例优化

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        div#div1{
            width: 2000px;
            height: 1000px;
            background-image: url("../imgs/bg.jpg");
            background-size: 2000px 1000px;
            position: absolute;
            left: 300px;
        }
        #div2{
            width: 1200px;
            height: 600px;
            border: 5px dashed greenyellow;
            /*position: absolute;*/
            margin: 150px;
            position: absolute;
            left: 250px;
        }
        p{
            position: absolute;
            left: 950px;
            top: -18px;
        }
        a{
            position: absolute;
            left: 1030px;
            top: -2px;
        }
        form{
            position: absolute;
            left: 450px;
            top: -60px;

        }
        img{
            position: absolute;
            top: 365px;
            left: 220px;
        }
    </style>
</head>
<body >
<div id="div1">

        <div id="div2">
            新用户注册 <br>
            USER REGISTER
            <p>已有账号？</p>
            <a href="#">立即登录</a>
            <form action="../../web-01html/homework/one.html" method="post">
                <table cellspacing="20">
                    <tr>
                        <td><label for="username">用户名</label></td>
                        <td><input id="username" type="text" name="username" placeholder="请输入账号"></td>
                    </tr>
                    <br>
                    <tr>
                        <td><lable for="password"></lable>密码</td>
                        <td><input id="password" type="password"  name="pas" placeholder="请输入密码"></td>
                    </tr>
                    <br>
                    <tr>
                        <td><lable for="email"></lable>Email</td>
                        <td><input id="email" type="email"  name="pas" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td><label for="name">姓名</label></td>
                        <td><input id="name" type="text" name="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td><label for="tel">手机号</label></td>
                        <td><input id="tel" type="text" name="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td><label >性别</label></td>
                        <td><input type="radio" name="sex" value="男">男
                            <input type="radio" name="sex" value="女">女
                        </td>
                    </tr>
                    <td><label for="birth">出生日期</label></td>
                    <td><input id="birth" type="date" name="birth"></td>
                    <tr>
                        <td><label for="yzm">验证码</label></td>
                        <td><input id="yzm" type="text" name="yzm" size="10px" >  <img src="../imgs/code.jpg" alt="" height="20" width="60"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input id="zc" type="submit" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
</div>

</body>
</html>

效果图：
在这里插入图片描述

小苏(º﹃º )
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb-day-48
qq_47726356的博客
11-30 93
2021.11.30 常用 API 示例代码： public class RequestAPIServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // i.getRequestURI() 获取请求的资源路径
JavaWeb-day-47
qq_47726356的博客
11-29 196
2021.11.29 1.Web流程 1.1 软件架构 C/S：客户端/服务器端 cs架构建立在专用的网络上，一般面向相对固定的用户群，它可以对权限进行多层次校验，提供了更安全的存取模式，对信息安全的控制能力很强； B/S：浏览器/服务器端 bs架构建立在广域网之上，面向是不可知的用户群，对安全的控制能力相对弱。 1.2 资源分类 1. 静态资源：所有用户访问后，得到的结果都是一样的，称为静态资源.静态资源可以直接被浏览器解析，如： html,css,JavaScript 2...
javaWeb-day08-jQuery
qq_34681728的博客
05-14 271
jQuery简介 jQuery:JavaScript Query JS查询 jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架） jQuery可以极大的简化JS代码 jQuery引入 jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样 <!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 --> <script src="js/jquery-1.8.3.js"></script> 01引入jQuery
JavaWeb---Day 05
qq_49544301的博客
05-04 79
来华清JavaWeb学习的第五天
JavaWeb---Day 03
qq_49544301的博客
04-27 73
来华清JavaWeb学习的第三天
Java03-Javaweb-day08-HTML&CSS
鹏鹏的博客
02-05 72
//本笔记供本人自学参考，如有雷同，对没错我承认，就是我抄你的。 今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 * 分类：一共7种，2种比较
JavaWeb---Day 08
qq_49544301的博客
05-08 141
来华清JavaWeb学习的第八天
JavaWeb-Day01
山野有雾灯
10-06 330
在java中，动态web资源的开发技术就统称为javaWeb!
JavaWeb-day-49
qq_47726356的博客
12-01 75
2021.12.1 EL 表达式 EL 表达式的全称是：Expression Language。是表达式语言。 EL 表达式的什么作用：EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。 因为 EL 表达式在输出数据的时候，要比 jsp 的表达式脚本要简洁很多。 EL 表达式的格式是：${表达式} EL 表达式在输出 null 值的时候，输出的是空串。jsp 表达式脚本输出 null 值的时候，输出的是 null 字符串。 <bo...
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
day08-HTTP&Tomcat&Servlet
最新发布
10-28
JavaWeb 技术栈 JavaWeb 是用 Java 技术来解决相关 web 互联网领域的技术栈。它包括 B/S 架构、静态资源、动态资源、数据库、HTTP 协议、Web 服务器等几个方面。 一、B/S 架构 B/S 架构是 Browser/Server 架构...
java教程超全面javaweb教程28天day2- 08 css的盒子模型
08-31
java教程超全面javaweb教程28天day2-_08_css的盒子模型
java教程超全面javaweb教程28天day2- 02 css的简介
08-31
java教程超全面javaweb教程28天day2-_02_css的简介
java教程超全面javaweb教程28天day2- 04 css的优先级
08-31
java教程超全面javaweb教程28天day2-_04_css的优先级
外卖订餐系统的实现
小苏(º﹃º )的博客
12-27 5195
一、使用技术 javaSE 二、实现功能 外卖订餐系统 具体要求如下： 使用选择结构，循环结构，数组的知识实现一个外卖订餐系统 三、运行效果图如下： 1.订餐功能 2.查看餐袋 3.签收订单 4.删除订单 5.点赞 6.退出 分析图片信息，可以看出我们需要创建一个菜单类，查看餐带类和点赞菜单类 1.首先我们创建一个菜单类，用来定义菜单的属性，使用到封装，构造方法，和toString方法。 public class Food {//菜单 @Override public Strin
汽车租赁系统的实现
小苏(º﹃º )的博客
12-20 2045
一、使用技术 javaSE 二、实现功能 汽车租赁系统 具体要求如下： 使用面向对象的知识实现一个汽车租赁系统 1.汽车租赁信息表如下 2.类和属性 三、运行效果图如下： 1.先创建一个汽车类作为父类，这里有汽车的公共属性： public class Automobile {//汽车类 private String licensePlate;//车牌 private String brand;//品牌 private int rent;//租金 public Aut
数据库可视化工具(SQLyog安装教程)
小苏(º﹃º )的博客
01-10 1993
SQLyog安装教程一、软件下载二、操作步骤 一、软件下载 在网上搜索SQLyog的相关信息，并进行下载 或者（没想到吧） SQLyog12.08下载地址： 链接：https://pan.baidu.com/s/1SQkRgMEjdT4Fkth5B08lLA 提取码：j9xh 本次教程采用的是64位版本。 二、操作步骤 1.下载安装用的 .exe文件和注册信息。 2.双击该文件，复制粘贴相关的注册名和注册码，选择中文引导，点击OK。 3.点击下一步。 4.点击“我接受”，下一步。 5.继续点击下一步
结合html，css，js制作简易老虎机
小苏(º﹃º )的博客
01-18 1212
1.在制作时，首先要理清思路，先将模型想好，再写代码。 2.先写html部分，给它一个大概的框架。再写css部分，对它进行修饰（上色，排序）。最后写js代码，完成相应的功能。 话不多说，先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .out
java ee项目目录结构_JavaWeb-JavaWeb项目标准目录结构
05-18
- `src/main/webapp`：存放 Web 应用的 Web 资源，包括 JSP 页面、CSS 样式表、JavaScript 脚本等； - `src/test/java`：存放项目的测试代码； - `src/test/resources`：存放测试代码所需要的资源文件； - `target`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值