我们在网页制作中，会有许多的术语

例如：CSS、HTML、DHTML、XHTML等等。

下面开始使用DIV+CSS进行网页布局设计。

所有的设计第一步就是构思，构思好了，还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

下面，我们需要根据构思图来规划一下页面的布局，图片大致分为以下几个部分：

一、前言

CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。

有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？

二、需求

想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：

这个纯CSS实现的Loading特效是一个非常简单而实用的选择，它由三个圆圈横向排列，并不断闪烁。这种动画效果很适合用于页面加载过程中，为用户提供一个愉悦的等待体验。

在这个特效的设计中，使用了CSS的animation属性来实现圆圈的闪烁效果。这个特效的实现并没有用到任何JavaScript，这意味着它可以帮助提升网站的性能，同时也减少了代码的复杂性。

ul li 横排居中排列的方法

无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：