2. 程式人生 > 實用技巧 >P5005 中國象棋 - 擺上馬

P5005 中國象棋 - 擺上馬

阿新 • • 發佈：2020-11-04

一.CSS語法

selector {property: value}，即 選擇器{屬性:值}
示例：選擇所有的p元素，設定文字顏色為紅色

<style>
p{
   color:red;
}
</style>
<p>這是一個P</p>
<p>這是一個P</p>
<p>這是一個P</p>
<p>這是一個P</p>

二.CSS選擇器

  1. 元素選擇器，即上面的示例
  2. id選擇器，通過id來選擇元素。一個元素的id應該是唯一的。另一個元素不應該重複使用
<style>
p{
  color:red;
}
#p1{
  color:blue;
}
#p2{
  color:green;
}
</style>

<p>沒有id的p</p>
<p id="p1">id=p1的p</p>
<p id="p2">id=p2的p</p>

沒有id的p

id=p1的p

id=p2的p

  1. 類選擇器
    當需要多個元素，都使用同樣的css的時候，就會使用類選擇器。需要將元素的class屬性設定為一樣的。
<style>
.pre{
  color:blue;
}
.after{
  color:green;
}
</style>
 
<p class="pre">前3個</p>
<p class="pre">前3個</p>
<p class="pre">前3個</p>
 
<p class="after">後3個</p>
<p class="after">後3個</p>
<p class="after">後3個</p>

前3個

前3個

前3個

後3個

後3個

後3個

  1. 同時根據元素名和class來選擇
<style>
 
p.blue{
  color:blue;
}
 
</style>
 
<p class="blue">class=blue的p</p>
 
<span class="blue">class=blue的span</span>

根據id來選擇的時候使用的是#，根據class選擇用的是.，標籤名.類名或者標籤名#id可以更準確的選擇

三.註釋

/這是一段註釋/

四.大小

使用width和height屬性來設定尺寸大小，他們的值可以是百分比或者畫素。

<style>
p#percentage{
  width:50%;
  height:50%;
  background-color:pink;
}
p#pix{
  width:180px;
  height:50px;
  background-color:green;
}
</style>
 
<p id="percentage"> 按比例設定尺寸50%寬 50%高</p>
 
<p id="pix"> 按象素設定尺寸  180px寬 50 px高</p>

五.背景

  1. 背景顏色
    屬性名background-color，值的設定可以採用三種方式。
  • 預定義的顏色名字。比如red,gray,white,black,pink
  • rgb格式。分別代表紅綠藍的比例 rgb(250,0,255)
  • 16進位制的表示
  1. 圖片做背景
    background-image:url(imagepath);
<style>
div#test
  {
    background-image:url(/study/background.jpg);
    width:200px;
    height:100px;
  }
</style>
 
<div id="test">
  這是一個有背景圖的DIV
</div>
  1. 背景重複
    使用background-repeat屬性，值可以設定為：
  • repeat; 水平垂直方向都重複
  • repeat-x; 只有水平方向重複
  • repeat-y; 只有垂直方向重複
  • no-repeat; 無重複
  1. 背景平鋪
    使用background-size屬性，值可以設定為contain。

六.文字

  1. 文字顏色
    使用color屬性，值的設定方式同背景顏色。
  2. 對齊
    使用text-align，值可以設定為left,right,center。div是塊級元素，其預設寬度是100%，所以文字有對齊的空間前提。但是，span卻看不出右對齊效果，為什麼呢？因為span是內聯元素其預設寬度就是其文字內容的寬度
    程式碼：
<style>
div#left{
  text-align:left;
}
/*讓div和span的邊框顯露出來，便於理解本知識點*/
div,span{
  border: 1px gray solid;
  margin:10px;
}
 
div#right{
  text-align:right;
}
 
div#center{
  text-align:center;
}
 
span#right{
  text-align:right;
}
 
</style>
<div id="left">
左對齊
</div>
 
<div id="right">
右對齊
</div>
 
<div id="center">
居中
</div>
 
<span id="right">
span看不出右對齊效果
 
</span>
  1. 文字修飾
    使用text-decoration屬性，值可以設定為overline（上劃線），line-through（刪除線），underline（下劃線），none（沒有任何修飾，可以用來去除連結的下劃線）
  2. 行間距
    使用line-height，值可以設定為數字或者百分比
    程式碼：
<style>
p#mypara1{
  width:200px;
}
 
p#mypara2{
  line-height:200%;
}
</style>
 
<p id="mypara1">
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
預設行間距
</p>
 
<p id="mypara2">
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
200%行間距
</p>

效果：

  1. 字元間距
    使用屬性letter-spacing，值設定為數字

  2. 單詞間距
    使用屬性word-spacing，值設定為數字。
    和字元間距不一樣，字元間距是設定一個個的字母之間的間距，單詞間距是設定一個個字母之間的間距。

  3. 首行縮排
    使用屬性text-indent，值設定為數字

  4. 大小寫
    使用屬性text-transform，值可以設定為uppercase 全部大寫，capitalize 首字母大寫，lowercase 全部小寫

  5. 空白格
    使用屬性white-space，值可以設定為：

  • normal 預設。多個空白格或者換行符會被合併成一個空白格
  • pre 有多少空白格，顯示多少空白格，相當於pre標籤,如果長度超出父容器也不會換行。
  • pre-wrap 有多少空白格，顯示多少空白格，相當於pre標籤,如果長度超出父容器，會換行。
  • nowrap 一直不換行，直到使用br

七.字型

  1. 尺寸
    使用屬性font-size，值可以設定為數字或者百分比
  2. 風格
    使用屬性font-style，值可以設定為normal 標準字型，italic 斜體
  3. 粗細
    使用屬性font-weight，值可以設定為normal 標準粗細，bold加粗
  4. 字型檔
    使用屬性font-family，值可以設定為宋體、黑體....
  5. 把字型的所有屬性寫到一起
<style>
p.all{
   font:italic bold 30px "Times New Roman";
}
 
</style>
 
<p>預設字型</p>
 
<p class="all">斜體的 粗體的 大小是30px的 "Times New Roman" </p>

八.滑鼠樣式

使用屬性cursor，

九.表格

  1. 表格佈局
    使用屬性table-layout，值可以設定為automatic; 單元格的大小由td的內容寬度決定。fixed; 單元格的大小由td上設定的寬度決定
  2. 表格邊框
    使用屬性border-collapse，值可以設定為separate:邊框分隔。collapse:邊框合併
    效果：

十.邊框

  1. 邊框風格
    使用屬性border-style，值可以設定為solid: 實線。dotted:點狀。dashed:虛線。double:雙線
  2. 邊框顏色
    使用屬性border-color，值的設定就是那些顏色了
  3. 邊框寬度
    使用屬性border-width，值可以設定為數字
  4. 都放一起
<style>
.red{
   border:1px dotted LightSkyBlue;
}
 
</style>
 
<div> 預設無邊框div </div>
 
<div class="red"> 點狀天藍色細邊框  </div><br/>
  1. 只讓一邊顯示邊框
    可以通過設定border-top-style等，只給一個方向設定邊框。top,bottom,left,right對應上下左右。只在1-3之間加方位就OK了
  2. 傾斜表示邊框之間的交界線
    就是分別設定各個方向的屬性值
  3. 塊級元素和內聯元素的邊框區別
    塊級元素div預設是佔用100%的寬度，常見的塊級元素有div h1 p 等。而內聯元素span的寬度由其內容的寬度決定，常見的內聯元素有 a b strong i input 等

十一.內邊距

元素內邊距，指的是元素裡的內容和邊框之間的距離。屬性有：

  • padding-left: 左內邊距
  • padding-right: 右內邊距
  • padding-top: 上內邊距
  • padding-bottom: 下內邊距
  • padding: 上 右 下 左
    值設定為數字
  1. 內邊距，寫1個和寫4個的區別
    屬性：padding
    值：如果只寫一個，即四個方向的值
    值：如果寫四個，即四個方向的值，上 右 下 左,依順時針的方向依次賦值

十二.外邊距

指的是元素邊框和元素邊框之間的距離。屬性有：

  • margin-left: 左外邊距
  • margin-right: 右外邊距
  • margin-top: 上外邊距
  • margin-bottom: 下外邊距

值設定為數字
像span這樣的內聯元素，預設情況下，只有左右外邊距，沒有上下外邊距。

十三.邊框模型

真正決定一個元素的表現形式，是由其邊框模型決定的
藍色框即為內容，width:70px 表示內容的大小
紅色框即為邊框，內容到邊框之間的距離，即為內邊距 5px
灰色框，是指邊框與其他元素之間的距離，即為外邊距：10px

十四.超鏈狀態

  • link - 初始狀態，從未被訪問過
  • visited - 已訪問過
  • hover - 滑鼠懸停於超鏈的上方
  • active - 滑鼠左鍵點選下去，但是尚未彈起的時候
    示例：
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<a href="http://www.12306.com">超鏈的不同狀態</a>

十五.隱藏

隱藏元素有兩種方式

  • display:none;隱藏一個元素，這個元素將不再佔有原空間
  • visibility:hidden;隱藏一個元素，這個元素繼續佔有原空間，只是“看不見”

十六.css檔案

把樣式程式碼寫在外部檔案裡面，然後在html檔案header裡面引用這個檔案
<link href="./css/demo.css" type="text/css"/ rel="stylesheet">
外部css檔案裡面就不要再使用style標籤了

十七.優先順序

  1. 在html檔案style標籤內定義的樣式與外部檔案style.css樣式重複
    優先使用最後出現的一個
  2. style標籤上的與style屬性衝突
<style>
.p1{
  color:green;
}
</style>
 
<p class="p1" style="color:red">p1 顏色是紅色，優先使用style屬性</p>

優先使用style屬性。
3. !important
如果樣式上增加了!important，則優先順序最高，甚至高於style屬性

<style>
.p1{
  color:green !important;
}
 
</style>
 
<p class="p1" style="color:red">p1 顏色是綠色，優先使用!important樣式</p>

相關推薦

P5005 中國象棋 - 擺上馬

題目連結 題意分析 看資料範圍就應該知道這是一道狀壓DP題了 一開始想的是設定dp[i][a] 表示第i行狀態為a的方案數

【題解】中國象棋 - 擺上馬

中國象棋 - 擺上馬 題目大意 給定 \\(n\\times m\\) 的棋盤，往棋盤上面擺馬，問有多少種擺法可以讓馬互不攻擊。馬是中國象棋的馬，是可以被阻擋攻擊路線的，如題乾圖中所示。

c# 繪製中國象棋棋盤與棋子

本文是利用C# 實現中國象棋的棋盤繪製，以及初始化佈局，並不實現中國象棋的對弈邏輯。僅供學習參考使用。

中國象棋 在從0,0 象棋馬經過k步到達某一點的方法數量

package com.trs.codetool.core;/** * 2020/07/20 * 中國象棋 在從0,0 象棋馬經過k步到達某一點的方法數量 */public class KStepMa {public static void main(String[] args) {// x,y 代表終點位置 k代表總共k步int

P2051 [AHOI2009]中國象棋

題目描述 這次小可可想解決的難題和中國象棋有關，在一個 n 行 m 列的棋盤上，讓你放若干個炮（可以是 0個），使得沒有一個炮可以攻擊到另一個炮，

「BZOJ1801」[Ahoi2009] chess 中國象棋

在一個N行M列的棋盤上，讓你放若干個炮（可以是0個），使得沒有一個炮可以攻擊到另一個炮，請問有多少种放置方法。大家肯定很清楚，在中國象棋中炮的行走方式是：一個炮攻擊到另一個炮，當且僅當它們在同一行或同一列

1.2 中國象棋將帥問題

1.2 中國象棋將帥問題 請寫出一個程式，輸出A，B所有合法的位置，要求在程式碼中只使用一個變數。

C#繪製中國象棋棋盤

在C#繪製中國象棋棋盤是C#程式設計中GDI+的一個重要組成部分。這也是非常考驗程式設計技巧的操作。在繪製之前首先要對棋盤有一個完整的認識。下面是完成後的輸出圖案。

【遊戲】基於matlab中國象棋【含Matlab原始碼 489期】

一、簡介 基於matlab中國象棋 二、原始碼 function chess1() % chess - Chinese chess for two players

[AHOI2009]中國象棋 題解

Statement [P2051 AHOI2009]中國象棋 - 洛谷 | 電腦科學教育新生態 (luogu.com.cn) Solution 顯然的性質是，同一行列不能放兩個以上的棋子

FireMonkey3D之中國象棋程式（二）制定規則

宣告：本程式設計參考象棋巫師原始碼（開發工具dephi 11，建議用delphi 10.3以上版本）。

瀏覽器裡的中國象棋: HTML5 canvas, JS, python

介面程式很短。引擎不是我寫的，棋力不是很強——但我寫不出來，正在學GNU chess的原始碼。全部檔案:https://files.cnblogs.com/files/blogs/714801/ccib.zip

中國象棋程式設計（五）置換表

宣告：本程式設計參考象棋巫師原始碼（開發工具dephi 11，建議用delphi 10.3以上版本）。　　

FireMonkey3D之中國象棋程式設計（六）完善演算法

　　宣告：本程式設計參考象棋巫師原始碼（開發工具dephi 11，建議用delphi 10.3以上版本）。　　

洛谷P2051.中國象棋

題目大意 給定一個 \\(n\\times m(1\\leq n,m\\leq 100)\\) 的棋盤，可以在棋盤中放入若干個炮（可以不放），求有多少种放置方案，使得棋盤上的所有炮不能相互攻擊，答案對 \\(9999973\\) 取模。

中國象棋跳馬

     這道題呢需要方向陣列跟別的差不多所以我就只寫注意事項： 　　dfs函式ans++的條件是k==n*m不是像其他題一樣k>n*m.

中國四人象棋

中國變種象棋（四人象棋）

java實現簡單網路象棋遊戲

本文例項為大家分享了java實現網路象棋遊戲的具體程式碼，供大家參考，具體內容如下

給你一面國旗 教你用python畫中國國旗

本文例項為大家分享了python畫中國國旗的具體程式碼，供大家參考，具體內容如下