css刪除li 圓點_Html-css學習筆記
阿新 • • 發佈：2021-01-06
技術標籤：css刪除li 圓點
{基本根標籤}
<!DOCTYPE html>（使瀏覽器才能獲知文件型別） <html>(根標籤） <head>（指頭部） <boby>（指身體） <meta charset="UTF-8">（使文件相容世界語音；防止亂碼） <title></title> (瀏覽器標題） 編寫程式碼大小寫都行（建議使用小寫字母） (外部樣式）一般應用到很多頁面的時候、 <link rel="stylesheet" href="./css/indss.css"> <link rel="stylesheet" href="./css/style.css" (內部樣式）單個檔案需要特別樣式時。 <style type="text/css"> (內聯樣式）當特殊的樣式需要應用到個別元素時。 <p style="color: red; margin-left: 20px"> (內容） </p> </boby> </html>
{元素}
HTML 元素以開始標籤起始。
HTML 元素以結束標籤終止。
元素的內容是開始標籤與結束標籤之間的內容。
元素可以說是一個統稱，HTML元素就是通過使用html標籤來進行定義的。{屬性}
HTML 屬性必須使用小寫 HTML 屬性值必須用引號（“ ”）包圍 （id屬性） id屬性用於指定元素的識別名稱，相當於每個人的身份證，是唯一的，同一文件中不能有重複的id，通常配合css和JavaScript來選擇元素。 （class屬性） class屬性用於指定元素的類別名稱，可以使用class元素給同一文件種的多個元素進行分類，css就可以通過class的同一類元素設定統一的樣式。 （style屬性） style屬性用於給元素設定樣式（內聯樣式或內部樣式表等）。 （優先順序的規則） 內聯樣式，優先順序1000 id選擇器，優先順序100 類和偽類，優先順序10 元素選擇器，優先順序1 通配*，優先順序0 繼承的樣式，沒有優先順序 當選擇器中包含多種選擇器的優先順序相加然後在比較，但是注意，選擇器優先順序計算不會超過他的最大數量級。 可以在樣式的最後，新增一個！important ,則此時該樣式將會獲得一個最高的優先順序，將會優先於所有的樣式顯示甚至超過內聯樣式。（不到萬不得已，不推薦使用） 示例：backround-color:red !important ;
{標籤}
標籤通常被稱為HTML標籤，HTML標籤是HTML語言中最基本的單位。 標籤的分類 HTML中標籤元素三種不同型別：塊狀元素，行內元素，行內塊狀元素。 塊級元素（display:block） 特點： 元素都從新的一行開始，並且其後的元素也另起一行；元素的高度、寬度、行高以及頂和底邊距都可設定；元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素(display:inline) 特點 ：和其他元素都在一行上；元素的高度、寬度及頂部和底部邊距不可設定；元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內元素(display:inline) 特點 ：和其他元素都在一行上；元素的高度、寬度及頂部和底部邊距不可設定；元素的寬度就是它包含的文字或圖片的寬度，不可改變。後期也可以通過CSS進行修改。
{div}
<div></div>是一個塊級元素，通常與css配合使用，用於佈局。
<div>標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
<div>是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式.
表現。可以通過 <div> 的class 或 id 應用額外的樣式。
css中選定 class使用“.” id使用:"#"{html 結構化標籤}
h1~h6標籤
數字越小，字型越大，一般一個頁面只有一個h1標籤
<ol></ol> 建立一個標有數字的列表
<ul></ul> 建立一個標有圓點的列表
<li> 是<ol>或<ul>的子標籤
<span></span>對幾個文字進行獨立控制
<br>換行標籤
<p></p>段落標籤
<pre></pre>標籤用於定義預先排版的文字。
<pre></pre>元素裡的文字是用定寬字型顯示的，而且會保留空格和換行。
<img src="圖片路徑地址" alt=“在圖片無法顯示的時候,會顯示 alt裡面的文字說明”witht="圖片的寬度 " height="圖片的高度">
<a></a>超連結 <a href="#命名”>文字</a>，注意href值是“#“ 開頭+英文字母命名
<main></main>主區域標籤，一般一個頁面出現一次就可以了
<header></header>頭部區域
<footer></footer>尾部區域
<nav></nav>導航區域
<article></article>一段獨立的內容區域
在article裡面可以使用<section></section>一組相似區域內容的組合
<aside></aside>頁面中小的區域，指與主要內容沒有關係，網頁當中附加的一些東西{css常用標籤}
(定義大小,位置）
witht:1px;(寬度）
heigh:1px;(高度）
line-height ：200%；（屬性設定行間的距離）
程式碼語言中，方向優先順序是按： 上，右，下，左 的順序。
text-align: ; （除錯文字位置）該屬性通過指定行框與哪個點對齊，從而設定塊級元素內文字的水平對齊方式。通過允許使用者調整行內容中字母和字之間的間隔。
可用值：text-align:left;（把文字排列到左邊。屬於預設值：由瀏覽器決定）
text-align: right;（把文字排列到右邊）
text-align:center;（水平居中） text-height:center;(垂直居中）
text-align:justify;（實現兩端對齊文字效果）
text-align:inherit;（從父元素繼承 text-align 屬性的值）(外內邊距）
(外邊距）
margin:1px(左右邊距) 1px ;(上下邊距)
margin-top:1px; (上邊距)
margin-right:1px; (右邊距)
margin-bottom:1px; (下邊距)
margin-left:1px; (左邊距)
margin:0 auto; （居中在父元素中間）
(內邊距）
padding:1px(左右邊距) 1px ;(上下邊距)
padding-top:1px; （上邊距）
padding-right:1px; （右邊距）
padding-bottom:1px; （下邊距）
padding-left:1px; （左邊距）(文字）
文字顏色： color: #ffffff；
文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)
字型大小：font-size:16px; 文字行高：line-height: 30px;
文字粗細： font-weight: bold;(粗體) lighter;(細體) normal;(正常)
文字修飾： text-decoration:line-through; (加刪除線) overline;(加頂線) underline;(加下劃線) none;(無修飾線)
對齊方式： text-align:right; (文字右對齊) left;(文字左對齊) center;(內部元素居中) justify;(文字分散對齊）(背景)
background-color:#fff;(圖片顏色）
background:transparent; (透視背景)
background-image : url(/ 新增路徑 /... ); (背景圖片)
background-attachment : fixed; （浮水印固定背景）
background-repeat : repeat; （平鋪，網頁預設）
background-repeat : no-repeat; （不平鋪）
background-repeat : repeat-x; （在x軸橫向平鋪）
background-repeat : repeat-y; （在y軸垂直平鋪）
opacity:0.5;（設定背景透明度）可選值：0（完全透明）0.5（半透明）1（完全不透明）（圖片定位）
background-position : x% y%; (背景圖片x與y軸的位置)
background-position : top; (向上對齊)
background-position : buttom; (向下對齊)
background-position : left; (向左對齊)
background-position : right; (向右對齊)
background-position : center; (居中)(邊框）
(邊框）
border-top : 1px solid #111; （上邊框）
border-bottom : 1px solid #111; (下邊框)
border-left : 1px solid #111; (左邊框)
border-right : 1px solid #111; （右邊框）
以上是簡寫方式,但也可以使用常規的方式 如下:
border-color : #111；（設定邊框顏色）
border-width :1px； （設定邊框寬度）
border-style : solid；（設定邊框樣式）
(邊框樣式)
solid （實線框）
dotted (虛線框）
double （雙線框）
groove （立體內凸框）
ridge （立體浮雕框）
inset （凹框）
outset （凸框）(calc的使用）
calc是英文單詞calculate(計算)的縮寫，相當於自帶的計算機。
calc( ) 能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
top: calc(50% - 120px);
calc( ) 函式用於動態計算長度值。
需要注意的是:
運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函式進行計算；
calc( )函式支援 "+", "-", "*", "/" 運算；
calc( )函式使用標準的數學運算優先順序規則；(浮動）
(浮動)
float: right; fload屬性有四個可用的值：Left 和Right 分別浮動元素到左邊和右邊，
None (預設值) 使元素不浮動，Inherit 將會從父級元素獲取float值。
(清除浮動)
clear:both; (解決高度坍塌與父子元素的垂直外邊距不重疊）
給浮動元素的容器裡新增一個clearfix，<div class="box clearfix">
然後給這個class新增 before （在元素前面新增一個看不見的塊元素，解決父子元素外邊距重疊）after（在元素後面新增一個看不見的塊元素，解決父子高度塌陷）
css：
.clearfix:before,（在元素前面新增）
.clearfix:after {（在元素後面新增）
conter:"";(新增的內容）
display:table;（設定為表格顯示）
clear:both;（清除浮動）
}(溢位隱藏）
overflow：visible； 屬性用於控制內容溢位元素框時顯示的方式。
可選值：visible：預設值。內容不會被修剪，會呈現在元素框之外。
hidden：內容會被修剪，並且其餘內容是不可見的。
scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto：如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容（去除橫向滾動條）。
inherit：從父元素繼承 overflow 屬性的值。(定位）
Positioning:relative; (相對定位)（參照物為自身原來的位置，相對於元素自己本身的位置）
如果我想讓一個元素在它本來的位置做一些調整(位移)，我們可以將該元素定位設定為relative，同時指定相對位移(利用top,bottom,left,right)。
有一點需要注意的是，相對定位的元素仍然在文件流中，仍然佔據著它本來佔據的位置空間，雖然它現在已經不在本來的位置了。
Positioning:absolute(絕對定位)（參照物為父元素或相鄰的元素，以上都沒有則參照boby）
如果你想在一個文件(Document)中將一個元素放至指定位置，你可以使用absolute來定位，將該元素的position設定為absolute，同時使用top,bottom,left,right來定位。
如果沒有父元素，位置是相對於body來進行的。
絕對定位會使元素從文件流中被刪除，結果就是該元素原本佔據的空間被其它元素所填充。
Positioning:fixed(固定定位)（參照物為瀏覽器視窗）
使用fixed定位，fixed定位的參照物總是當前的文件。利用fixed定位，我們很容易讓一個div定位在瀏覽器文件的左上，右上，居中，等方位。
relative and absolute(混合相對定位和絕對定位)
如果對一個父元素設定relative，而對它的一個子元素設定absolute，
則子元素的絕對定位的參照物為父元素。(z-index的使用=層級優先順序）
z-index的作用是設定元素的層級優先順序，只有定位了的元素，才能有z-index值。
由數字決定，數字越大則使層級靠前，相反，使用負數則使層級靠後。
z-index:1；
z-index:-1;(偽類）
(偽類是專門用來表示元素的一種特殊的狀態，比如：普通的超連結，訪問過的超連結，在比如獲取焦點的文字框，當我們需要為處在特殊狀態下的元素設定樣式時，就可以使用偽類。)
偽類的四種狀態：（4個狀態優先順序一樣，需按順序寫）
預設的狀態（正常連結）a :link{ }
滑鼠點選後狀態（訪問過的連結，只能定義顏色） a:visited { }
滑鼠懸停狀態（滑鼠滑過的連結）a:hover{ }
滑鼠長按狀態（正在點選的連結）a:activ{ }
獲取焦點 :focus{ }
文字選中狀態 :selection{ }
否定偽類 :not(.xxx){ }(可以幫助我們剔除不需要使用偽類的元素)
偽元素：(使用偽元素來表示元素中的一些特殊的位置)
p:first-letter{ }(為P中第一個字元來設定一個特殊的樣式）
p:first-line{ }(為p中的第一行設定一個背景顏色）
p:before { } p:after { }(一般before都需要結合content這個樣式一起使用，通過content(內容)可以向before（表示開始元素後面）或after(表示結束元素前面)的位置新增一些內容）
p:before{
content:"我是誰"；
}
子元素偽類：
:first-child{ }可以選中第一個子元素
:last-child{ }可以選中最後一個子元素
:nth-child( ) { }可以選中任意位置的子元素，（1）用數字來指定
（eve）表示選定偶數位置的子元素
（odd）表示選定奇數位置的子元素
child和type非常相似，（排序方式不同）
child,是在所有的子元素中排列，
type，是在當前所有型別的子元素中排列。
:first-of-type{ }
:last-of-type{ }
:nth-of-type{ }
(屬性選擇器）
作用：可以根據元素中的屬性或屬性值來選取指定元素
語法：[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"]選取屬性值以指定內容開頭的元素
[屬性名$="屬性值"]選取屬性值以指定內容結尾的元素
[屬性名*="屬性值"]選取屬性值以包含指定內容的元素
title屬性（這個屬性可以給任何標籤指定，當滑鼠移入到元素上時，元素中的title屬性的值將會作為提示文字顯示。）
<p title="aaa">我是誰</p>(表格）
<table></table> 表格標籤
<thead></thead>定義表格的頭部
<tbody></tbody>定義表格的主體
<tfoot></tfoot>定義表格的底部
由於<tfoot></tfoot>的特殊性(始終會顯示在頁面下)為方便,可以把表格底部寫在表格頭部下，方便修改。
一個 HTML 表格包括 <table> 元素(table是個塊級元素)，一個或多個 <tr>、<th> 以及 <td> 元素。
<tr> 元素定義為表格行，<th> 元素定義為表頭，<td> 元素定義為表格的單元格。
<caption>xx表格</caption> ( 定義表格的標題)
為td設定 <td colspan=“2“> (橫向合併單元格）
<td rowspan="2">(縱向合併單元格)
border-spacing:0px; (設定table和td邊框之間預設的距離)
border-collapse:collapse; (設定表格邊框的合併)
tr:nth-child(even) { 偶數隔行變色 （odd)奇數隔行變色 (設定隔行變色）
background-color:#111;}(表單）
<form></form> (表單標籤)
<fieldse></fieldse>(可以將表單項進行分組）
<legend>我是誰</legend>（在<fieldse></fieldse>中新增，來對分組框進行取名）
value=""(1:可以用value屬性來指定按鈕上的文字，2:在文字框加入可以作為預設值顯示）
name=""(如果希望表單項的資料提交到伺服器中，就必須給表單項指定一個name屬性，來表示想提交的內容的名字)
<laber></laber>(可以對所有型別表單中的文字進行選中,可以在laber中加入for屬性，該屬性需要指定一個id,作用是使滑鼠無需點選，就可選中）
文字框 <laber for="xx">使用者名稱</laber>
<input id="xx" type="text" name="" value="" />
密碼框
密碼<input type="password" name="" value=""/>
單選框<input type="radio" name="" value="" checked="checked" />
(單選框需要通過name屬性進行分組，name屬性名相同才可以算是一組按鈕，不需要使用者填寫內容的表單，還必須指定一個value屬性，這樣被選中的表單項才能提交到伺服器。）
(希望單選框或多選框新增預設值時，可以新增checked="checked" 屬性。)
多選框<input type="checkbox" name=“”value=“”checked="checked" id="xx"/> <laber for="xx">我是誰</laber>
(多選框也需要通過name屬性進行分組，name屬性名相同才可以算是一組按鈕不需要使用者填寫內容的表單，還必須指定一個value屬性，這樣被選中的表單項才能提交到伺服器。）
下拉列表(使用select建立下拉列表，用option來寫列表內的內容)
(name值指定給 select value值指定給 option)
(希望在下拉列表新增預設值時，可以在option中新增selected="selected"屬性。）
(給select新增一個multiple="multiple" 則下拉列表變為一個多選的下拉列表)
(可以在select中使用<optgroup></optgroup>對選項進行分組，<optgroup>中需要新增label="" 作為分組名。)
<select name="" multiple="multiple">
<optgroup label="我">
<option value="" selected="selected">我是誰</option>
</optgroup>
<optgroup label="你">
<option value="" selected="selected">你是誰</option>
</optgroup>
</select>
提交按鈕<input type="submit" />
重置按鈕<input type="reset" />
空白按鈕<button type="" >我是誰</button>(此方法靈活，可改變按鈕樣式)
自我介紹<textarea name=""></textarea> (標籤建立一個多行的文字框，可以用css來定義框的樣式。)