医院网站导航栏设计 - CSS实现菜单项悬浮效果和搜索图标样式 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--样式用来修饰标签，对标签加一些特殊效果-->
<style type="text/css">
    .top_right{
        width:360px;
        height:100px;
        float:right;
    }
    .trt{
        width:58px;
        height:64px;
        float:left;
        background: url(img/ver_jy.png)no-repeat;
        line-height: 60px;
        text-align: center;
        margin-left: 10px;
        font-size:14px;
    }
    .tr2,.tr3,.tr4,.tr5{
        margin-top:10px;
    }
    .tr1{
        background: url(img/ver_jy.png)no-repeat;
        background-position: 0px -64px;
        color: white;
    }
    .line{
        width:100%;
        height:10px;
        border-top:solid 1px rgb(229, 229, 229);
    }
    .nav{
        width:1200px;
        height: 40px;
        margin: auto;
    }
     /*去掉ul li自带的内间距*/
    *{
        padding: 0px;
    }
    /*标签选择器*/
    li{
       list-style: none;
       float: left;
       /*padding: 10px 20px;*/
       margin: 0px 20px 0px 28px;
       height:30px;
       font-size: 18px;
       transition: 0.8s;
       position: relative;
    }
    /*修饰对象是classnav对象中的第三个li子对象*/
    .nav_ul>li:nth-child(3){
         border-bottom:solid 6px rgb(51,99,160);
    }
    /*悬浮鼠标效果*/
    .nav_ul>li:hover{
        /*border-bottom:solid 6px rgb(51,99,160);*/
    }
    .home>div{
        position:absolute;
        left:0px;
        bottom:0px;
        width:0px;
        height:0px;
        background-color: rgb(51, 99, 160);
        transition:0.8s
    }
    .home:hover>div{
        width: 40px;
        height: 6px;
    }
</style>
<body>
    <div  style="width:1200px;height:120px;margin:auto;">
        <div style="width:360px;height:120px;float:left;">
            <img src="img/62964b89aa11365f.png"/>
        </div>
        <div class="top_right">
            <div class="trt tr1">
                就医版
            </div>
            <div class="trt tr2">
                员工版
            </div>
            <div class="trt tr3">
                老年版 
            </div>
            <div class="trt tr4">
                体验版
            </div>
            <div class="trt tr5">
                English
            </div>
        </div>
    </div>
    <div class="line">
    </div>
    <div class="nav">
        <ul class="nav_ul">
            <li class="home">首页
                <div>
<pre><code>            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;医院概况&lt;/li&gt;
        &lt;li&gt;就诊服务

        &lt;/li&gt;
        &lt;li&gt;专家介绍&lt;/li&gt;
        &lt;li&gt;医联体及对外合作&lt;/li&gt;
        &lt;li&gt;招聘/招标/进修&lt;/li&gt;
        &lt;li&gt;新闻中心&lt;/li&gt;
        &lt;li&gt;院务公开&lt;/li&gt;
        &lt;li&gt;其他&lt;/li&gt;
        &lt;li class=&quot;search&quot;&gt;&lt;img src=&quot;img/search.svg&quot;/&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;style&gt;
    .search{
        margin-right: 0px;
        width:30px;
        height:30px;
        border-radius: 50%;/*圆形*/
        transition:1s;
        text-align: center;/*让li中的img水平居中*/
        line-height: 30px;/*垂直居中*/
    }
    .search:hover{
        background-color: rgb(51, 99, 160);
        /* background: url(img/bg_blue.jpg)no-repeat;
        border:solid 5px rgb(51,99, 160);
        border-radius: 50%; */
    }
&lt;/style&gt;
&lt;!-- &lt;h1&gt;标题标签&lt;/h1&gt; 
&lt;img src=&quot;img/62964b89aa11365f.png&quot;   /&gt; --&gt;
</code></pre>
</body>
</html>
<p><strong>CSS 使用示例：</strong></p>
<ol>
<li>
<p><strong>.top_right</strong>：用来设置顶部右侧区域的样式，包括宽度、高度和浮动方向。</p>
</li>
<li>
<p><strong>li</strong>：用来设置导航栏中每个菜单项的样式，包括去除默认的列表样式、设置浮动方向、设置字体大小和设置悬浮效果等。</p>
</li>
<li>
<p><strong>.nav_ul&gt;li:nth-child(3)</strong>：用来设置导航栏中第三个菜单项的样式，包括设置底部边框的颜色和粗细等。</p>
</li>
<li>
<p><strong>.home&gt;div</strong> 和 <strong>.home:hover&gt;div</strong>：用来设置导航栏中首页菜单项的悬浮效果，包括设置一个宽度和高度为 0 的 div 元素，并通过 :hover 伪类实现悬浮时的动画效果。</p>
</li>
<li>
<p><strong>.search</strong> 和 <strong>.search:hover</strong>：用来设置导航栏中的搜索图标的样式，包括设置宽度、高度和边框圆角等，在 :hover 伪类中实现悬浮时的背景颜色变化效果。</p>
</li>
</ol>