Web前端教程2-CSS教程

来源:https://www.cnblogs.com/haochen273/archive/2019/04/26/10776500.html
-Advertisement-
Play Games

[TOC] 1. CSS基本語法 CSS是層疊樣式表 1.1. CSS基本定義 CSS的定義方法時： 選擇器是將樣式和頁面元素關聯起來的名稱 屬性是希望設置的樣式屬性，每個屬性有一個或多個值 CSS引入頁面的方法 1. 在HTML中通過外聯方法 2. 內聯式，通過標簽的style屬性，直接在標簽上寫 ...


目錄

1. CSS基本語法

CSS是層疊樣式表

1.1. CSS基本定義

CSS的定義方法時：

選擇器{
  屬性： 值；
  屬性： 值；
}

div{
    width:100px;
    height:100px;
    background:gold;
}
  • 選擇器是將樣式和頁面元素關聯起來的名稱
  • 屬性是希望設置的樣式屬性，每個屬性有一個或多個值

CSS引入頁面的方法

  1. 在HTML中通過外聯方法
<link rel = "stylesheet" type="text/css" href="css/style.css">
  1. 內聯式，通過標簽的style屬性，直接在標簽上寫樣式
<div style="width: 100px; height: 100px">..</div>
  1. 嵌入式： 通過style標簽
<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

1.2. CSS佈局屬性

屬性 說明
width 寬度
height 高度
background-color 背景顏色
border border: 1px solid gold;設置元素邊框
padding 設置內容和元素邊框距離
margin 元素和容器的距離， margin: 10px auto 0居中
float 設置元素浮動

1.3. CSS文本常用屬性

常用的應用文本的css樣式

屬性 說明 值
color 文本顏色 顏色值
font-size 文字大小 px值
font-family 文字字體 字體名稱
font-style 字體是否傾斜 normal:不傾斜
italic：傾斜
font-weight 字體是否加粗 normal:不加粗
bold:加粗
font 同時設置上面的屬性 加粗 字型大小 /行高 字體
line-height 文字的行高 px值
text-decoration 文字的下劃線 none去除下劃線
text-indent 文字的首行縮進 首行縮進24px
text-align 文字的水平對齊方式 center字體居中

2.CSS選擇器

2.1. 標簽選擇器

  • 直接通過html中的標簽名字來選擇對於的元素
  • 選擇面太廣，很少用
/* 直接選擇html中所有的div元素 */
div{
  color: red;
}

2.2. id選擇器

  • 在html中設置一個id，在css中引用設置它
  • id只能是一個全局唯一樣式
  • 一次只能選擇一個元素
  • 很少用
#box{
  color: pink;
}
<div id="box">666</div>

2.3. 類選擇器

  • 為了補償id選擇器的缺點，可以一下子設置多個元素樣式
.lei{
  color: red;
}

.indent{
  text-indent: 20px;
}
<div class="lei indent">1</div>
<div id = "box" class="lei">2</div>
<div class="lei">3</div>
<div class="lei">4</div>
<div class="lei">5</div>

2.4. 層級選擇器

  • 主要用於選擇父元素下的子元素，或者子元素下麵的子元素，可與標簽元素結合使用

.list{
  height: 30px;
}

/* 這是一個兩層的層級選擇器 */
.list a{
  text-decoration: none;
  color: #333;
}

.list .num{
  color: #333;
}
<ul class="list">
  <li><a href = "">新聞標題</a></li>
  <li class="num"><a href = "">新聞標題</a></li>
  <li><a href = "">新聞標題</a></li>
  <li><a href = "">新聞標題</a></li>
</ul>

2.5.組選擇器

  • 多個選擇器，有相同的樣式設置，可使用組合選擇器

/* 設置3個類的公共屬性 */
.box1,.box2,.box3{
  font-size: 14px;
  text-indent: 28px;
}

/* 然後在使用類選擇器個性化 */
.box1{
  color: red;
}

.box2{
  color: green;
}

.box3{
  color: orange;
}

/* 更多設置形式 */
/* 匹配所有的p,b,i,span元素 */
p,b,i,span {
  color: green;
}
<div class="box1">3</div>
<div class="box2">4</div>
<div class="box3">5</div>

2.6. 偽類和偽元素選擇器

  • 常用的偽類選擇器為hover，表示滑鼠懸停在元素上時的狀態
/* 滑鼠放到list類下的a時，會變色 */
.list a:hover{
  color: gold;
}
  • 偽元素選擇器有before和after，它們可通過樣式在元素中插入內容
/* 塊級首行 */
/* 在p,div，body等塊級元素才有效果 */
::first-line{
  color: red;
}

/* 塊級首字母 */
::first-letter{
  color: red;
}

/* 文本前插入內容 */
/* 變成：點擊百度 */
a::before{
  content: '點擊-';
}

/* 文本後插入內容 */
/* 百度搜索 */
a::after{
  content: '搜索';
}

3. 塊元素、內聯元素和內聯塊元素

3.1. 塊元素（行元素）

  • 塊元素，也稱為行元素，比如div,p,ul,li,h1-h6,dl,dt,dd等都是塊元素
  • 它的行為有：
    • 支持全部的樣式
    • 如果沒有設置寬度，預設寬度是父級寬度的100%
    • 盒子占據一行，即使設置了寬度
<style type="text/css">
  body{
    margin: 0;
  }

  div{
    background-color: gold;
    text-align: center;
    margin: 10px 0;
  }

  .box2{
    width: 200px;
  }

 .box3{
    width: 300px;
  }
</style>
...
<div class="">這是一個div元素</div>
<div class="box2">這是二個div元素</div>
<div class="box3">這是三個div元素</div>

3.2. 內聯元素（行內元素）

  • 內聯元素，也是行內元素，佈局中常用的有a, span,em,b,strong,i等都是行內元素
  • 他們在佈局中的行為是：
    • 支持部分樣式(不支持寬，高，margin上下，padding上下)
    • 寬高由內容決定
    • 盒子擠在一行
    • 代碼換行，盒子之間會產生間距
    • 子元素是內聯元素，父元素可以用text-align屬性設置子元素水平對齊方式，用line-height設置垂直對齊方式
<style type="text/css">
body{
  margin: 0;
}

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto 0;
}

.con a{
  background-color: gold;
  width: 500px;
  height: 300px;
  margin-left: 30px;
  margin-top: 50px;
}

</style>
...
<div class="con">
<a href="#">這是一個a標簽</a>
<a href="#">這是二個a標簽</a>
</div>

解決內聯元素之間的間隔問題

  1. 去掉內聯元素之間的換行
  2. 將內聯元素的父級設置font-size為0，然後再設置自身的font-size
<!--方法1：-->
<a href="#">這是一個a標簽</a><a href="#">這是二個a標簽</a>

<!--方法2：-->
<style type="text/css">
body{
  margin: 0;
}

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto 0;
  font-size: 0;
}

.con a{
  background-color: gold;
  width: 500px;
  height: 300px;
  margin-left: 30px;
  margin-top: 50px;
  font-size: 20px;
}

</style>

3.3. 內聯塊元素

  • 結合了塊元素和內元素的優點，通過display轉換
  • 他們的行為是：
    • 支持全部樣式
    • 如果沒有設置寬高，由內容決定
    • 盒子併在一行
    • 代碼換行，由間距

    • 子元素是內聯塊元素，父元素可以通過text-align設置水平對齊方式，用line-height設置垂直對齊

    • display屬性

屬性 說明
none 隱藏不占用位置
block 塊元素
inline 內聯元素
inline-block 內聯塊元素 
<style type="text/css">
  body{
    margin: 0;
  }

  .con{
    width: 500px;
    height: 300px;
    border: 1px solid #333;
    margin: 50px auto 0;
  }

  .con a{
    background-color: gold;
    width: 100px;
    height: 50px;
    display: inline-block;
  }

</style>

<div class="con">
  <a href="#">這是一個a標簽</a>
  <a href="#">這是二個a標簽</a>
</div>

3.4. 實例： 設置導航欄

<style type="text/css">
  body{
    margin: 0;
  }

  .menu{
    width: 694px;
    height: 50px;
    margin: 50px auto 0;
    list-style: none;
    padding: 0;
    font-size: 0;
  }

  .menu li{
    display: inline-block;
    width: 98px;
    height: 48px;
    border: 1px solid gold;
    font-size: 16px;
    margin-right: -1px;
    text-align: center;
    line-height: 48px;
  }

  .menu li:hover{
    background-color: orange;
  }

  .menu a{
    font-family: 'Microsoft Yahei';
    color: pink;
    text-decoration: none;
  }

  .menu a:hover{
    color: red;
  }

</style>
</head>
<body>
  <ul  class="menu">
    <li><a href="#">首頁</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司簡介</a></li>
  </ul>
</body>

4.CSS表格

.goods{
  /* 通用屬性 */
  width: 300px;
  height: 300px;
  text-align: center;

  /* 設置的單元格相鄰邊是否被合併
  separate: 單元格邊框獨立，預設
  collapse： 邊框合併（變成實心的實現） */
  border-collapse: collapse;

  /* 設置單元格邊框邊距，只有在border-collapse為separate情況下才有用 */
  border-spacing: 10px;

  /* 標題方位
  top, bottom */
  caption-side: top;

  /* 空內容單元格的是否顯示,hide */
  empty-cells: hide;


  /* 表格的排版方式
  auto: 內容過長的時候，會拉伸整個單元格，擠壓其他單元格
  fixed： 內容過長時，不會拉伸，會換行處理 */
  table-layout: fixed;
}

/* 設置表頭的背景顏色 */
.goods th{
  background-color: green;
  color: #ffffff;
}
<link rel="stylesheet" type="text/css" href="style.css">

<table class = "goods" border="1">
  <caption>人員表格</caption>
  <tr>
    <th>姓名</th>
    <th>性別</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>男</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>34</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>43</td>
  </tr>

5.盒模型

5.1. 什麼是盒子模型

元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是現實盒子的比喻，幫組我們設置元素對應的樣式

  • 盒子的邊框： border
  • 盒子內的內容和邊框的間距： padding
  • 盒子和盒子之間的間距： margin

5.2設置邊框

  • border：長度值或者百分比
  • border-top/bottom
  • border-left/right

.box{
  width: 200px;
  height: 100px;
  background-color: red;

  /* 設置頂部邊框的寬度，顏色 */
  /* border-top-width: 10px;
  border-top-color: #000; */
  /* 設置線的樣式，實線solid， 虛線dashed， 點線dotted */
  /* border-top-style: solid; */
  /* 全部一下子來寫 */
  /* border-top: 10px solid #000; */

  border: 10px solid orange;
}
<div class="box"></div>

5.3. 盒子內邊距

  • padding：長度值或者百分比
  • padding-top/bottom
  • padding-left/right
.box{
  padding: 20px;

  /* 上，右，下，左 */
  /* padding: 10px 20px, 10px, 20px; */
}

5.4. 盒子外邊距

根據body文檔的左上角為起點

  • margin
  • margin-top/bottom
  • margin-left/right

註意

  1. 當兩個垂直外邊距相遇時，它們將形成一個新的外邊距，這個新的外邊距長度等於兩個發生合併的外邊距的高度中的最大值，解決方法是
  • 只設置margin-top,不設置margin-bottom
  • 將元素浮動或者定位
  1. 盒子水平居中方法 :使用auto平分水平距離
.box{
  margin: 100px auto;
}

5.5. 盒子尺寸大小

盒子寬度 = width + 左右padding值 + 左右的border值
盒子高度 = height + 上下的padding值+ 上下的border值

.box1,.box2,.box3{
  width: 50px;
  height: 50px;
  background-color: gold;
  margin: 20px;
}

.box2,.box3{
  border: 50px solid #000;
}

.box3{
  padding: 50px;
}

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

如何解決盒子尺寸動態變化的問題？

  1. 使用indent： 首行縮進
  2. 文本垂直居中line-height
  3. 文本水平居中text-align
  4. 盒子水平居中margin: 10px auto;

假設設置一個高寬45*400px的盒子

.box2{
  width: 400px;
  height: 50px;
  border-top: 1px solid #f00;
  border-bottom: 3px solid #666;
  font-size: 20px;
  font-family: "Microsoft Yahei";
  text-indent: 15px;
  /* 讓文字居中 */
  line-height: 50px;
}

5.6. 盒子元素溢出

5.6.1. margin-top塌陷

在兩個盒子嵌套的時候，內部的盒子設置的margin-top會加到外部的盒子上（只有外部的盒子有margin-top），導致內部的盒子margin-top設置失敗，解決方法如下：

  1. 外部盒子設置一個邊框
  2. 外部盒子設置overflow: hidden
  3. 外部盒子使用偽元素類(常用)
/* 類似於加邊框 */
.clearfix:before{
  content: "";
  display: table;
}

/* <div class= "non clearfix"></div> */

5.6.2. 元素溢出

當子元素的尺寸超出父元素的尺寸時， 需要設置父元素顯示溢出的子元素的方式，設置的方法通過overflow屬性設置

屬性值 說明
visible 內容不會被修剪，會呈現在元素框外部，預設
hidden 內容會被修剪，並且其他內容不可見，此屬性還有清除浮動、清除margin-top塌陷的功能
scroll 內容會被修剪，通過滾動條顯示
auto 如果內容被修剪，就通過滾動條顯示
inherit 規定應該從父元素繼承overflow屬性的值

什麼是溢出

<div class="con">
  <div class="box">

  </div>
</div>
.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto;
}

.box{
  width: 400px;
  height: 600px;
  background-color: gold;
}

以下這個圖就是溢出

設置溢出方法

.con{
  width: 500px;
  height: 300px;
  border: 1px solid #333;
  margin: 50px auto;
  overflow: scroll;
}

6. CSS浮動

文檔流

文檔流，是指按照html標簽編寫的順序一次從上到下，從左到右排列，塊元素占一行，行內元素在一行只能從左到右排列，先寫的先排，後寫的後排，每個盒子都占據自己的位置， 浮動，定位可以打破這種規律

6.1. 浮動的特性

  1. 浮動元素有左浮動(float:left)和右浮動(float:right)
  2. 浮動的元素會向左或者向右浮動，直到碰到了父元素邊界，浮動元素，或者未浮動元素才會停下來
  3. 相鄰浮動的塊元素可以併在一行，超出父級寬度就換行
  4. 浮動會讓行內元素或者塊元素自動轉為行內塊元素
  5. 浮動元素後面沒有浮動的元素會占據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果--也就是說浮動元素像是浮起來一樣，後面的元素就占據了浮動起來空的位置，但是其中的文字會避開浮動的元素 浮動相當於飄起來了，到了天上，空出來的位置就會被占據（但是文字不會，從而形成文字饒圖）
  6. 父元素內整體浮動的元素無法撐開父類，需要清除浮動
  7. 浮動元素之間沒有垂直margin的合併

浮動特性1-5

/* 碰到父元素邊界停下 */
.box1{
  float: left;
}

/* 碰到父元素邊界停下 */
.box2{
  float: right;
}

/* 碰到box1浮動元素邊界停下 */
.box3{
  float: left;
}

6.2. 清除浮動

  • 父級上增加屬性overflow: hidden（在定位的時候會有問題 ）
  • 在最後一個子元素的後面加入空的div，給它樣式屬性clear: both(不推薦)
  • 使用成熟的清浮動樣式類(推薦)
/* 既可以清除margin-top的bug，也可以清除浮動 */
.clearfix:after, .clearfix:before{
  content: "";
  display: table;
}

.clearfix:after{
  clear: both;
}

.clearfix{
  zoom: 1;
}

清除浮動的用法(在父級上添加)


<div class = "con clearfix">

7. 定位

7.1. 定位簡介

可以使用CSS的position屬性來設置元素的定位類型，position的設置項如下：

  • relative： 相對定位元素，元素所占的文檔流位置不變，元素本身相對文檔流進行位置偏移
  • absolute： 絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為漂浮在文檔流的上方，相對於上一個設置了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，就相當於body元素定位
  • fixed： 固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以理解為為漂浮在文檔流的上方，當有滾動條的時候，元素會跟隨滾動條一直顯示
  • static: 預設值，沒有定位，元素出現在正常的文檔流中，相當於取消定位屬性或者不設置定位屬性
  • inherit: 從父元素繼承position的值

7.1.1. 相對定位

.con{
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto 0;
}

.con div{
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: gold;
  font-size: 40px;
  text-align: center;
  line-height: 100px;

}

.box01{
  position: relative;
  top: 80px;
  left: 50px;
  background-color: green;
}

7.1.2. 絕對定位

.box01{
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: green;
}

我們也可把外部容器設置為定位的起點

.con{
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto 0;
  position: relative;
}

.box01{
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: green;
}

7.1.3. 固定定位

  • 跟隨滾動框走
.box01{
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: green;
}

7.2. 定位元素的特性

絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素

7.3. 定位元素層級

定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設置元素的層級

7.4. 典型的 定位佈局

  • 固定在頂部的菜單
  • 水平垂直居中的彈框
  • 固定的側邊的工具欄
  • 固定在底部的按鈕

7.5. 浮動定位的範例

1. 導航欄

<ul class="menu">
  <li class="active"><a href="">首 頁</a></li>
  <li><a href="">網站建設</a></li>
  <li><a href="">網站建設</a></li>
  <li><a href="">網站建設</a></li>
  <li><a href="">網站建設</a></li>
  <li><a href="">網站建設</a></li>
  <li><a href="">網站建設</a></li>
  <li class="new"></li>
</ul>
.menu{
  width: 950px;
  height: 40px;
  margin: 50px auto 0;
  list-style: none;
  background-color: #55a8ea;
  padding: 0;
  position: relative;
}

.menu li{
  float: left;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.menu li a{
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  color: #fff;
  text-decoration: none;
}

.menu .active{
  background-color: #00619f;
}

.menu li:hover{
  background-color: #00619f;
}

.menu .new{
  width: 30px;
  height: 30px;
  background: url(new.png) no-repeat;
  position: absolute;
  left: 433px;
  top: -20px;
}

.menu .new:hover{
  background: url(new.png) no-repeat;
}

2. 新聞列表

<div class="news_list_con">
  <h3><span>新聞標題</span></h3>
  <ul>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>
    <li><a href="">特征佈局：新聞列表所需要的至少</a><span>2016-12-25</span></li>

  </ul>
</div>
.news_list_con{
  width: 600px;
  height: 290px;
  border: 1px solid #ddd;
  margin: 50px auto 0;
  overflow: hidden;
}


.news_list_con h3{
  height: 50px;
  width: 560px;
  border-bottom: 1px solid #ddd;
  margin: 0px auto;
}

.news_list_con h3 span{
  display: inline-block;
  height: 50px;
  border-bottom: 2px solid red;
  font-size: 18px;
  line-height: 50px;
  font-family: 'Microsoft Yahei';
  padding: 0 15px;
}

.news_list_con ul{
  list-style: none;
  padding: 0;
  width: 560px;
  height: 238px;
  margin: 7px auto 0;
}

.news_list_con ul li{
  height: 38px;
  border-bottom: 1px solid #ddd;
}

.news_list_con ul a{
  float: left;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  text-decoration: none;
  color: #000;
}

.news_list_con ul a:before{
  content: ".";
}

.news_list_con ul a:hover{
  color: red;
}

.news_list_con ul span{
  float: right;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  font-family: 'Microsoft Yahei';
  color: #000;
}

8. CSS背景

頁面上放圖片的方法

方法 說明
直接通過src 占用空間
通過backgound-image 圖片不占用空間，只是作為背景，可以在上面寫字..

backgound-image屬性解釋

background是CSS中很重要的一個屬性，它複製給盒子設置背景圖片和背景顏色的，background是一個複合屬性，他可以分解成如下幾個設置項

  • backgound-color： 設置背景顏色
    • image postion color repeat
  • backgound-image： 設置背景圖片地址
  • backgound-repeat： 設置背景圖片如何重覆平鋪
    • repeat(default),repeat-X,repeat-Y, no-repeat
  • backgound-position： 設置背景圖片位置
    • 水平(left/right/center) 垂直(top/bottom/center)同時設置:必須在no-repeat情況下使用
    • 水平偏移(10px) 垂直偏移(0px)：參考點是 父元素的左上角
  • backgound-attachment： 設置背景圖片是固定還是隨著頁面滾動條滾動
    • fixed：不隨著滾動
.box{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-image: url(news.png);
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL查看資料庫安裝路徑
    有時候在我們開發的過程中並不一定記得資料庫的安裝路徑。比如要查看mysql 資料庫的安裝目錄在哪裡：我們可以通過mysql命令查看mysql的安裝路徑： 上面可以看到基礎的安裝路徑，查看資料庫data的路徑怎麼看，很簡單，把上面的參數變數緩存datadir即可： 當然上面是基於能登錄到mysql視窗 ...
  • Android AIDL 使用
    一、概述： AIDL是Android中IPC（Inter-Process Communication）方式中的一種，AIDL是Android Interface definition language的縮寫。 其主要作用是用於進程間額通訊。 在Android系統中，每個進程都運行在一塊獨立的記憶體中， ...
  • 聯發科AIoT平臺i500處理器簡介
    i500是一款強大而高效的AIoT平臺，專為攜帶型、家用或商用物聯網應用而設計，這些應用需要大量的邊緣處理、先進的多媒體功能、多台高解析度相機、相連的觸屏顯示器和多任務操作系統。 該平臺集成了Arm Cortex-A73 和 Cortex-A53 的四核集群，每個 CPU 都具備 NEON 引擎，集 ...
  • Hi3516EV300專業型HD IP Camera SoC
    Hi3516EV300晶元特點： 處理器內核 ARM Cortex A7@ 900MHz，32KB I-Cache，32KB D-Cache /128KB L2 cache 支持 Neon 加速，集成 FPU 處理單元 視頻編碼 H.264 BP/MP/HP，支持 I/P 幀 H.265 Main ...
  • FreemarkerJavaDemo【Android將表單數據生成Word文檔的方案之一（基於freemarker2.3.28，只能java生成）】
    版權聲明：本文為HaiyuKing原創文章，轉載請註明出處！ 前言 這個方案只能在java中運行，無法在Android項目中運行。所以此方案是：APP將表單數據發送給後臺，後臺通過freemarker將表單數據根據模板ftl文件生成Word文件，然後返回給APP，由APP進行展現。 前期準備 1、下 ...
  • 為View設置左右切換動畫
    本文同步自http://javaexception.com/archives/64 問題: 近期的需求中，碰到了一個view切換動畫的需求。要實現的是點擊按鈕，從左到右滑動view，左邊的view消失，右邊的view出現。有點像文字跑馬燈的效果，不過這次滾動的是view，具體看截圖效果。 實現思路: ...
  • web路徑問題相對路徑和絕對路徑，電腦相對路徑和絕對路徑
    web路徑問題相對路徑和絕對路徑，電腦相對路徑和絕對路徑。 ...
  • Node.js學習（第一章：Node.js簡介）
    1. Node.js是什麼？ Node.js 誕生於 2009 年，由 Joyent 的員工 Ryan Dahl 開發而成, 目前官網最新版本已經更新到 12.0.0版本，最新穩定的是10.15.3。Node.js 不是一門語言也不是框架，它只是基於 Google V8 引擎的 JavaScript ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類