one day321
one day321

CSS样式表的学习

CSS样式，在前面学习HTML的结构时，也讲过一点。大概知道CSS样式如何使用。现在，系统的讲述一下CSS的用法，以及关于CSS样式的一些结构。

参考文章：CSS 背景图像重复 (w3schools.com)

一、CSS介绍

  • CSS 代表 层叠样式表
  • CSS描述了HTML元素如何在屏幕上显示， 纸张或其他介质
  • CSS节省了大量的工作。它可以控制布局 一次多个网页
  • 外部样式表存储在CSS文件中

二、CSS语法和基本用法

基本结构：语法、选择器、使用方法、注释方法

CSS 规则由选择器和声明块组成。

语法：

CSS样式表的学习_第1张图片

 剖析：

CSS选择器，分为5种，前面在HTML也讲述过一些。

1.CSS元素选择器   （一些HTML基本的元素）

  比如：p{  }     h1{    }     div{    }

2.CSS id选择器   （自定义的HTML元素）

比如：  #dada{    }

3.CSS类选择器      （使用class自定义的元素）

比如：   .dada{    }    或者：   p.dada{    }      //这种用法，可以指定某个元素p的dada属性！

4.CSS通用选择器

  使用*{}   直接应用到所有css元素里面。

5分组选择器     (就是将一部分css样式相同的元素放在一起，减少代码量)

   p，h1，div{     }   

使用CSS的三种用法：

1.外部CSS   (就是自定义的样式表，然后指定样式表。)

注意：css样式里面的一些属性，不要有空格！！！ 比如：witdh:300px  这个里面不要有空格。

2.内部CSS  （就是放在头部的CSS样式）

3.内联CSS    （放在内部的 使用style样式声明的！）

注意：在上面三种方法都使用的情况下，内联样式的优先级大于前面两种！

注释方法：

在html里面，注释方法是：

在CSS里面，注释方法是：/*           */

CSS颜色和背景

CSS颜色和HTML的介绍是一样的，这里额外记忆一下透明度这个元素。

          在CSS颜色里面，可以使用opacity表示透明度：

                div {
                       background-color: green;
                       opacity: 0.3;
                      }

           也可以使用RGBA的方式，添加透明度：

                   div {
               background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
                        }

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background（速记属性）

背景颜色：background-color

背景图像：background-image:url("");

背景图像重复：设置不重复：background-repeat：no-repeat 、repeat-x、repeat-y。

背景图像位置：background-position：left top

背景图像附件：background-attachment：fixed、scroll。（一个是固定位置）

简写背景图像的属性：

CSS样式表的学习_第2张图片

例如：   相当于包括了上述的所有属性

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
} 

CSS边框、边距、填充

边框属性：

border-style：设置边框的样式，比如：solid。表示粗体。

                      solid、dotted(虚线边框)、none、double

border-width：边框的宽度。（就是黑线的宽度。）

        它有四个边框，top、right、bottom、left。（按顺时针的顺序。）

border-color：边框颜色，同样它也有四个边框。

border-radius：设置圆角边框。

上述四个边框，也可以这样写：border-top-color  （先写是哪一条边框。）或者不写边框，直接写2px，它会根据顺序自动填充。

边距属性：margin

      它也有四个属性。另外，学一个继承属性inherit。（继承属性有意思捏，如果使用继承，那么它和padding的展示页面有一些相同之处。）

例如：

是父类，它定义了边框1px。右边框的空白空间是100px。

           也是块元素，属于div框架里边，加入继承属性之后。它会距离div的边框100px。

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}






This paragraph has an inherited left margin (from the div element).

注意：继承的方式，只能继承边距，不能继承样式。就比如上面的例子，它只继承了边距，边框1px的属性并没有继承。

两个边距会折叠成一个边距：

collapse、比如，定义上边一个元素的下边距是100px。下边一个元素的上边距是20px.按道理是100px+20px。总共120px的距离，但是，实际上只有100px。这就是折叠。

填充：padding

它也存在四个边框属性。它实际上就是，里面的块元素和外边边框的距离。它存在两种方式。一种是加了填充属性整个边框宽度不变，一种是会变化。

它常和盒子属性一起使用。先看会变化的：直接加入填充属性，它会随着填充的大小，而改变整个边框的大小。

使整个边框宽度不变，加入box-sizing属性。

例如：

div {
  width: 300px;
  padding: 25px;         //无论，怎么改变这个值，整个width也不会改变。
  box-sizing: border-box;
}

CSS高度/宽度、盒子模型、轮廓（outline）

CSS的width、height和前面所学的border边框的宽度是不一样的概念！！！一个指的是边框，线的宽度，一个是关于某一个属性的宽度。

  • auto- 这是默认值。浏览器 计算高度和宽度
  • length- 定义高度/宽度，单位为px， cm， 等。
  • %- 定义高度/宽度的百分比 包含块
  • initial- 将高度/宽度设置为其 默认值
  • inherit- 高度/宽度将是 继承自其父值

最大宽度：max-width:

盒子模型：

CSS样式表的学习_第3张图片

  • 内容 - 显示文本和图像的框的内容
  • 填充 - 清除内容周围的区域。填充是透明的
  • 边框 - 围绕填充和内容的边框
  • 边距 - 清除边界外的区域。边距为 透明

轮廓（outline）：

它的实质其实就是边框之外的部分，注意和边框不同，和margin边距也不同。轮廓是可能与其它部分重叠的存在。

CSS样式表的学习_第4张图片

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

 轮廓样式：outline-style 它的属性和边框样式是一样的。

轮廓偏移：outline-offset 它会在边框之外 偏移一部分空空间。有点像margin。

但又有点不一样，轮廓的改变是不会影响整体的改变，不像前面所学的边框改变一个，会导致整个盒子大小改变，除非加入box-sizing:border-box。

（轮廓没有加偏移之前，它就相当于边框，加了偏移之后，他才会距离边框有一些空间）

简便用法：（按顺序填写，和边框的简便写法是一样的）

  • outline-width
  • outline-style（必填）
  • outline-color

CSS文本

文本颜色：color   //和其它不一样，它只需要一个color元素即可。

文本对齐方式：

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

text-align：center、left、right、justify。     //左对齐或右对齐、居中对齐或两端对齐

text-align-last：文本的最后一行的格式。

direction：表示文本的方向。

例如：p {
  direction: rtl;
  unicode-bidi: bidi-override;
}              //表示，颠倒的方向。

vertical-align：baseline、text-top、text-bottom。垂直对齐的方式。baseline是默认的方式。

文本修饰（下划线text-decoration）：

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

text-decoration-line：修饰线。overline、underline、line-through（上划线、下划线、中间线）

text-decoration-style：修饰线的样式，注意要先写修饰线属性，才能写这个。

text-decoration-thickness：修饰线的宽度。

简便用法：（按顺序填写。）

  • text-decoration-line（必填）
  • text-decoration-color（可选）
  • text-decoration-style（可选）
  • text-decoration-thickness（可选）

例如： p {
               text-decoration: underline red double 5px;
            }

注意：text-decoration:none。表示无下划线。

文本转换（text-transform）：text-transform: uppercase; (大写)、lowercase;  capitalize;(首字母大写)

文本间距：

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

text-indent：文本缩进 （就是首行缩进）。text-indent: 50px;

letter-spacing：字母间距。letter-spacing: 5px;

word-spacing：单词间距。

line-height：行高。line-height: 0.8;  （注意一下，只有它的属性值是0.8。没有px）

white-space： 空白，禁止换行。 white-space: nowrap;

文本阴影（text-shadow）：  

    它的顺序是：水平、垂直、模糊（可选）、颜色。   

 例如：      h1 {
                     text-shadow: 0 0 3px #ff0000;
                }

CSS字体、图标、链接

字体有很多种，在英文字体里面，请记住两种最常用的：Serif、Sans-serif。

有的时候，书写会出现多个字体。这是作为备用字体，就是当第一种字体没有找到，就使用下面一个字体。

font-family ：字体样式。

font-style：字体形状。normal（正常）、italic（斜体）。这里，我稍微感觉有些困惑。在前面边框的学习，有一个border-style: solid（黑实线。）！！！哦哦哦，是不一样的。

font-weight：字体粗细。    （它有一个bold的属性，表示粗体。和前面style样式是分开的。它不能表示字体大小，只能表示粗细。）

font-variant：字体变体。  （这个很少用）

font-size：字体大小。  这里要注意，字体大小是字体大小，不能用字体大小去表示标题h1~h6这种信息。它存在三种表现形式：vw、px、em。

vw会随着视图（浏览器页面）的改变而改变（1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。）。px是像素。em相当于16px。

简写字体：

  • font-style  （样式只有斜体和正常）
  • font-variant  （变体，不常用，可选）
  • font-weight  
  • font-size/line-height （必选）
  • font-family  （必选，字体选择）

例如：

p.a {
  font: 20px         Arial, sans-serif;   （后面是一个字体选择。）
}

图标：

这个介绍较少，建议翻阅网上资料自主添加。它的标签是。也可以使用链接。



    //查略资料得。

CSS链接：

链接的标签是

它的样式有四个属性，四个链接状态是：

  • a:link- 一个正常的、未访问的链接
  • a:visited- 用户访问过的链接
  • a:hover- 当用户将鼠标悬停在它上面时的链接
  • a:active- 点击链接的那一刻

它也经常和 文本修饰符一起使用：text-decoration:none；//如果没有这句，链接会显示下划线。

存在背景颜色、按钮。

举例：  这是一个按钮链接。



This is a link

CSS列表、表格

在前面的HTML里面学习了无序（ul）和有序(ol)列表。

list-style-type：列表样式。circle、square。

list-style-image：列表图片。url("")

list-style-position：列表的位置。两种：outside（列表的序号放在div外面）、inside

表格：

HTML学习了

、、
、。

它们的属性主要是.   (表格的边框)

border-collapse：折叠表格。border-collapse: collapse;   //表示，使用单边框。因为默认情况下都是双边框。

td—— text-align：使表格里面的文本对齐。

          例如：td{text-align:center；}  //居中对齐。

   注意：th这个元素，默认是居中对齐的，而td这个元素，默认是靠左对齐。

td—— vertical-align：垂直对齐。文本会靠左下。

有的时候，还会用到表格填充：padding。

th、td—— border-bottom：水平分割器。相当于只有水平一条线。

tr—— tr:hover{ background-color: }。鼠标悬停表。鼠标悬停会在一行出现颜色。

tr:nth-child(even){background-color: }.  条带表格。

响应式表：（有意思捏。）

其实，就是，它多了一个可滑动的滑动栏。

CSS样式表的学习_第5张图片

CSS显示属性、最大宽度、位置（定位）

在学习这三个知识点时，先介绍一下块元素和内联元素。这个在HTML介绍过一些。这个很重要。比如：块元素，它的特点是总是从新行开始，它的区域总是尽可能的往两边延伸。

          内联元素，它的特点是按需占用，它不会从新行开始。

显示：其实就是display属性以及visibility属性。

display:none（会将它定义的属性都隐藏，在界面上不会展示）

display：inline。将块元素变为内联元素。

比如：  li本来是一个列表，这是一个块元素。使用inline元素之后，它会变成一行。

li {
  display: inline;
}

display：block。  将内联元素转换成块元素。

例如： a是一个内联元素，它原本是在一行展示，转为块元素之后，就会每一行占用一个。

a {
  display: block;
}

HTML
CSS
JavaScript

visibility：hidden。//隐藏某个元素视图，仍会存在遗留下的空间。

设置宽度和最大宽度：

目的是防止，像块元素，它会尽可能的往两边延伸。设置宽度或者最大宽度。就可以解决这个问题。

同时，设置margin:auto。就可以让这个块元素处于居中位置。

位置或称定位（position）：

有五种不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

position：static；  //静态位置，不会受其它属性的css样式改变。比如，加入left:20px。这个原本的属性不会边。

position：relative；//相对位置，受其它属性的css样式改变，但整个元素的块元素大小不变，它只会偏移。

position：fixed；   //固定位置，它是一种视图位置。这个不太好。因为它会覆盖原本css的视图。它是一种类似于内联属性的位置。

position：absolute； //绝对位置。它是相对于父元素而言的。它一般都放在父元素的框架里边。在父元素里面自定义的css样式。

position：sticky；  //粘性位置。它相当于一个块级元素。它会随着滑动栏的滑动而改变。而且不会覆盖原本的视图。（这个有意思捏。）（需要注意的是，这个属性，在有些浏览器是下是不支持的，需要加入一些组件。比如：Safari浏览器，需要加入position: -webkit-sticky; 然后在使用这个属性。）

CSS索引、溢出、浮动和清除

Z-index:

这个元素，可以使得它可以和其它视图重叠。通常和position：relative、absolute。搭配一起使用。它主要的作用是决定，多个图像，哪个图像放在最上面。

例如：z-index:3  要比z-index:1 。要放在1的上面。

注意：如果没有加这个索引元素。那么多个图像的重叠，默认是最后的元素放在最上面。

溢出overflow：

它存在四个属性：visible、auto、hidden、scroll。

overflow:visible;   它保持文本原样，尽管文本超出框架，它也会显示。

overflow:hidden；对于超出框架的文本，它会格式化掉。

overflow:auto；  它会根据文本的大小，自动调整框架大小。

overflow:scroll； 它一般会事先设置框架大小，如果文本超出这个范围，就会出现滑动栏。注意，这个属性，存在两个值。overflow-x。overflow-y。

浮动和清除（float、clear）：

浮动属性存在四个值：

  • left- 元素浮动在其容器的左侧
  • right- 元素浮动在其容器的右侧
  • none- 元素不会浮动（将显示在文本中出现的位置）。这是默认值
  • inherit- 元素继承其父元素的浮点值

浮动属性和position位置属性有点相似。但其实一点也不同。position位置属性一般是重叠，而浮动属性不会重叠。例如：

div1、div2、div3分别是三个块元素。差不多每一个都要占用一行。

当设置float:left之后，相当于变成了内联元素。只在一行输出。

div {
  float: left;
  padding: 15px; 
}


Div 1


Div 2


Div 3

清除元素clear：

它存在下列属性值：

  • none- 元素没有被推到下面 左浮动或右浮动元素。这是默认值
  • left- 元素被推到左下方 浮动元素
  • right- 元素被推到下面 右浮动元素
  • both- 元素被推到两者下方 左右浮动元素
  • inherit- 元素继承清除值 从其父级

清除元素有意思捏。

它解释了浮动元素的本质，它一般是和浮动元素进行搭配使用的。比如下面这个例子，没有加clear之前，它会作为一个内联元素，放在文本的左边。

加入clear属性之后，它会从内联元素变为恰当的块级元素，从新行开始，不会重叠。（就是auto类型的块级元素。）

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}

你可能感兴趣的:(css,学习,前端)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 2019-12-22-22:30 涓涓1016
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
  • 将cmd中命令输出保存为txt文本文件 落难Coder Windowscmdwindow
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • 人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
    随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 阶段总结反思 轻争
    马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • ARM驱动学习之5 LEDS驱动 JT灬新一 嵌入式C底层arm开发学习单片机
    ARM驱动学习之5LEDS驱动知识点：•linuxGPIO申请函数和赋值函数–gpio_request–gpio_set_value•三星平台配置GPIO函数–s3c_gpio_cfgpin•GPIO配置输出模式的宏变量–S3C_GPIO_OUTPUT注意点：DRIVER_NAME和DEVICE_NAME匹配。实现步骤：1.加入需要的头文件：//Linux平台的gpio头文件#include//三
  • ARM驱动学习之4小结 JT灬新一 嵌入式C++arm开发学习linux
    ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
  • 展现思维导图魅力，不断挖掘人生宝藏 思维导图讲师Mandy
    第13期最强思维导图训练营已经结束一周了，但是我依旧是感觉所有学员还在努力的学习，这些学员中有教师、学生、白领、公务员、宝妈等等，只要你努力，只要你想改变自己，任何行业，任何岗位都可以参与进来，28天足以让你见成效，在这28天中，我们的学员不仅仅是收获了一枚毕业证，最重要的是让自己的思维方式得到升级，今天的你为自己投资，明天的你就会感谢你今天的付出，我们来听一听来自13期最强思维导图训练营优秀学员
  • 2019-3-23晨间日记 红红火火小耳朵
    今天是什么日子起床：7点40就寝：23点半天气：有太阳，不过一会儿出来一会儿进去特别清爽的凉意，还蛮舒服的心情：小激动要给女朋友过生日啦纪念日：田田女士过生日任务清单昨日完成的任务，最重要的三件事：1.英语一对一2.运动计划3.认真护肤习惯养成：调整状态周目标·完成进度英语七天打卡（5/7）轻课阅读（87/180）音标课（25/30）读书（福尔摩斯一章）学习·信息·阅读#英语课#Cookingte
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面 一个射手座的程序媛 程序员华为od面试职场和发展
    最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
  • 教育 用心灵温暖心灵
    @陈春丽长期学习班冯倩。今天一早就听到说高职合并，取消中专教育的教育信息。感觉是虽然知道，再听还是吓一跳。国家重视职业教育为何还要取消中专技术学校的教育？再听高中就要进行技术教育了，一部分人学习好继续努力学习考大学，一部分人在高中就可以进行职业教育接受职业教育了还要中专技术教育学校干什么呢！a有些职业教育学校转型升级快，不是孩子上完给找工作，而是学校帮孩子创业，我觉得是不错的方向！新闻新你得实时更
  • 枚举的构造函数中抛出异常会怎样 bylijinnan javaenum单例
    首先从使用enum实现单例说起。 为什么要用enum来实现单例？ 这篇文章（ http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 1.enum单例简单、容易，只需几行代码： public enum Singleton { INSTANCE;
  • CMake 教程 aigo C++
    转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/   CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 介绍：http://baike.baidu.com/view/1126160.htm 本文件不介绍CMake的基本语法，下面是篇不错的入门教程： http:
  • cvc-complex-type.2.3: Element 'beans' cannot have character Cb123456 springWebgis
      cvc-complex-type.2.3: Element 'beans' cannot have character     Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
  • jquery实例:随页面滚动条滚动而自动加载内容 120153216 jquery
    <script language="javascript"> $(function (){ var i = 4;$(window).bind("scroll", function (event){ //滚动条到网页头部的 高度，兼容ie,ff,chrome var top = document.documentElement.s
  • 将数据库中的数据转换成dbs文件 何必如此 sqldbs
    旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 1)数据库生成表结构信息：         主要生成数据库配置文件(.conf文
  • 在IBATIS中配置SQL语句的IN方式 357029540 ibatis
    在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： <select id="getForms" param
  • Spring3 MVC 笔记（一） 7454103 springmvcbeanRESTJSF
             自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 要看业务，和整体的设计！      最近公司要求开发个新系统！
  • Timer与Spring Quartz 定时执行程序 darkranger springbean工作quartz
    有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date;
  • 大端小端转换，le32_to_cpu 和cpu_to_le32 aijuans C语言相关
    大端小端转换，le32_to_cpu 和cpu_to_le32  字节序 http://oss.org.cn/kernel-book/ldd3/ch11s04.html         小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
  • Nginx负载均衡配置实例详解 avords
    [导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 负载均衡 先来简单了解一下什么是负载均衡
  • 乱说的 houxinyou 框架敏捷开发软件测试
    从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！ 这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白. 不过感觉和程序开发语言差不多， 瀑布就是顺序，敏捷就是循环. 瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。 也可以把软件开发理
  • 欣赏的价值——一个小故事 bijian1013 有效辅导欣赏欣赏的价值
    　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
  • 包冲突问题的解决方法 bingyingao eclipsemavenexclusions包冲突
    包冲突是开发过程中很常见的问题： 其表现有： 1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 抛如下异常： java.lang.NoClassDefFoundError: Could not in
  • 【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j bit1129 Stream
    先来一段废话： 实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
  • sudoku solver in Haskell bookjovi sudokuhaskell
    这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。   现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
  • java apache ftpClient bro_feng java
    最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
  • 读《研磨设计模式》-代码笔记-工厂方法模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 工厂方法模式：使一个类的实例化延迟到子类 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）： * 有很多不同的产品，它
  • 面试记录语 chenyu19891124 招聘
    或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
  • Fire Workflow 1.0正式版终于发布了 comsci 工作workflowGoogle
    Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 官方网站是 http://www.fireflow.org 经过大家努力,Fire Workflow 1.0正式版终于发布了 正式版主要变化: 1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 2、增加IT
  • Python向脚本传参 daizj python脚本传参
    如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 需要模块：sys 参数个数：len(sys.argv) 脚本名：    sys.argv[0] 参数1：     sys.argv[1] 参数2：     sys.argv[
  • 管理用户分组的命令gpasswd dongwei_6688 passwd
    NAME： gpasswd - administer the /etc/group file SYNOPSIS： gpasswd group gpasswd -a user group gpasswd -d user group gpasswd -R group gpasswd -r group gpasswd [-A user,...] [-M user,...] g
  • 郝斌老师数据结构课程笔记 dcj3sjt126com 数据结构与算法
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  • yii2 cgridview加上选择框进行操作 dcj3sjt126com GridView
    页面代码 <?=Html::beginForm(['controller/bulk'],'post');?> <?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
  • linux mysql fypop linux
    enquiry mysql version in centos linux yum list installed | grep mysql yum -y remove mysql-libs.x86_64 enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* install mysq
  • Scramble String hcx2013 String
    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. Below is one possible representation of s1 = "great":
  • 跟我学Shiro目录贴 jinnianshilongnian 跟我学shiro
    历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。     ----广告-----------------------------------------------------
  • nginx日志切割并使用flume-ng收集日志 liyonghui160com
         nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
  • Oracle死锁解决方法 pda158 oracle
    　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
  • java之List排序 shiguanghui list排序
       在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
  • servlet单例多线程 utopialxw 单例多线程servlet
    转自http://www.cnblogs.com/yjhrem/articles/3160864.html 和   http://blog.chinaunix.net/uid-7374279-id-3687149.html Servlet 单例多线程 Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的