整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML ul li 橫排居中排列的方法，三步驟及實例
無序列表的列表項默認(rèn)情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進(jìn)行橫排，比用無序列表ul元素定義一個導(dǎo)航條。那該怎么辦呢？這當(dāng)中有三個應(yīng)當(dāng)被解決的東西，一個是橫排本身，另一個就是應(yīng)當(dāng)把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：
HTML ul li 橫排居中排列的方法，三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設(shè)置成inline或inline-block，個人比較常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設(shè)置為center即可將ul水平居中。除此之外，因為ul的列表默認(rèn)情況下是有左內(nèi)邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內(nèi)邊距padding-left設(shè)置為0，具體可見下方的綜合實例。
垂直居中方法：為包含ul元素的div元素設(shè)置寬度width和高度height（實際上導(dǎo)航條一般也需要有寬度和高度的設(shè)置），然后將ul的line-height屬性設(shè)置為父元素的高度height即可。
將ul元素的list-style屬性設(shè)置為none即可。
HTML ul li 橫排居中排列的方法，三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程
如上代碼，一定要將ul的左內(nèi)邊距padding-left設(shè)置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。
笨鳥工具-璞玉天成，大器晚成
，只要會往`<canvas>`里面畫一個長方形，就可以做出來這樣子的效果，畫比較多的正方形實現(xiàn)像素風(fēng)頭像生成器：
趕時間的客官可以直接去`正文開始`那里。
今天有個想法，整成手把手系列，就是假設(shè)客官是一個從來沒有接觸過網(wǎng)頁編輯、代碼、編程的新手。所以會說的比較詳細(xì)，比較累贅，大神們笑笑點個贊就好了，哈哈。
我的想法（初心）是，將一個有興趣寫網(wǎng)頁，但是不知道從何開始的人，通過幾篇很小的實例，讓他產(chǎn)生興趣，跟出效果，形成自己動手去學(xué)習(xí)的動力，便是最好了。
所以，努力寫得通俗易懂，簡單直接，拋開別的因素，先實現(xiàn)出來再說，那時候?qū)W寫代碼的時候也是聽師傅說“先有后優(yōu)”，所以，粗糙點不管，能說明問題便好。
有客官對于我前面幾天碼的字，有反饋，有問題提出來，非常感謝有人搭理我。提出來的1,web字體設(shè)置的方法，2,響應(yīng)式布局，3,網(wǎng)頁上面音頻播放的多瀏覽器兼容問題，4,不知從何入手學(xué)習(xí)一個東西...我都在拿著小本記下來，閑暇時間趕緊去搜集一些比較好的方法，盡力去更新分享這些方面的一小點經(jīng)驗，還請各位客官多多搭理我呀。
這里先把昨天最后那個小坑給添一下，那個響應(yīng)式布局，是通過在CSS里面定義不同屏幕寬度時候使用不同的樣式，直接帖代碼出來吧：
@media screen and ( max-width: 1920px ) {
div.content {
height: 600px;
width: 300px;
float: left;
padding-top: 97px;
}
div.sider {
float: right;
}
body {
width: 600.111111px;
margin: 0 auto;
}
}
@media screen and ( max-width: 720px ) {
div {
display: block;
clear:both;
height: auto;
}
div.content {
display: block;
height: auto;
width: 100%;
}
div.sider {
display: block;
width: 100%;
padding-bottom: 100px;
}
body {
margin: 0;
padding: 0;
width: 100%;
}
}
在1920到720這么寬的時候，兩個div左右浮動，在小于720的時候，兩個div顯示模式改為塊級元素，寬度定義為100%，也就變成豎著排列了。就這樣子。
接下來，正文開始：
1, 只用一個文件：`t.html`就好了，忘掉那些什么最佳實踐，干就完了，新建文本文件，然后重命名成`t.html`，注意，重命名成網(wǎng)頁之后，文件的圖標(biāo)會發(fā)生變化，不是以前文本文檔時候的樣子，如果圖標(biāo)沒變，你極可能重命名成了`t.html.txt`這樣子的，我的小視頻里面有如何設(shè)置windows7顯示擴(kuò)展名，看看也是極好的。
2, 很簡單的網(wǎng)頁基本代碼：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>像素風(fēng)頭像生成器</title> </head> <body> <div id="wrapper"> <!--第一個注釋，這里等下放畫板（canvas標(biāo)簽）--> </div> <!--第二個注釋，這里等下放javascript代碼--> </body> </html>
復(fù)制上面的代碼到`t.html`里面，然后保存，存成utf-8編碼格式(實例001里面有個圖片演示了怎么保存)。
3, 繼續(xù)編輯`t.html`文件，在兩個注釋的地方，第一個放入`<canvas>`標(biāo)簽，同時給它樣式，定義大小(寬500,高400），還有一個邊框（1像素實心線奶奶灰色），`<canvas>標(biāo)簽中間的一句話，在不支持canvas標(biāo)簽的瀏覽器里面會被顯示出來`：
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;"> 快看，這里有一個還在用IE6/8的老實人，大家快來~~ </canvas>
4, 第2步里面的第二個注釋的位置，加入javascript代碼，看代碼注釋理解語句的含義：
<script type="text/javascript">
//在html中用ID找到叫做`mycanvas`的畫布，給它取名叫c
var c = document.getElementById("myCanvas");
//通過這個c（剛才找到的畫布），拿到一套可以畫2D圖片的基本工具， 取名叫ctx，可以理解成拿起一根畫筆
var ctx=c.getContext("2d");
//給ctx這根畫筆，蘸上橙色
ctx.fillStyle="orange";
//用ctx這根畫筆，在x=100,y=90這個坐標(biāo)位置，畫一個長80,寬40的長方形
ctx.fillRect(100,90,80,40);
</script>
效果：
在畫布的左上角，坐標(biāo)為0,0
大小位置標(biāo)注：
嗯，就是這樣
是不是很簡單呀，在網(wǎng)上可以搜索`html5 canvas 基本開關(guān)`了解更多，不知客官可否通過這個別樣的“畫布”畫出來一個五角星呢？歡迎挑戰(zhàn)。
晚安
PS：出版物上數(shù)字用法的規(guī)定
二、至于表示數(shù)字，橫排多會使用阿拉伯?dāng)?shù)字，而豎排多會使用漢字?jǐn)?shù)字。豎排如要使用阿拉伯?dāng)?shù)字或拉丁字母，則可以照常書寫，或順時針90度旋轉(zhuǎn)并排，以配合豎排行文方向。維基百科：東亞文字排列方向
綜上：
錢老師關(guān)于字體排版的舉例已經(jīng)很全面了，但是從規(guī)定來看，豎中橫的方式是不符合中國的出版物規(guī)范的。
所以正規(guī)場合中的排版方式應(yīng)為下圖中的半角豎排和全角豎排兩種。
當(dāng)然以上均為排版中對日期的美學(xué)編排，如果在PPT、海報、文件封面等情況下，就可以利用字體、字號、位置等方面對其進(jìn)行靈活的構(gòu)圖美化。
非專業(yè)人士，錯誤之處還望指正。
完～
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
