CSS学习Day02(狂神说Java）

已于 2022-04-07 15:04:10 修改
阅读量299 收藏
点赞数
文章标签： 学习 java intellij-idea
于 2022-03-29 17:59:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43421528/article/details/123827971
版权

3.7 背景

文章目录

背景颜色

背景图片

<style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image:url("images/1.png") ;
            /*默认全部是平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat:no-repeat;
        }
    </style>

练习：

在这里插入图片描述

3.8 渐变

background-color: #85FFBD;
background-image: linear-gradient(225deg, #85FFBD 0%, #FFFB7D 100%);

4.盒子模型

4.1 什么是盒子

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2 边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
<style>
/*body总有一个默认的外边距margin：0*/
/*         hl,ul,a,body{*/
/*             margin: 0;*/
/*             padding: 0;*/
/*             text-decoration: none;*/
/*         }*/
        /*border：粗细，样式，颜色*/
        #box{
            width: 300px;
            border:1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: #000;
            line-height: 30px;
            color: white;
        }
        form{
            background:#3cbda6;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed yellow;
        }
        div:nth-of-type(1) >iinput{
            border:2px dashed black;
        }
    </style>

4.3 内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用，居中元素
margin: 0,auto;-->
    <style>
        /*body总有一个默认的外边距margin：0*/
        /*         hl,ul,a,body{*/
        /*             margin: 0;*/
        /*             padding: 0;*/
        /*             text-decoration: none;*/
        /*         }*/
        /*border：粗细，样式，颜色*/
        #box{
            width: 300px;
            border:1px solid white;
            margin: 0,auto;
        }
        /*
        顺时针旋转
        margin：0
        margin：0 1px
        margin：0 1px 2px 3px
        */
        h2{
            font-size: 16px;
            background-color: white;
            line-height: 30px;
            color:#000;
            margin: 0 1px;
        }
        form{
            background:yellow;
        }
        input{
            border:1px solid black;
        }
        div:nth-of-type(1){
            border: 10x solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>

    </form>

</div>
</body>
</html>

盒子的计算方式：

在这里插入图片描述

margin+border+padding+内容宽度

4.4 圆角边框

四个角

<style>
        div{
            width:100px;
            height:100px;
            border: 10px solid red;
            border-radius: 50px 20px;
        }
    </style>

4.5 盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin:0 auto;居中
要求：块元素，块元素有固定的宽度
-->
    <style>
        img{


            border-radius: 1000px;
            box-shadow:10px 10px 100px #333397;
        }
    </style>
</head>
<body>
<div style="width: 500px;display:block;text-align:center">
  
        <img src="images/1.png" alt="">


</div>
</body>
</html>

5.浮动

5.1标准文档流

在这里插入图片描述

块级元素：独占一行

h1-h6 p div 列表……

行内元素：不独占一行

span a img strong……

行内元素可以被包含在块级元素中，反之，则不可以

5.2 display

<style>
      /*block块元素
      inline 行内元素
      inline-block  是块元素，但是可以内联，在一行
      */
        div{
            width:100px;
            height:100px;
            border:1px solid red;
            display: inline;
        }
        span{
            width:100px;
            height:100px;
            border:1px solid red;
            display:inline-block;
        }
    </style>
  1. 这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

5.3 float

  1. 左右浮动float
div{
    margin:10px;
    padding:5px;
}
#father{
    border:1px #000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display:inline-block;
    float:right;
}
.layer02{
    border:1px #00F dashed;
    display:inline-block;
    float:right;
}
.layer03{
    border:1px #060 dashed;
    display:inline-block;
    float:right;
}
.layer04{
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    display:inline-block;
    float:right;
}

5.4 父级边框塌陷的问题

clear

/*
clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;
*/

解决方案：

  1. 增加父级元素的高度
#father{
    border:1px #000 solid;
    height:800px;
}
  1. 增肌一个空的div标签，清除浮动
<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}
  1. overflow
在父级元素中增加一个 overflow:hidden;
  1. 父类添加一个伪类：after
#father:after{
    content:'';
    display:block;
    clear:both;
}#father:after{
    content:'';
    display:block;
    clear:both;
}

小结：

  1. 浮动元素后增加空div

    简单，代码中尽量避免空div

  2. 设置父元素的高度

    简单，元素假设有固定的高度，就会被限制

  3. overflow

    简单，下拉的一些场景避免使用

  4. 父类添加一个伪类：after（推荐）

    写法稍微复杂一点，但是没有副作用，推荐使用！

5.5 对比

  • display

    方向不可以控制

  • float

    浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6.定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位 相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding:20px;
        }
        div{
            margin:10px;
            padding:5px;
            font-size:12px;
            line-height:25px;
        }
        #father{
            border:1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #3cbda6;
            border:1px dashed #937e32;
            position: relative;
            top:-50px;
            left:50px;
        }
        #second{
            background-color: #e8bf6a;
            border:1px solid #511a57;
            position: relative;
            bottom: 50px;

        }
        #third{
            background-color: red;
            border:1px solid #1a3b1e;
            right:20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>
</body>
</html>

相对定位：

position:relative;

相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中,原来的位置会被保留

top:-50px;
left:50px;
bottom:-10px;
right:20px;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:300px;
            height:300px;
            padding:10px;
            border:2px solid red;
        }
        a{
            width:100px;
            height:100px;
            text-decoration:none;
            background:pink;
            link-height:100px;
            text-align: center;
            line-height: 100px;
            color:white;
            display:block;
        }
        a:hover{
            background-color:blue;
        }
        .a2,.a4{
            position:relative;
            left:200px;
            top:-100px;
        }
        .a5{
            position:relative;
            left:100px;
            top:-300px;
        }
    </style>


<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>

6.2 绝对定位

定位：基于XXX定位，上下左右

  1. 没有父级元素定位的前提下，相当于浏览器定位

  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3. 在父级元素范围内移动

    相对于父级或者浏览器的位置，进行指定的偏移，相对定位的话，他不·不·在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    相对定位 相对于自己原来的位置进行偏移-->
    <style>

        div{
            margin:10px;
            padding:5px;
            font-size:12px;
            line-height:25px;
        }
        #father{
            border:1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #3cbda6;
            border:1px dashed #937e32;

        }
        #second{
            background-color: #e8bf6a;
            border:1px solid #511a57;
            position: relative;
            left:100px;

        }
        #third{
            background-color: red;
            border:1px solid #1a3b1e;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

</div>
</body>
</html>

6.3 固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height:1000px;
        }
        div:nth-of-type(1){/*绝对定位：相当与浏览器*/
            width:100px;
            height:100px;
            background: red;
            position: absolute;
            right:0;
            bpttom:0;
        }
        div:nth-of-type(2){/*fixed 固定定位*/
            width:50px;
            height:50px;
            background: yellow;
            position:fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 Z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/1.png" alt=""></li>
        <li class="tipText">时光洪流</li>
        <li class="tipBg"></li>
        <li>时间：2022-03-29</li>
        <li>地点：火星</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 400px;

    padding:0px;
    margin:0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border:1px #000 solid;
}
ul,li{
    padding:0px;
    margin: 0px;
    list-style: none;

}
/*父级元素相对定位*/
#content{
    position:relative;
}
.tipText,.tipBg{
    position:absolute;
    width:380px;
    height:25px;
    top:512px;
    text-align: center;
}
.tipText{
    color: white;
    z-index:999;
}
.tipBg{
    background: black;
    width: 10000px;
    opacity: 0.5;/*背景透明度*/
}

7.网页动画（特效效果）

8.总结

凭谁问，廉颇老矣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习Day02（狂神说Java)
qq_43421528的博客
03-31 1610
4.函数 4.1 函数定义及变量作用域 定义方式一 绝对值函数 function abs(x){ if(x>=0){ return x; }else{ return -x; } } 一旦执行到return代表函数结束，返回结果！ 如果没有执行return，函数执行完也会返回结果，结果就是underfined 定义方式二 var abs=function(x){ if(x>=0){ return x;
JavaWeb学习Day01（狂神说Java）
qq_43421528的博客
04-06 671
JavaWeb 1.基本概念 1.1 前言 web开发 web 网页的意思，www.baidu.com 静态web html，css 提供给所有人看的数据始终不会发生变化 动态web 淘宝，几乎所有的网站 提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同 技术栈：Servlet/JSP,ASP,PHP 在Java中，动态web资源开发的技术统称为JavaWeb 1.2 web应用程序 web应用程序：可以提供浏览器访问的程序 a.html，b.html…
狂神说Java--Java学习笔记(合集)
qq_41924554的博客
07-22 2476
笔记参考来源狂神说Java视频 https://www.bilibili.com/video/BV12J41137hu 本篇笔记有点长，可以根据目录定位，建议配合视频学习。 Java流程控制 用户交互Scanner 之前我们学的基本语法并没有实现程序和人的交互，Java给我们提供了一个工具类，可以获取用户的输入。 java.util.Scanner是Java5的新特征，我们通过Scanner类来获取用户的输入。 基本语法 Scanner s = new Scanner(System.in); .
CSS学习Day01（狂神说Java）
qq_43421528的博客
03-26 99
CSS学习 1.CSS是什么 1.1 什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…… 1.2 发展史 CSS1.0 CSS2.0 DIV(块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画……浏览器兼容性 1.3 快速入门 style css优势： 内容和表现分类 网页机构表现统一，可以实现复用 样式十分的丰富
HTML学习Day01(狂神说Java)
qq_43421528的博客
03-26 198
HTML详解 1 初识HTML 1.1 什么是HTML HTML Hyper Text Markup Language(超文本标记语言)超文本包括：文字，图片，音频，视频，动画等 1.2 HTML发展史 1.3 HTML的优势 世界知名浏览器厂商对HTML5的支持 微软 Google 苹果 Opera Mozilla 市场的需求 跨平台 1.4 W3C标准 W3C World Wide Wed Consortium(万维网联盟) 成立于1994年，Wed技术领域最权威和具影响力的国
Day 16 狂神说Java基础笔记（CSS 15-24）
weixin_44436378的博客
06-15 243
15-内外边距及居中 margin:0 auto//块元素有固定的宽度 text-align：center 16-圆角边框及阴影 border-radius: box-shadow: 17-display和浮动 5.1标准文档流 行内元素:span 块元素：div h1 p display:block,inline;inline-block;none，不能控制方向 float:left;right，浮动起来脱离标准文件流 浮动块元素clear:both; 18-overflow与父级边框塌陷 增加父级元素
Day 14 狂神说Java基础笔记（CSS 01-08）
weixin_44436378的博客
06-14 212
01-03 Cascading Style Sheet 层叠级联样式表 优先级：就近原则 04-CSS四种导入方式 内部样式：<style>h1{color:green;}</style> 行内样式：<h1 style="color:red"> 外部样式： 链接式,html,<link rel="stylesheet" href="相对地址"> 导入式，后渲染 CSS2.1<style>@import url();</style>
Day 15 狂神说Java基础笔记（CSS 09-14）
weixin_44436378的博客
06-15 123
09- span标签：重点要突出的字，使用span套起来
Day 18 狂神说Java基础笔记（JavaScript 14-30）
weixin_44436378的博客
06-17 178
24-获得和设置表单的值 26-JQuery $('#test-jquery').click(function(){ }) 27-JQuery选择器 <script> //原生Js，选择器少，麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jquer
狂神说Java-SpringMVC学习笔记
05-17
狂神说Java——SpringMVC学习笔记 内容概要： 1、了解什么是SpringMVC 2、RestFul和控制器 3、转发和重定向 4、数据处理 5、JSON 6、SSM项目整合 7、Ajax 8、拦截器+文件上传下载 能学到什么：详细了解SpringMVC基础...
狂神说Java-Spring学习笔记
05-17
狂神说Java——Spring学习笔记 内容概要： 1、了解什么是Spring 2、IOC 3、Spring配置 4、依赖注入 5、Bean的自动装配 6、注解开发 7、代理模式 8、AOP 能学到什么：详细了解Spring基础以及使用 阅读建议： 建议配合...
Docker容器学习笔记全（狂神说Java）.pdf
07-10
B站狂神说java的docker笔记md转pdf版本，全部笔记
【狂神】JAVA学习全套笔记（完整版）
03-12
1、JAVA SE 2、MySQL + JDBC 3、JAVA WEB 4、Mybatis 5、SSM 6、大前端 7、Vue 8、SpringBoot 9、Spring Security 10、Shiro 11、Spring Cloud 12、JVM 13、JUC 14、Git 15、Linux 16、Redis 17、ElasticSearch 18、...
狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套
04-26
狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
limengshi138392的博客
06-15 1125
十大成长型思维：定位思维、商业思维、时间管理思维、学习成长思维、精力管理思维、逻辑表达思维、聚焦思维、金字塔原理、目标思维、反思思维
学习记录：VS2019+OpenCV3.4.1实现SURF库函数的调用
weixin_42532989的博客
06-16 949
1.LNK2019 无法解析的外部符号 "public: static struct cv::Ptr 2.opencv_ffmpeg.dll、opencv_ffmpeg_64.dll下载失败无法无法生成opencv_xfeatures2d341d.lib 3.**由于找不到opencv_features2d341d.dll……**
嵌入式技术学习——c51——串口
最新发布
m0_71703182的博客
06-17 709
在总线上接受数据和发送数据，靠定时器计数，T1的溢出率经过二分频或16分频控制收放的速率，通过SBUF写入发送数据。将数据放在SBUF，单片机自动读写数据，发送之后会申请TI这个发送中断，接收数据会生成RI接受中断。串口是一个 通讯接口。成本低，容易使用，通信线路简单，可实现两个设备的相互通信。单片机的串口可以实现单片机于单片机，单片机与电脑，单片机与其他模块相互通信。RS485电平：两线压差+2~+6V表示1，-2~-6V表示0（差分信号）RS232电平：-3~-15V表示1，+3~+15V表示0。
安卓网络编程主要学习什么：深度解析与实用指南
asdgftv_niiy的博客
06-16 355
综上所述，安卓网络编程主要学习网络基础知识、安卓网络编程框架、异步处理与网络线程以及安全性与错误处理等方面。掌握这些知识，可以帮助开发者更好地应对网络编程中的各种挑战和问题，提升应用的性能和用户体验。当然，随着技术的不断发展，安卓网络编程领域也在不断更新和演进，开发者需要保持持续学习的态度，不断跟进新的技术和趋势。这些框架封装了底层的网络请求和响应处理逻辑，简化了网络编程的复杂度。在网络编程中，安全性和错误处理同样不可忽视。同时，还需要学习如何处理网络请求中的错误和异常情况，确保应用的稳定性和可靠性。
狂神说java配套笔记
06-24
Java配套笔记对于Java学习的初学者来说，是一份非常好的辅助资料。通过这份笔记，初学者可以系统地学习Java编程涉及到的各个方面，同时也可以在学习过程中及时记录下重要的知识点，方便日后复习和查询。同时，这份...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值