〔晴【天】º〕
〔晴【天】º〕

CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格

CSS图标

如何添加图标
向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 或 ）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。
Font Awesome 图标
如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 部分：

<script src="url">script>

url为你访问 fontawesome.com登录获取的
提示：无需下载或安装！

Bootstrap 图标
如需使用 Bootstrap glyphicons，请在 HTML 页面的 部分内添加这行：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

提示：无需下载或安装！
实例：


<html>
<head>
<title>Bootstrap Iconstitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
head>
<body class="container">

<p>一些 Bootstrap 图标：p>
<i class="glyphicon glyphicon-cloud">i>
<i class="glyphicon glyphicon-remove">i>
<i class="glyphicon glyphicon-user">i>
<i class="glyphicon glyphicon-envelope">i>
<i class="glyphicon glyphicon-thumbs-up">i>
<br><br>

<p>有样式的 Bootstrap 图标（尺寸和颜色）：p>
<i class="glyphicon glyphicon-cloud" style="font-size:24px;">i>
<i class="glyphicon glyphicon-cloud" style="font-size:36px;">i>
<i class="glyphicon glyphicon-cloud" style="font-size:48px;color:red;">i>
<i class="glyphicon glyphicon-cloud" style="font-size:60px;color:lightblue;">i>

body>
html>

结果：
CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格_第1张图片
Google 图标
如需使用 Google 图标，请在HTML页面的 部分中添加以下行：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

提示：无需下载或安装！

实例


<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
head>
<body>

<i class="material-icons">cloudi>
<i class="material-icons">favoritei>
<i class="material-icons">attachmenti>
<i class="material-icons">computeri>
<i class="material-icons">traffici>

body>
html>

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

CSS 链接

设置链接样式
链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

实例

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

实例

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

如果为多个链接状态设置样式，请遵循如下顺序规则：

  • a:hover 必须 a:link 和 a:visited 之后
  • a:active 必须在 a:hover 之后

文本装饰
text-decoration 属性主要用于从链接中删除下划线：

实例

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

背景色
background-color 属性可用于指定链接的背景色：

实例

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

链接按钮
本例演示了一个更高级的例子，其中我们组合了多个 CSS 属性，将链接显示为框/按钮：

实例


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        a:link,
        a:visited {
            background-color: #f44336;
            color: white;
            padding: 14px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }

        a:hover,
        a:active {
            background-color: red;
        }
    style>
head>

<body>
    <p><a href="https://www.baidu.com/?tn=98521242_hao_pg" target="_blank">链接a>p>
body>

html>

cursor

cursor 属性指定要显示的光标类型。本例演示了不同类型的光标（对链接有用）。
实例：


<html>
<body>

<p>请把鼠标移动到单词上，以查看指针效果：p>
<span style="cursor:auto">autospan><br>
<span style="cursor:crosshair">crosshairspan><br>
<span style="cursor:default">defaultspan><br>
<span style="cursor:e-resize">e-resizespan><br>
<span style="cursor:help">helpspan><br>
<span style="cursor:move">movespan><br>
<span style="cursor:n-resize">n-resizespan><br>
<span style="cursor:ne-resize">ne-resizespan><br>
<span style="cursor:nw-resize">nw-resizespan><br>
<span style="cursor:pointer">pointerspan><br>
<span style="cursor:progress">progressspan><br>
<span style="cursor:s-resize">s-resizespan><br>
<span style="cursor:se-resize">se-resizespan><br>
<span style="cursor:sw-resize">sw-resizespan><br>
<span style="cursor:text">textspan><br>
<span style="cursor:w-resize">w-resizespan><br>
<span style="cursor:wait">waitspan><br>

body>
html>

CSS 列表

HTML 列表和 CSS 列表属性
在 HTML 中，列表主要有两种类型：

  • 无序列表（
      ）- 列表项用的是项目符号标记
    • 有序列表（
        ）- 列表项用的是数字或字母标记

    CSS 列表属性使您可以：

    • 为有序列表设置不同的列表项标记
    • 为无序列表设置不同的列表项标记
    • 将图像设置为列表项标记
    • 为列表和列表项添加背景色

    实例

    ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

    注释：有些值用于无序列表，而有些值用于有序列表。
    图像作为列表项标记
    list-style-image 属性将图像指定为列表项标记：

    实例

    ul {
  list-style-image: url('sqpurple.gif');
}

    定位列表项标记
    list-style-position 属性指定列表项标记（项目符号）的位置。

    “list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的

    “list-style-position: inside;” 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本
    删除默认设置
    list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

      或
        中添加 margin:0 和 padding:0 ：

        实例

        ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

        列表 - 简写属性
        list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

        实例

        ul {
  list-style: square inside url("sqpurple.gif");
}

        在使用简写属性时，属性值的顺序为：

        • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
        • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
        • list-style-image（将图像指定为列表项标记）

        如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

        设置列表的颜色样式
        我们还可以使用颜色设置列表样式，使它们看起来更有趣。

        添加到

          或
            标记的任何样式都会影响整个列表，而添加到
          • 标记的属性将影响各个列表项

            CSS 表格

            表格边框
            如需在 CSS 中设置表格边框，请使用 border 属性。

            下例为

            、
            和 元素规定了黑色边框：
            CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格_第2张图片
            实例

            table, th, td {
  border: 1px solid black;
}

            注意：上例中的表格拥有双边框。这是因为 table 和

            		和 元素都有单独的边框。
            全宽表格
            在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 元素添加 width: 100%：

            实例

            table {
  width: 100%;
}

            合并表格边框
            border-collapse 属性设置是否将表格边框折叠为单一边框：
            实例

            table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

            可将上面的双边框变为单边框

            如果只希望表格周围有边框，则仅需为

            指定 border 属性：
            实例
            CSS学习笔记（七）CSS图标，CSS 链接，cursor，CSS 列表，CSS 表格_第3张图片

            table {
  border: 1px solid black;
}

            表格宽度和高度
            表格的宽度和高度由 width 和 height 属性定义。

            下例将表的宽度设置为 100％，将

            元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：
            实例

            tr:hover {background-color: #f5f5f5;}

            条状表格
            为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

            实例

            tr:nth-child(even) {background-color: #f2f2f2;}

            表格颜色

            下例指定了

            元素的高度设置为 50px：
            实例

            table {
  width: 100%;
}

th {
  height: 50px;
}

            水平对齐
            text-align 属性设置

            		或 中内容的水平对齐方式（左、右或居中）。

            默认情况下，

            		 元素的内容居中对齐，而 元素的内容左对齐。

            要使

            		元素的内容也居中对齐，请使用 text-align: center

            垂直对齐
            vertical-align 属性设置

            		或 中内容的垂直对齐方式（上、下或居中）。

            默认情况下，表中内容的垂直对齐是居中（

            		 和 元素都是）。

            下例将

            		元素的垂直文本对齐方式设置为下对齐：
            实例

            td {
  height: 50px;
  vertical-align: bottom;
}

            表格内边距
            如需控制边框和表格内容之间的间距，请在

            		和 元素上使用 padding 属性

            水平分隔线
            向

            		和 添加 border-bottom 属性，以实现水平分隔线：

            实例

            th, td {
  border-bottom: 1px solid #ddd;
}

            可悬停表格
            在

            元素的背景颜色和文本颜色：
            实例

            th {
  background-color: #4CAF50;
  color: white;
}

            响应式表格
            如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：
            在

            元素周围添加带有 overflow-x:auto 的容器元素（例如
            ），以实现响应式效果：

            实例

            <div style="overflow-x:auto;">

<table>
... table content ...
table>

div>

            注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 “overflow:scroll”）。

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

            • 【开源宝藏】30天学会CSS - DAY6 第六课 流光文字动画 hikktn 开源宝藏开源css前端
              第0步：项目结构lighting-text/├─index.html└─style.cssindex.html：包含列表，其中每个放一个字母或符号。style.css：设置背景、文字样式，以及关键帧动画（lighting）让文字逐个闪光。第1步：编写HTML结构在index.html中，核心就是一个无序列表，每个对应一个字母/符号：CSSAnimationDESAFIO♡CSS代码要点每个都是一个
            • 前端vscode中好用的scss插件推荐 熊宝王 前端vscodescss
              一、LiveSassCompilerLiveSassCompiler是VisualStudioCode(VSCode)中非常流行的一个插件，用于将Sass/SCSS文件实时编译为标准的CSS文件。Sass（SyntacticallyAwesomeStyleSheets）是一种CSS预处理器，提供了变量、嵌套、混合（Mixins）、继承等强大功能，而LiveSassCompiler插件可以帮助开发者
            • mongodb与爬虫的关系 getapi mongodb爬虫数据库
              MongoDB与爬虫之间的关系主要体现在数据存储和管理的层面。爬虫（WebCrawler或Spider）是一种自动化工具，用于从互联网上抓取网页内容或特定数据。而MongoDB是一个NoSQL数据库，常被用来存储和管理爬虫抓取到的数据。以下是它们之间关系的具体分析：1.爬虫的数据存储需求爬虫在运行过程中会抓取大量的非结构化或半结构化数据（例如HTML页面、JSON数据、图片链接等）。这些数据通常具
            • 样式的引入[HTML] 雪兔♛ html前端笔记
              样式的引入h3{color:hotpink;font-size:24px;}p{color:crimson;}欢迎老师来教室听课关联样式谁离标签最近谁的优先级最高-->满园春色关不住一枝红杏出墙来黄河之水天上来
            • CSS3学习教程，从入门到精通，CSS3 布局语法知识点及案例代码（15） 知识分享小能手 编程语言如门前端开发网页开发css3学习css前端html5htmlJava后端开发
              CSS3布局知识点及案例代码一、盒模型知识点CSS盒模型是理解CSS布局的基础，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。content：盒子的内容区域，定义宽度和高度。padding：内容与边框之间的空间，可控制内容与边框的距离。border：围绕内容和内边距的边框，可设置边框的样式、宽度和颜色。margin：边框与其他元素之间
            • CSS3学习教程，从入门到精通，CSS3 盒子模型语法知识点及案例代码（13） 知识分享小能手 编程语言如门前端开发网页开发css3学习前端csshtml5htmlJava后端开发
              CSS3盒子模型语法知识点及案例代码CSS3盒子模型概述CSS3盒子模型是用于控制网页元素布局和外观的重要工具。它包括标准盒子模型、IE盒子模型以及CSS3引入的弹性盒子模型和网格布局模型。一、标准盒子模型（StandardBoxModel）语法selector{width:value;height:value;padding:value;border:value;margin:value;}wi
            • CSS3学习教程，从入门到精通，CSS3 背景样式语法知识点及案例代码（11） 知识分享小能手 编程语言如门前端开发网页开发css3学习前端csshtml5JavaJava后端开发
              CSS3背景样式语法知识点及案例代码一、背景颜色（background-color）/*设置元素的背景颜色*/selector{background-color:color-value;}selector：选择器，指定要设置背景颜色的元素。color-value：颜色值，可以是颜色名称、十六进制颜色代码、RGB颜色值或HSL颜色值等。案例：.box{width:200px;height:200px
            • CSS3学习教程，从入门到精通，CSS3 图像属性知识点及案例代码（16） 知识分享小能手 前端开发网页开发编程语言如门css3学习前端csshtml5javascriptcss前端开发
              CSS3图像属性知识点及案例代码一、图像属性概述CSS3提供了丰富的图像属性，可以控制图像的显示方式、大小、位置、滤镜效果等。以下是一些常用的图像属性：二、常用图像属性1.background-image作用:设置元素的背景图像。语法:background-image:url("image.jpg");案例:.box{width:300px;height:200px;background-imag
            • CSS 创建 智慧浩海 CSScss前端
              当读到一个样式表时，浏览器会根据它来格式化HTML文档。如何插入样式表插入样式表的方法有三种:外部样式表(Externalstylesheet)内部样式表(Internalstylesheet)内联样式(Inlinestyle)外部样式表当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（
            • Pytest基础使用 北条苒茗殇 pytest
              概述Pytest是Python里的一个强大的测试框架，灵活易用，可以进行功能，自动化测试使用，可以与Requests，Selenium等进行结合使用，同时可以生成Html的报告。一、Pytest的基本使用在未指定Pytest的配置文件时，会对以下文件进行执行：test_*.py，如：test_1.py*_test.py，如：1_test.py会对以下的类和函数进行执行：类：以Test_开头的类，如
            • webAPP开发三：实现数据的交互显示 lvzekun-IT 前端基础前端学习
              开发中遇到的错误:代码逻辑错误，将初始化函数放在了初始化对象之前，造成了“.html()”无法识别，表示未定义、http://read.t.imooc.io/参考代码下载地址。开发截图：代码结构：html{width:100%;height:100%;overflow-x:hidden;}body{text-align:left;width:100%;background:#e9dfc7;}.m-
            • 蓝桥杯web备赛----html篇 菥菥爱嘻嘻 蓝桥杯备赛前端蓝桥杯html
              1、html写在前面，html相对简单，主要会考基础标签、html5新特性、html5本地存储、但是目前我还没有做到本地存储的题目1.1基础标签(1)、链接标签a:访问Examplehref:链接target：定义链接的打开方式。_blank:在新窗口或新标签页中打开链接。_self:在当前窗口或标签页中打开链接（默认）。_parent:在父框架中打开链接。_top:在整个窗口中打开链接，取消任何
            • CSS基础知识 Toreme csscss3html
              基础教程使用css和不使用比较不使用css不使用css给每一个单元格加上背景颜色就需要给每一个td元素加上bgcolor属性使用css使用css给每一个单元格加上背景颜色，只需要在最前面写一段css代码，所有的单元格都有背景颜色了，这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到不同的td有不同的背景色选择器语法css的语法selector{property:value;}即选择器{属
            • WEBGL 2D游戏引擎研发系列 第二章 <显示图片> 小鬼编程 游戏web开发webglhtml5html5游戏开发扩展游戏2dhtml5前端游戏开发
              WEBGL2D游戏引擎研发系列第二章~\(≥▽≤)/~HTML5游戏开发者社区（群号：326492427）转载请注明出处:http://html5gamedev.org/目录HTML52D游戏引擎研发系列第一章HTML52D游戏引擎研发系列第二章HTML52D游戏引擎研发系列第三章HTML52D游戏引擎研发系列第四章HTML52D游戏引擎研发系列第五章HTML52D游戏引擎研发系列第六章HTML5
            • 使用vite+react+ts+Ant Design开发后台管理项目（五） 吕彬-前端 react.jsjavascript前端
              前言本文将引导开发者从零基础开始，运用vite、react、react-router、react-redux、AntDesign、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。项目gitee地址：lbking666
            • React性能优化的8种方式 Mr.BoBo. 前端#Reactreact.js性能优化前端
              提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言1、Reac.memo缓存组件2、使用useMemo缓存大量的计算3、避免使用内联对象4、避免使用匿名函数5、延迟加载不是立即需要的组件6、调整CSS而不是强制组件加载和卸载7、使用React.Fragment避免添加额外的DOM8、使用React.PureComponent,shouldComponentUpdate9、
            • HTML5！进击2025web蓝桥杯复习之路 Deepsleep. html5前端html
              #HTML5全面解析##目录1.[HTML5简介](#1-html5-简介)2.[基本标签](#2-基本标签)3.[新特性](#3-新特性)4.[本地存储](#4-本地存储)5.[总结](#5-总结)---##1.HTML5简介HTML5是HTML的第五个主要版本，2014年由W3C正式发布。主要特性包括：-语义化标签-多媒体支持-图形绘制（Canvas/SVG）-本地存储能力-WebWorker
            • 最常用的Linux指令手册 忍界英雄 linux运维服务器
              最常用的Linux指令手册一、远程连接1.连接远程服务器[email protected]二、文件与目录操作2.查看目录内容ls：查看目录内容、ls-l：显示详细信息、ls-al/home：包含隐藏文件3.显示当前路径pwd4.切换目录cd/var/www/html5.创建文件touchfile1.txtfile2.txt、touchlinode{1..10}.txt:创建文件6.写入文件
            • html脚本语言有哪些,常见的脚本语言(有哪些) 神神九十九 html脚本语言有哪些
              常见的脚本语言脚本言语：脚本言语又被称为扩建的言语，或者动态言语，是一种编程言语，用bai来操控软件应用程序，脚本通常以文本(如ASCII)保存，只在被调用时进行解说或编译。言语分类：Shell脚本：此类脚本用于自动化工作操控，即发动和操控体系程序的行为。大多的脚本言语解说器也一起是命令行界面，如Unixshell和MS-DOSCOMMAND.COM。其他如AppleScript，可以为体系添加脚
            • 人品大爆发，还是全面介绍一下Squirrel语言！！ steel_de_lee 语言虚拟机luafloat文档lambda
              rel="File-List"href="file:///C:%5CDOCUME%7E1%5Cibm%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml">使用了Squirrel一段时间，对这个新语言也有所了解了，还是决定写一个语言本身的介绍，算是在国内抛砖引玉吧。我目前使用的是Squirrel2.2版，这是一个稳定的版本，文档也比较齐全
            • 前端实例：轮播图效果 2301_81535770 前端
              利用HTML、CSS和JavaScript实现轮播图效果。一、轮播图原理：通过给窗口设置position属性和overflow属性，使得超出窗口范围的部分被隐藏，表面可见范围只包含窗口，但实际上其内部空间很大；调整胶卷相对于窗口的位置，使得整个胶卷向左移动；调用JS中的定时器，实现轮播效果。流程图如下：二、实现自动切换效果1、HTML搭建基础框架分为图片展示窗口和上下页切换按键两部分>2、CSS设
            • css filter属性详解 pengfeixc CSScsscss3webdevelopment
              cssfilter属性详解文章中codepen例子，无法实时预览，可以在这里获得更好阅读体验。最近琢磨着把网站主题色更改一下，看到了一篇文章DarkModeinOneLineofCode，作者讲述了如何用一句代码将网站主题色更改成相反色，这样网站就可以拥有有白天模式和黑夜模式了。html{filter:invert(1);}使用上面的代码，可以很方便的将页面颜色反转，达到黑夜模式的效果。但是我并不
            • http协议与https协议 网络文化 渗透httphttps网络协议网络
              HTTP（HyperTextTransferProtocol：超文本传输协议）是一种用于分布式、协作式和超媒体信息系统的应用层协议。简单来说就是一种发布和接收HTML页面的方法，被用于在Web浏览器和网站服务器之间传递信息。HTTP默认工作在TCP协议80端口，用户访问网站http://打头的都是标准HTTP服务HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器
            • 使用hel-micro微服务实现在jsp项目中引入react组件 小灰灰学编程 微服务微服务react.jsjsphel-micro
              以下是一个完整的示例，涵盖React子应用配置、JSP主应用集成以及样式隔离的实现细节。我们将通过CSSModules和ShadowDOM确保React样式与JSP样式互不干扰。一、React子应用配置1.项目结构react-module/├──src/│├──index.js#模块入口文件│├──App.js#React组件│└──App.module.css#组件样式（CSSModules）├
            • Graylog日志系统超详细部署和配置 kim_liao123 部署elasticsearchdocker
              Graylog日志系统部署和配置1.软件介绍：Graylog是一个开源的日志聚合、分析、审计、展现和预警工具。功能上和ELK类似，但又比ELK要简单，依靠着更加简洁，高效，部署使用简单；官方文档：https://docs.graylog.org/en/3.3/pages/users_and_roles.html以下所有部署方式都来源与官方文档2.软件准备：服务端：Mongo：存储graylog的一
            • Electron打包文件生成.exe文件打开即可使用 糕冷小美n electronjavascript前端
              1、Electron打包，包括需要下载的内容和环境配置步骤注意：Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js和npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环境命令node-vnpm-v输出版本号，说明安装成功2、创建Electron项目2.1创建项目目录打开命令行工具，创建一
            • 致现在的我与未来的我：编程长河中的摆渡手札 星糖曙光 后端语言（nodejavascriptvue等等）笔记学习深度学习人工智能网络
              致现在的我与未来的我：编程长河中的摆渡手札一、技术积累：从萤火微光到星河初现（约3000字）前端的启蒙：HTML/CSS与"所见即所得"的魔法“代码是诗，但诗未必能成为产品”，初学编程时，我如《禅与摩托车维修艺术》中追寻"良质"的探索者，在W3School的教程中笨拙地敲下第一行。记得仿写京东首页时，一个浮动布局的错位让我通宵调试，最终发现竟是未闭合的标签——这让我想起《代码大全》中的警示：“计算
            • C++在线OJ负载均衡项目 平凡的小y c++开发语言
              1.演示项目项目源码链接：2.项目所用技术和开发环境所用技术C++STL标准库Boost准标准库(字符串切割)cpp-httplib第三方开源网络库ctemplate第三方开源前端网页渲染库jsoncpp第三方开源序列化、反序列化库负载均衡设计MySQLCconnectAce前端在线编辑器html/css/js/jquery/ajax开发环境Ubuntu云服务器vscodeMysqlWorkben
            • 大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版） FFF-X html5javascript
              需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放，通过以下关键步骤实现：基准比例锁定：基于设计稿宽高比（16:9）建立基准比例视口实时检测：通过resize事件监听窗口变化智能比例判断：当视口更宽时：保持高度基准，
            • Font Awesome 的使用 FFF-X
              第一种直接使用命令npminstallfont-awesome--save进行安装，安装成功后里面包含样式和字体，然后直接引入样式就可以了入口js中引入import'font-awesome/css/font-awesome.min.css'然后就可以使用了，例如下面这样第二种cdn要使用FontAwesome图标，请在HTML页面的部分中添加以下行：1、国内推荐CDN：2、海外推荐CDN推荐第二
            • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
              好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
            • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
              10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
            • java 实现自定义链表 CrazyMizzz java数据结构
              1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
            • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
                作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
            • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
              今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
            • linux回收站 _wy_ linux回收站
              今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
            • jquery回到页面顶端 知了ing htmljquerycss
              html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
            • B树、B-树、B+树、B*树 矮蛋蛋 B树
              原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
            • 数据库连接池 alafqq 数据库连接池
              http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
            • java泛型 百合不是茶 java泛型
              泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
            • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
              一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
            • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
              一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
            • 【Gson四】范型POJO的反序列化 bit1129 POJO
              在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
            • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
              几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
            • NGINX + LUA实现复杂的控制 ronin47 nginx lua
              安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
            • java-递归判断数组是否升序 bylijinnan java
              public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
            • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
              Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
            • Java工具之JPS chinrui java
              JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
            • window.print分页打印 ctrain window
              function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
            • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
              在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
            • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
              一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
            • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
              使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
            • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
              转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
            • Android关于短信加密 gqdy365 android
              关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
            • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
              假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
            • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
              编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
            • 单实例实践 跑龙套_az 单例
                 1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
            • PO VO BEAN 理解 q137681467 VODTOpo
              PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
            • 战胜惰性，暗自努力 金笛子 努力
              偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
            • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
              多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s