Kesion CMS combined with CSS to create a fresh style article list effect

From the point of view of

forum, and many users are not familiar with CSS, today we talk about the Kesion CMS label list of call and talk about how to use CSS control list effect. Hope to be of some help to you….


news list is an important component of a web site. We will often encounter it, and how to deal with his appearance is particularly important. Today, let’s take an example. In an example, we float the title and date separately, and show different color changes when the linked mouse hovers. And we control the background of the LI so that it also generates some interaction. Overall, the results are good. You can see the following effect diagram:

this topic related pictures are as follows: article list effect diagram.Gif



implementation steps:


logon Kesion system background, the new column, click on the add column " " as shown below:

this topic related pictures are as follows: add column.Gif




is the root of the column (channel) column " is " no; if it is, the sub section belongs to a column select columns, column name Chinese input, such as news channel, English automatic translation, which is a feature of Kesion system, if not saved in front of direct translation too long or want to rename can delete and English type the name you want to, in the column is added to the editor English name is not

by the way,

here can bind the column and content page template, click " select the template " you can choose your own template to bind.

is also the column serial number. The smaller the ordinal number, the more.

will be placed in front of the navigation

click " make sure " is added; add.

to the column

returns to the column management page, if you want to add a column to click add column " ", belongs to a column, if we want to add Olympic news in the news channel, select " columns; the news channel, as shown below:


this topic related pictures are as follows: sub column to add.Gif



column, the site is on this side…..

added (see article below in order to save time, directly quoted Kesion CMS>

Be the first to comment

Leave a comment

Your email address will not be published.