Web page Teaching Network code sharing: Clean and concise page list code

Article Introduction: Web Teaching Network code sharing: Clean and concise page list code.

Who doesn't want a nice, clean list of pages? In this article we give a few practical examples that you can apply directly to your work.

We start with an animated vertical list, followed by an example of a graphic mix, followed by an example of a list of pictures and a horizontal menu, and finally a list that starts with a larger number. For beginners here can learn a lot of things, for the proficient, directly to use it.

List of 1.helvetica fonts

The first example of the style looks prosaic, but like the minimalist style may be interested in, this is similar to the printed font style, simple knot at the same time without losing the characteristics of the smart (when the mouse slide up the time). Note: The individual likes the second picture mixed row Here example, but discovers the foreigner prefers first, perhaps this is the cultural difference ...

This is the source demo address: Codepen

First look at the effect of the picture:

The following is the HTML code:

/div> HelvetiList zurich Geneva Winterthur Lausanne Lucerne

Here is the CSS code:

div {width:200px} h2 {font:400 40px/1.5 Helvetica, Verdana, Sans-serif; margin:0; padding:0;} ul {List-style-typ E:none; margin:0; padding:0; Li {font:200 20px/1.5 Helvetica, Verdana, Sans-serif; border-bottom:1px solid #ccc;} li:last-child {border:none;} Li a {text-decoration:none; color: #000; display:block; width:200px;-webkit-transition:font-size 0.3s Ease, Backgro Und-color 0.3s Ease; -moz-transition:font-size 0.3s Ease, background-color 0.3s ease; -o-transition:font-size 0.3s Ease, background-color 0.3s ease; -ms-transition:font-size 0.3s Ease, background-color 0.3s ease; Transition:font-size 0.3s Ease, background-color 0.3s ease; Li a:hover {font-size:30px; background: #f6f6f6;}

/strong>

2. The thumbnail List of the picture and text mixed row

This is a lot of web sites are used more popular list style, "graphics and text mixed row", text mixed row is often more attractive than a single text more eye-catching, many WordPress blog sites are mixed with graphics and text row of the plate.

Here is the source demo address: Codepen.

First look at the effect of the picture:

The following is the HTML code:

headline lorem ipsum dolor sit amet... Headline lorem ipsum dolor sit amet... Headline lorem ipsum dolor sit amet... Headline lorem ipsum dolor sit amet...

The code here is a bit more complicated than the example above. Each list element has three child elements: Picture, caption, text description. Note that the size of the picture must be fixed to 100px times 100px, otherwise the size of the picture will make the layout confusing, you can force in the HTML code to this size. In general, it is relatively simple to achieve.

Here is the CSS code:

* {margin:0; padding:0;} div {margin:20px} ul {list-style-type:none; width:500px;} h3 {Font:bold 20px/1.5 Helvetica, Verdana, Sans-serif; Li img {float:left margin:0 15px 0 0} Li p {font:200 12px/1.5 Georgia, Times New Roman, serif;} li {padding: 10px; Overflow:auto; } li:hover {background: #eee; cursor:pointer;}

The CSS code page is very brief. We reset the margin and padding of all the elements. Just remember to float the picture to the left so that the text is next to you.

3. Standard picture grid Standard Thumbnail grid

Here is the source demo address: Codepen.

Effect Chart:

The following is the HTML code:

< Li> < Li>

/p>

Here is the CSS code:

* {margin:0; padding:0;} body {background: #333;} div {width:900px; margin:0 auto; overflow:auto;} ul {list-st Yle-type:none; Li img {float:left margin:10px; border:5px solid #fff;-webkit-transition:box-shadow 0.5s Ease Ox-shadow 0.5s Ease; -o-transition:box-shadow 0.5s Ease; -ms-transition:box-shadow 0.5s Ease; Transition:box-shadow 0.5s Ease; Li Img:hover {-webkit-box-shadow:0px 0px 7px rgba (255,255,255,0.9) box-shadow:0px 0px 7px rgba (255,255,255,0.9);

The point here is to add a certain margin to each picture and then float it to the left, then clear the float with Over-flow:auto (for insurance purposes, make sure to clear the float after using the float). Add a black background to the entire grid and a border around each picture. To make the grid more interesting, I added a mouse painting to show the effect of the glow. You can use it selectively, without having to use this effect in every project.

4. Horizontal Menu Horizontal Menus

Here to view demo and source Codepen.

HTML code:

Home About Portfolio Contact

CSS code:

* {margin:0; padding:0;} nav {margin:50px;} ul {overflow:auto; list-style-type:none;} li {height:25px; float: Left margin-right:0px; border-right:1px solid #aaa; Padding:0 20px; } li:last-child {Border-right:none} li a {text-decoration:none; color: #ccc; font:25px/1 Helvetica, Verdana, sans-s Erif; Text-transform:uppercase; -webkit-transition:all 0.5s Ease; -moz-transition:all 0.5s Ease; -o-transition:all 0.5s Ease; -ms-transition:all 0.5s Ease; Transition:all 0.5s Ease; Li a:hover {color: #666;} li.active a {font-weight:bold; color: #333;}

5. Large number of the beginning of the list of big Numbers Ordered list

All of these are unordered lists, and if we want an ordered list, add a number to the beginning of each list element to prompt the user that this is a sequential content. If you can display this number of different styles, there will be a better intuitive feeling.

Here to view demo and source Codepen.

HTML code:

1. lorem ipsum dolor sit amet, consectetur Adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum. Nam quis justo in Augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec Leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu. Praesent purus Turpis, consectetur quis congue vel, pulvinar at Lorem. Vivamus varius condimentum dolor, quis ultricies and Ipsum porta. 2. lorem ipsum dolor sit amet, consectetur Adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum. Nam quis justo in Augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. 3. lorem ipsum dolor sit amet, consectetur Adipiscing elit. Praesent euismod ultrices Ante, aC laoreet nulla vestibulum adipiscing. Nam quis justo in Augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.

CSS code:

div {width:500px margin:10px} ol {color: #ccc; list-style-type:none} ol li {position:relative; Font:bold Itali C 45px/1.5 Helvetica, Verdana, Sans-serif; margin-bottom:20px; } li p {font:12px/1.5 Helvetica, sans-serif; padding-left:60px; color: #555;} span {position:absolute;}

There are 5 simple and useful list instances, if you like, you can use them directly.