Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

Code example of css implementation of navigation switching

不言
Release： 2018-08-07 11:27:04
Original
1728 people have browsed it

The content of this article is about the code examples of CSS navigation switching. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Rendering:

The code is as follows, copy and use: 

<!DOCTYPE html>
<html>
<head>
    <title>css实现导航切换</title>
    <style type="text/css">
        .clothes{width:1170px;margin:0 auto;border-bottom:1px solid red;margin:30px; }
        *{padding:0;margin:0;}
        li{list-style:none;height:35px;line-height:35px;width:64px;text-align:center;}
        a{text-decoration:none;color:#000;text-align:center;font-size:12px;font-family:"微软雅黑";margin-bottom:-1px;}
        .clearfix:after{content:"/200b";height:0;display:block;visibility: hidden;clear: both;}
        ul li{float:left;border-top:1px solid #ededed;}
        a{border-left:1px solid #fff;width:64px;text-align:center;display:inline-block;height:33px;line-height:33px;margin-bottom:1px;}
        a:hover{background:#fff;border-top:2px solid red;border-left:1px solid red !important;border-right:1px solid red;
            height:34px;line-height:34px;
        }
    </style>
</head>
<body>
    <div class="clothes">
        <ul class="clearfix">
            <li style="border-left:1px solid #ededed;"><a style="border-left:1px solid #fff;" href="">大牌</a></li>
            <li><a href="">男装</a></li>
            <li><a href="">女装</a></li>
            <li><a href="">鞋靴</a></li>
            <li><a href="">箱包</a></li>
            <li><a href="">内衣配饰</a></li>
            <li><a href="">珠宝首饰</a></li>
            <li><a href="">奢侈礼品</a></li>
            <li style="border-right:1px solid #ededed;"><a href="">奢华腕表</a></li>
        </ul>
    </div>
</body>
</html>
Copy after login

Recommended related articles:

How to use css to make images adapt to the screen?

What are the common implementation methods of horizontal and vertical centering in CSS? Three common horizontal and vertical centering methods in CSS

The above is the detailed content of Code example of css implementation of navigation switching. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
css实现导航
source：php.cn
Previous article：How to use pure CSS to achieve the effect of a green pig Next article：An introduction to fluid layout, elements, and dimensions in CSS
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
Show hidden side panels: checked I would like to have a navigation menu in the side panel with the ability to switch to vie...
From 2024-04-06 15:49:33
0
1
319
CSS bottom border on navigation bar I have a navigation bar and I have added a red line at the bottom when any item in the lis...
From 2024-04-06 15:04:41
0
2
347
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Make sure the table cell's container fills the entire height of the parent I'm trying to vertically align the content without using Flexbox, because there are some i...
From 2024-04-04 16:03:18
0
1
404
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template