css +html实现网站二级导航

最新推荐文章于 2024-08-25 19:34:22 发布

凌泷时代

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/lansing_1995/article/details/51476862

版权

通过几个小时的学习和实践，成功实现了网站的二级导航菜单。这个过程加深了对CSS和HTML的理解，尤其是利用小白块消除链接间隙的技巧，既创新又实用。虽然目前还有些生疏，但预期未来能更高效地完成此类任务。

摘要由CSDN通过智能技术生成

做了好几个小时，也算有点模样，学到了很多东西，看过的东西还是要多练才能理解的透彻，连接处的白边可以用小白块覆盖，真的很有创意（这是’剽窃’老师的思想了），做的练习还是不太够的感觉，以后应该可以做的快一点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京东首页分类导航效果</title>
<style type="text/css">
*{ padding:0; font-size:16px; line-height:1.8;}
.topmenu{
    display:block;
    border:solid #B1191A 1px;
    width:210px;
    z-index:3;
}
 .topmenu li{
    list-style-type:none;
    text-indent:0px;
       background:url(1.jpg);
    background-repeat:no-repeat;
    background-position:right;
     }
 .topmenu li>a{
     text-indent:10px;
     color: #313131;
    text-decoration:none; 
 }

.toptitle{
    background-color:#B1191A;
    color:white;
    font-size:18px;

    height:50px;
    padding-left:10px;
}
    .topmenu li:hover
    {
        text-decoration:underline;
        border: 1px solid #DDD;
        border-right:0;
        box-shadow:0 0 8px #DDD;
        background-image:url(2.png);
        background-position:right;
    }

    .topmenu li:hover span {
    background: white none repeat scroll 0 0;
    display: inline-block;
    float: right;
    height: 30px;
    position: relative;