整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML ul li 横排居中排列的方法，三步骤及实例
无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：
HTML ul li 横排居中排列的方法，三步骤及实例
将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者：
ul li{display:inline-block;}
水平居中方法：只要将ul元素包含于一个div元素，并将div元素的text-align属性设置为center即可将ul水平居中。除此之外，因为ul的列表默认情况下是有左内边距的，所以，为了能够让列表能够更好地水平居中，需要将ul的左内边距padding-left设置为0，具体可见下方的综合实例。
垂直居中方法：为包含ul元素的div元素设置宽度width和高度height（实际上导航条一般也需要有宽度和高度的设置），然后将ul的line-height属性设置为父元素的高度height即可。
将ul元素的list-style属性设置为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的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。
笨鸟工具-璞玉天成，大器晚成
，只要会往`<canvas>`里面画一个长方形，就可以做出来这样子的效果，画比较多的正方形实现像素风头像生成器：
赶时间的客官可以直接去`正文开始`那里。
今天有个想法，整成手把手系列，就是假设客官是一个从来没有接触过网页编辑、代码、编程的新手。所以会说的比较详细，比较累赘，大神们笑笑点个赞就好了，哈哈。
我的想法（初心）是，将一个有兴趣写网页，但是不知道从何开始的人，通过几篇很小的实例，让他产生兴趣，跟出效果，形成自己动手去学习的动力，便是最好了。
所以，努力写得通俗易懂，简单直接，抛开别的因素，先实现出来再说，那时候学写代码的时候也是听师傅说“先有后优”，所以，粗糙点不管，能说明问题便好。
有客官对于我前面几天码的字，有反馈，有问题提出来，非常感谢有人搭理我。提出来的1,web字体设置的方法，2,响应式布局，3,网页上面音频播放的多浏览器兼容问题，4,不知从何入手学习一个东西...我都在拿着小本记下来，闲暇时间赶紧去搜集一些比较好的方法，尽力去更新分享这些方面的一小点经验，还请各位客官多多搭理我呀。
这里先把昨天最后那个小坑给添一下，那个响应式布局，是通过在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`，注意，重命名成网页之后，文件的图标会发生变化，不是以前文本文档时候的样子，如果图标没变，你极可能重命名成了`t.html.txt`这样子的，我的小视频里面有如何设置windows7显示扩展名，看看也是极好的。
2, 很简单的网页基本代码：
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>像素风头像生成器</title> </head> <body> <div id="wrapper"> <!--第一个注释，这里等下放画板（canvas标签）--> </div> <!--第二个注释，这里等下放javascript代码--> </body> </html>
复制上面的代码到`t.html`里面，然后保存，存成utf-8编码格式(实例001里面有个图片演示了怎么保存)。
3, 继续编辑`t.html`文件，在两个注释的地方，第一个放入`<canvas>`标签，同时给它样式，定义大小(宽500,高400），还有一个边框（1像素实心线奶奶灰色），`<canvas>标签中间的一句话，在不支持canvas标签的浏览器里面会被显示出来`：
<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这个坐标位置，画一个长80,宽40的长方形
ctx.fillRect(100,90,80,40);
</script>
效果：
在画布的左上角，坐标为0,0
大小位置标注：
嗯，就是这样
是不是很简单呀，在网上可以搜索`html5 canvas 基本开关`了解更多，不知客官可否通过这个别样的“画布”画出来一个五角星呢？欢迎挑战。
晚安
PS：出版物上数字用法的规定
二、至于表示数字，横排多会使用阿拉伯数字，而竖排多会使用汉字数字。竖排如要使用阿拉伯数字或拉丁字母，则可以照常书写，或顺时针90度旋转并排，以配合竖排行文方向。维基百科：东亚文字排列方向
综上：
钱老师关于字体排版的举例已经很全面了，但是从规定来看，竖中横的方式是不符合中国的出版物规范的。
所以正规场合中的排版方式应为下图中的半角竖排和全角竖排两种。
当然以上均为排版中对日期的美学编排，如果在PPT、海报、文件封面等情况下，就可以利用字体、字号、位置等方面对其进行灵活的构图美化。
非专业人士，错误之处还望指正。
完～
*请认真填写需求信息，我们会在24小时内与您取得联系。
