sakura欣悠
sakura欣悠

2022黑马程序员-前端学习第一阶段（Day03-CSS基础）

CSS基础-Day03 学习笔记打卡

  • CSS基础
    • 基础认知
      • CSS知识
      • CSS引入方式（三种）
    • 基础选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 类与id选择器的区别
      • 通配符选择器
    • 字体和文本样式
      • 字体样式
      • 文本样式
      • line-height行高
    • Chrome调试工具
      • 颜色取值（扩展）
  • 综合案例代码示例

学习视频B站：黑马程序员-前端学习（第一阶段）

CSS基础

基础认知

CSS知识

2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第1张图片

CSS： 层叠样式表（Cascading style sheets）
CSS作用是什么？？
给页面中的HTML标签设置样式
写在哪里？
css写在style标签中，style标签一般写在head标签里面，title标签下面
代码示例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        /* CSS注释 */
        /* 这里写的都是CSS */
        /* 选择器{CSS属性} */
        /* 选择器：查找标签 */
        p{
            color: red;
            font-size: 60px;
            background-color: salmon;
        }
    style>
head>
<body>
    <p>hello world 你好世界p>
body>
html>

CSS常见属性

CSS常见属性 作用
color 文字颜色
font-size 字体大小
background-color 背景颜色
width 宽度
height 高度

注意点：

  1. CSS 标点符号都是英文状态下的
  2. 每一个样式键值对写完之后，最后需要写分号

CSS引入方式（三种）

内嵌式： CSS 写在style标签中
提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
外联式： CSS 写在一个单独的.css文件中
提示：需要通过link标签在网页中引入
行内式： CSS 写在标签的style属性中
提示：基础班不推荐使用，之后会配合js使用

引入方式 书写位置 作用范围 使用场景
内嵌式 CSS 写在style标签中 当前页面 小案例
外联式 CSS 写在一个单独的.css文件中，通过link标签引入 多个页面 项目中
行内式 CSS 卸载标签的style属性中 当前标签 配合js使用

基础选择器

标签选择器

结构： 标签名 { css属性名：属性值； }
作用： 通过标签名，找到页面中所有这类标签，设置样式
注意点：
1. 标签选择器选择的是一类标签，而不是单独某一个
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第2张图片

类选择器

结构： .类名 { css属性名：属性值； }
作用： 通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签
2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第3张图片

id选择器

结构： #id属性值 { css属性名：属性值； }
作用： 通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第4张图片

类与id选择器的区别

class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）

通配符选择器

结构： * { css属性名：属性值； }
作用： 找到页面中所有的标签，设置样式
注意点：

  1. 开发中使用极少，只会在极特殊情况下才会用到
  2. 在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解） *{ margin: 0; padding: 0; }
    2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第5张图片

字体和文本样式

字体样式

字体大小： font-size
• 数字+px
字体粗细： font-weight
• 正常：normal 或 400
• 加粗：bold 或 700
字体样式： font-style
• 正常：normal
• 倾斜：italic
字体系列： font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
字体连写： font
• font : style weight size family;

文本样式

样式 属性名 常见属性值
文本缩进 text-indent 数字+px/数字+em
文本水平对齐方式 text-align left/center/right
文本修饰 text-decoration underline/none

line-height行高

作用： 控制一行的上下行间距
属性名： line-height
取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
应用：
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第6张图片

Chrome调试工具

2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第7张图片

颜色取值（扩展）

颜色表示方式 表示含义 =属性值
关键词 预定义的颜色名 red、green·、blue、yellow…
rgb表示法 红绿蓝三原色。每项取值范围:0~255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)…
rgba表示法 红绿蓝三原色+a表示透明度，取值方位是：0~1 rgba(0,0,0,0.5)、rgba(255,255,255,0.3)、rgba(255,0,0,0.7)…
十六进制表示法 # 开头，将数字转换成十六进制表示 #000000、#ff0000、#e92322，简写#000、#f00

综合案例代码示例

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style>
    .box {
      width: 800px;
      /* background-color: orange; */
      /* 让当前新闻整体div大盒子水平居中 */
      margin: 0 auto;
    }

    .time {
      color: grey;
    }

    .sina {
      color: skyblue;
      font-weight: 700;
    }

    a {
      /* 去除a标签的下划线 */
      text-decoration: none;
    }

    h1 {
      /* background-color: pink; */
      /* 要让文本在h1标签中水平居中！！！ */
      text-align: center;
    }

    .info {
      /* 让span、a标签在p标签中水平居中 */
      text-align: center;
    }

    .content {
      /* 首行缩进两个字 */
      text-indent: 2em;
    }

  style>
head>
<body>
  <div class="box">
    <h1>《自然》评选改变科学的10个计算机代码项目h1>
    <p class="info">
      <span class="time">2077年01月28日14:58 span>
      <span class="sina">新浪科技span> 
      <a href="#">收藏本文a>
    p>

    <hr>
    
    <p class="content">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。p>

    <p class="content">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”p>

    <p class="content">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。p>

    <p class="content">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。p>
  div>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    /* 可以通过给body标签设置背景颜色完成设置浏览器的背景颜色 */
    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 234px;
      height: 300px;
      background-color: #fff;
      margin: 0 auto;
      /* 让内部的img和文本类型的元素水平居中 */
      text-align: center;
    }

    .pic {
      width: 160px;
    }

    .product {
      height: 25px;
      font-size: 14px;
    }

    .info {
      height: 30px;
      font-size: 12px;
      color: #cccccc;
    }

    .price {
      font-size: 14px;
      color: #ffa500;
    }
  style>
head>
<body>
  <div class="box">
    <img src="./images/car.jpg" alt="" class="pic">
    <div class="product">九号平衡车div>
    <div class="info">成年人的玩具div>
    <div class="price">1999元div>
  div>
body>
html>

2022黑马程序员-前端学习第一阶段（Day03-CSS基础）_第8张图片

你可能感兴趣的:(黑马程序员,前端学习,css,前端,css3)

  • rocketmq-client 4.3.0 在springboot中的使用 Myueye JAVAjava
    rocketmq-client4.3.0在springboot中的使用1、导入依赖2、配置文件属性3、编写配置类4、使用测试5、结果5.1RocketMQ后台显示5.2前端页面5.3后端后台1、导入依赖org.apache.rocketmqrocketmq-client4.3.02、配置文件属性mq.nameserverAdd=ip地址:9876mq.topic=top1(topic名称)mq.p
  • 六十天前端强化训练之第二十九天之深入解析：从零构建企业级Vue项目的完整指南 编程星辰海 #前端前端Vue项目
    =====欢迎来到编程星辰海的博客讲解======看完可以给一个免费的三连吗，谢谢大佬！目录一、Vite核心原理与开发优势二、项目创建深度解析三、配置体系深度剖析四、企业级项目架构设计五、性能优化实战六、开发提效技巧七、质量保障体系八、扩展阅读推荐一、Vite核心原理与开发优势1.1为什么选择Vite？Vite采用现代浏览器原生ES模块系统（NativeESM）作为开发服务器，颠覆了传统打包工具的
  • HTTP核心知识 Sean2077 HTTPhttp
    理解HTTP协议是优化Web应用性能、调试问题和实现高效通信的基础。以下是前端开发者需要掌握的核心HTTP知识：1.HTTP基础概念请求与响应模型理解客户端（浏览器）发送HTTP请求，服务器返回HTTP响应的基本流程。HTTP方法（Methods）GET：获取资源（幂等操作）POST：提交数据（非幂等）PUT：更新资源DELETE：删除资源HEAD：仅获取响应头OPTIONS：查看服务器支持的通信
  • 前端性能优化-知识点 甲亿 前端性能优化
    Web性能优化意义1.减少整体加载时间：减小文件体积、减少HTTP请求、使用预加载。2.使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载。3.平滑和交互性：使用CSS替代JS动画、减少UI重绘。4.加载表现形式：使用加载动画、进度条、骨架屏等过渡信息，让用户感觉到页面加载更快。5.性能监测：性能指标、性能测试、性能监控持续优化等Web性能指标RAIL性能模型Response(响应)：快速
  • 【网络安全 | 漏洞挖掘】通过控制台调试实现登录 秋说 web安全漏洞挖掘
    未经许可，不得转载。文章目录正文在安全测试过程中，我留意到一个特殊现象：当登录出现错误时，相关请求包并不经过BurpSuite。那么此时账号密码是储存在前端的，我通过调试即可实现登录管理员账户。正文由于系统设定，输入错误的账号和密码会弹出“账号密码错误”的提示。基于此，我在代码中“账号密码错误”提示的相关位置设置了断点，截图如下：随后，我刷新浏览器页面，输入错误的账号和密码，然后点击登录按钮，操作
  • 性能优化中如何“避免链接关键请求” 混血哲谈 性能优化
    在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：
  • vant官网-vant ui 首页-移动端Vue组件库 embelfe_segge 面试学习路线阿里巴巴android前端后端
    Vant是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过npm安装在现有项目中使用Vant时，可以通过npm或yarn进行安装：#Vue2项目，安装Vant2：npmivant-S#Vue3项目，安装V
  • 可视化埋点在React Native中的实践 Shopee技术团队 前端reactnative前端react.js
    本文首发于微信公众号“Shopee技术团队”。1.背景笔者所在团队为Shopee的本地生活前端团队，用户可以在我们的平台购买优惠券，然后去线下门店使用。随着用户规模不断增加，研究用户行为数据可以更好地指导产品功能设计，提供更加优秀的用户体验。用户行为数据的研究首先涉及到如何采集，即我们常说的“埋点”。一直以来，我们项目中的埋点都采用代码埋点，每次新增埋点往往是一些重复性的工作，且需要重新发布代码才
  • 去哪儿网 ReactNative 跨小程序多端方案介绍 去哪儿网技术沙龙 大前端前端reactnative小程序
    1前言qrn-remax-unir是由去哪儿网前端技术团队实现的一套将RN适配到小程序端的跨端组件，通过该组件库可快速方便的将RN源代码直接运行到小程序端。方案参考了react-native-web的适配方案，使用remax框架来实现适配组件库并达到适配多小程序的目的。和react-native-web一样，它对RN源代码侵入度低，并且调试和替换组件相当方便。方案来自于社区，我们只是合理的应用用来
  • pyspark学习rdd处理数据方法——学习记录 亭午 学习
    python黑马程序员"""文件，按JSON字符串存储1.城市按销售额排名2.全部城市有哪些商品类别在售卖3.上海市有哪些商品类别在售卖"""frompysparkimportSparkConf,SparkContextimportosimportjsonos.environ['PYSPARK_PYTHON']=r"D:\anaconda\envs\py10\python.exe"#创建Spark
  • .net 4.0 webServices 的使用，从前端到后端，代码超全。 静静香甜 .net前端后端c#
    1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin
  • HTML+CSS案例展示(CSS3D效果旋转相册) hacalili htmlcss前端css3
    参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其
  • html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册 岑依惜 html5相册翻转效果
    这篇博客的目的是因为上篇HTML5CSS3专题诱人的实例CSS3打造百度贴吧的3D翻牌效果中有个关于CSS3D效果的比较重要的知识点没讲到，就是perspective和tranlateY效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~1、perspectiveperspective属性包括两个属性：none和具有单位的长度值。其中perspective属
  • HTML5+CSS实现图片3D旋转效果，附音乐 宁醉小白 html5前端html
    利用程序呈现图片，可以俘获一众女生的心，增加音乐可以实现图片变化的同时也带上了想要得到效果，如此一程序实乃众人之喜。先看看程序呈现的效果，还是特别吸引人的。先在网上爬取想要呈现的美女照片，存放在文件夹img-one，与程序路径一致。图片像素需进行调整，同一面图片可以使用同一个图片，保持图片像素一致的同时也增加了立体感。第二张02.jpg和2.jpg可以倒着放，这样在程序实现的时候，可以和其他方向的
  • HTML实现酷炫3D相册 算法与编程之美 编程之美csshtmljscss3javascript
    欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd
  • CSS动画：逐帧动画与steps()函数 双囍菜菜 前端随记css前端
    逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代
  • 【Html+CSS】3D旋转相册 小木荣 web前端csshtml3d
    3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s
  • SassScript：Sass中的编程特性详解 jiajia651304 sass前端css
    Sass（SyntacticallyAwesomeStylesheets）是一种强大的CSS预处理器，它允许开发者使用类似于编程语言的语法来编写CSS，然后通过编译生成标准的CSS代码。SassScript是Sass中的编程特性集合，它包含了变量、嵌套规则、混合、函数以及控制指令等，极大地提高了CSS的开发效率和可维护性。1.变量SassScript中的变量允许开发者在样式表中存储和重复使用值。变
  • 前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例 jiajia651304 前端ajaxjavascript
    前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例前端请求全面解析：AJAX、Axios与Fetch的使用详解与代码示例1.AJAX——传统的异步请求1.1基本用法示例1.2AJAX特点2.FetchAPI——现代化请求方案2.1基本用法示例2.2Fetch特点3.Axios——第三方HTTP请求库3.1安装Axios3.2基本用法示例3.3Axios特点4.总结前端请求全面解
  • OpenLayers集成天地图服务开发指南 喆星时瑜 WebGIS#天地图OpenLayersGIS天地图WebGISHTML地图地图API
    以下是一份面向GIS初学者的OpenLayers开发详细教程，深度解析代码：一、开发环境搭建1.1OpenLayers库引入ol.css：包含地图控件、图层等可视化样式ol.js：OpenLayers核心功能库推荐使用固定版本号（如v7.3.0）确保稳定性1.2地图容器设置.map{//设置地图控件显示尺寸height:95vh;width:95vw;}使用视口单位(vh/vw)实现响应式布局保留
  • 编程内容简述！ 恶霸不委屈 开发语言青少年编程汇编javapython
    编程是指通过计算机语言来开发软件、程序和应用的过程，通常通过编写一系列的指令，来让计算机完成特定的任务。编程可以涉及多个领域和技术，以下是一些主要的编程内容：1.编程语言编程语言是程序员与计算机进行沟通的桥梁，不同的编程语言适用于不同的任务。常见的编程语言有：Python：简单易学，适用于数据分析、人工智能、网页开发等。JavaScript：网页开发中不可或缺的语言，用于动态网页和前端开发。Jav
  • Axios 和 跨域 这两个概念 PLJJ685 前后端分离的仓库管理系统前端
    1.Axios是什么？Axios是一个用于发送网络请求的工具，类似于浏览器自带的fetch，但更强大、更易用。在前端（Vue）中，我们通常用Axios来向后端（SpringBoot）请求数据。举个例子：假设你在一个仓储系统中，前端需要从后端获取商品库存信息。这时，前端就可以用Axios发送一个请求，比如：axios.get('/api/inventory').then(response=>{con
  • 麦谷科技-前端面经 dancehole 科技前端
    base：车联网，uniapp小程序。面试时间：2025-03月（应届）投递岗位：前端（转正实习）面试流程比较短，可能是因为经历不匹配或者第一题答的不好Tvt时间：上午约一面，下午约二面，隔一天（第三天）约hr面。整体流程还是很快的。HR面去公司线下参观了，整体地理环境也很nice。最后因为个人原因没有入职，也是相当可惜一面自我介绍&BG：两端实习，介绍了一下自己的工作。面试官表示不太感兴趣（问了
  • Vue3前端开发：组件化设计与状态管理 caihuayuan4 面试题汇总与解析springsqljava大数据课程设计
    Vue3前端开发：组件化设计与状态管理一、Vue3组件化设计组件基本概念与特点是一款流行的JavaScript框架，它支持组件化设计，这意味着我们可以将页面分解成多个独立的组件，每个组件负责一部分功能，通过组件的嵌套和复用，可以快速构建复杂的用户界面。组件化设计具有以下特点：组件示例组件选项在上面的代码示例中，我们通过Vue.component方法注册了一个名为my-component的组件，这是
  • 使用 Sa-Token 完成踢人下线功能
    一、需求在企业级项目中，踢人下线是一个很常见的需求，如果要设计比较完善的话，至少需要以下功能点：可以根据用户userId踢出指定会话，对方再次访问系统会被提示：您已被踢下线，请重新登录。可以查询出一个账号共在几个设备端登录，并返回其对应的Token凭证，以便后续操作。可以只踢出一个账号某一个端的会话，其他端不受影响。例如在某电商APP上可以看到当前账号共在几个手机上登录，并注销指定端的会话，当前端
  • 为什么后端路由需要携带 /api 作为前缀？前端如何设置基础路径 /api？ z2637305611 前端
    一、为什么后端路由需要携带/api作为前缀？1.区分API端点与其他路由在Web应用程序中，后端不仅需要处理API请求，还可能需要处理静态资源（如HTML、CSS、JS文件）或其他服务（如WebSocket）。通过为API路由添加/api前缀，可以清晰地将其与其他请求区分开来，避免路由冲突。例如：API请求：https://example.com/api/users静态资源请求：https://e
  • 开源项目推荐：Mayfly-go 周风队
    开源项目推荐：Mayfly-gomayfly-goweb版linux(终端文件脚本进程)、数据库(mysqlpgsql高斯达梦)、redis(单机哨兵集群)、mongo统一管理操作平台。项目地址:https://gitcode.com/gh_mirrors/ma/mayfly-goMayfly-go是一个基于浏览器的统一管理操作平台，它支持多种数据库和系统管理功能。该项目主要使用Go语言和前端框架
  • Flutter App开发，高效解决如何将用户登录手机号部分用星号代替在页面中展示 champion_ooO Flutterflutter
    在开发App时，一般都会遇到个人中心的页面，这个时候页面中要展示出来用户当前登录手机号码，但是数据库存的是正常的手机号，需要前端自己来将部分用星号('*')代替。第一步：定义一个变量存储手机号classPersonPageextendsStatefulWidget{constPersonPage({Key?key}):super(key:key);@overrideStatecreateState
  • Scrapy 入门教程 zru_9602 爬虫scrapy
    Scrapy入门教程Scrapy是一个用于爬取网站数据的Python框架，功能强大且易于扩展。本文将介绍Scrapy的基本概念、安装方法、使用示例，并展示如何编写一个基本的爬虫。1.什么是Scrapy？Scrapy是一个开源的、用于爬取网站数据的框架，主要特点包括：高效、异步的爬取机制强大的XPath和CSS选择器解析能力内置中间件，支持代理、去重等功能易于扩展，适用于各种爬虫需求2.安装Scra
  • 前端开发：这就是终点吗？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读让我们重新回到2021年后远程办公风潮兴起的日子，那时候，程序员岗位炙手可热。机会遍地都是，你甚至只需参加少量培训，通过面试后便能轻松收获年薪超15万的工作，还有余暇拍摄一段《程序员的一天》上传网络。经过短短一年左右的培训，你便踏上了年薪六位数的职业道路——那时候，当程序员似乎是一个人人羡慕的理想职业。然而
  • JAVA基础 灵静志远 位运算加载Date字符串池覆盖
    一、类的初始化顺序 1 （静态变量，静态代码块）-->（变量，初始化块）--> 构造器 同一括号里的，根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况，那就在父类到子类交替初始化。 二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象，根
  • keepalived实现redis主从高可用 bylijinnan redis
    方案说明 两台机器（称为A和B），以统一的VIP对外提供服务 1.正常情况下，A和B都启动，B会把A的数据同步过来（B is slave of A） 2.当A挂了后，VIP漂移到B；B的keepalived 通知redis 执行：slaveof no one，由B提供服务 3.当A起来后，VIP不切换，仍在B上面；而A的keepalived 通知redis 执行slaveof B，开始
  • java文件操作大全 0624chenhong java
    最近在博客园看到一篇比较全面的文件操作文章，转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息    &nbs
  • android学习任务 不懂事的小屁孩 工作
    任务 完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog，并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程，并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果，写一个实例 已完成 复习fragem
  • zoom.js 换个号韩国红果果 oom
    它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js  transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q
  • 详解Oracle云操作系统Solaris 11.2 蓝儿唯美 Solaris
    当Oracle发布Solaris 11时，它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是，这些说法没有告诉我们为什么Solaris是配得上云的。幸好，我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用：OpenStack、内核域、统一存档（UA）和弹性虚拟交换（EVS）。 
  • spring学习——springmvc（一） a-john springMVC
    Spring MVC基于模型-视图-控制器（Model-View-Controller，MVC）实现，能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。   1，跟踪Spring MVC的请求 请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样，Spring MVC所有的请求都会通过一个前端控制器Servlet。前
  • hdu4342 History repeat itself-------多校联合五 aijuans 数论
    水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
  • EJB和javabean的区别 asia007 beanejb
    EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了   1.EJB用于服务端应用开发, 而JavaBeans
  • Struts的action和Result总结 百合不是茶 strutsAction配置Result配置
        一:Action的配置详解:      下面是一个Struts中一个空的Struts.xml的配置文件     <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo
  • 如何带好自已的团队 bijian1013 项目管理团队管理团队
    在网上看到博客" 怎么才能让团队成员好好干活"的评论，觉得写的比较好。 原文如下： 我做团队管理有几年了吧，我和你分享一下我认为带好团队的几点： 1.诚信         对团队内成员，无论是技术研究、交流、问题探讨，要尽可能的保持一种诚信的态度，用心去做好，你的团队会感觉得到。 2.努力提
  • Java代码混淆工具 sunjing ProGuard
    Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
  • 【Redis三】基于Redis sentinel的自动failover主从复制 bit1129 redis
    在第二篇中使用2.8.17搭建了主从复制，但是它存在Master单点问题，为了解决这个问题，Redis从2.6开始引入sentinel，用于监控和管理Redis的主从复制环境，进行自动failover，即Master挂了后，sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作，如果Master醒来再次加入集群，只能以从服务器的形式工作。   什么是Sentine
  • 使用代理实现Hibernate Dao层自动事务 白糖_ DAOspringAOP框架Hibernate
    都说spring利用AOP实现自动事务处理机制非常好，但在只有hibernate这个框架情况下，我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try
  • maven3实战读书笔记 braveCS maven3
    Maven简介 是什么？ Is a software project management and comprehension tool.项目管理工具 是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复，maven最大化消除了构建的重复] [与XP：简单、交流与反馈；测试驱动开发、十分钟构建、持续集成、富有信息的工作区]     功能：
  • 编程之美-子数组的最大乘积 bylijinnan 编程之美
    public class MaxProduct { /** * 编程之美 子数组的最大乘积 * 题目: 给定一个长度为N的整数数组，只允许使用乘法，不能用除法，计算任意N-1个数的组合中乘积中最大的一组，并写出算法的时间复杂度。 * 以下程序对应书上两种方法，求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思，是要求得这个子数组，而不
  • 读书笔记-2 chengxuyuancsdn 读书笔记
    1、反射 2、oracle年-月-日 时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构 在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s
  • [求学与房地产]慎重选择IT培训学校 comsci it
          关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题       培训学校的教学楼和宿舍的环境和稳定性问题       我们大家都知道，房子是一个比较昂贵的东西，特别是那种能够当教室的房子... &nb
  • RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 daizj oraclermanfilespersetPARALLELISM
    RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道： RMAN > configure device type disk parallelism 3 ; 表示启动三个通道，可以加快备份恢复的速度。
  • 简单排序:冒泡排序 dieslrae 冒泡排序
    public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){
  • 初二上学期难记单词三 dcj3sjt126com sciet
    concert 音乐会 tonight 今晚 famous 有名的；著名的 song 歌曲 thousand 千 accident 事故；灾难 careless 粗心的，大意的 break 折断；断裂；破碎 heart 心（脏） happen  偶尔发生，碰巧 tourist 旅游者；观光者 science （自然）科学 marry 结婚 subject 题目；
  • I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码 dcj3sjt126com redis
    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make   前面3步应该没有问题，主要的问题是执行make的时候，出现了异常。 异常一： make[2]: cc: Command not found 异常原因：没有安装g
  • 并发容器 shuizhaosi888 并发容器
       通过并发容器来改善同步容器的性能，同步容器将所有对容器状态的访问都串行化，来实现线程安全，这种方式严重降低并发性，当多个线程访问时，吞吐量严重降低。    并发容器ConcurrentHashMap       替代同步基于散列的Map，通过Lock控制。   &nb
  • Spring Security（12）——Remember-Me功能 234390216 Spring SecurityRemember Me记住我
    Remember-Me功能   目录   1.1     概述 1.2     基于简单加密token的方法 1.3     基于持久化token的方法 1.4     Remember-Me相关接口和实现
  • 位运算 焦志广 位运算
    一、位运算符Ｃ语言提供了六种位运算符： & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时，结果位才为1 ，否则为0。参与运算的数以补码方式出现。 例如：9&am
  • nodejs 数据库连接 mongodb mysql liguangsong mongodbmysqlnode数据库连接
    1.mysql 连接    package.json中dependencies加入     "mysql":"~2.7.0"    执行 npm install      在config 下创建文件 database.js    
  • java动态编译 olive6615 javaHotSpotjvm动态编译
        在HotSpot虚拟机中，有两个技术是至关重要的，即动态编译(Dynamic compilation)和Profiling。     HotSpot是如何动态编译Javad的bytecode呢？Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器，即Profile Monitor,专门监视
  • Storm0.9.5的集群部署配置优化 roadrunners 优化storm.yaml
    nimbus结点配置（storm.yaml）信息： # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf
  • 101个MySQL 的调节和优化的提示 tomcat_oracle mysql
    　1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。 　　2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的，它的速度很慢。 　　3. 使用电池供电的RAM（注：RAM即随机存储器）。 　　4. 使用高级的RAID（注：Redundant Arrays of Inexpensive Disks，即磁盘阵列
  • zoj 3829 Known Notation(贪心) 阿尔萨斯 ZOJ
    题目链接：zoj 3829 Known Notation 题目大意：给定一个不完整的后缀表达式，要求有2种不同操作，用尽量少的操作使得表达式完整。 解题思路：贪心，数字的个数要要保证比∗的个数多1，不够的话优先补在开头是最优的。然后遍历一遍字符串，碰到数字+1，碰到∗-1,保证数字的个数大于等1，如果不够减的话，可以和最后面的一个数字交换位置（用栈维护十分方便），因为添加和交换代价都是1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他