网页定位 - 右侧导航栏效果

最新推荐文章于 2024-04-14 12:10:13 发布

一纸流年

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量1.9k

点赞数 3

本文链接：https://blog.csdn.net/m0_37109682/article/details/80650296

版权

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>网页定位导航效果</title>
  6     <style>
  7         *{
     
  8             margin: 0;
  9             padding: 0;
 10         }  
 11         
 12         body{
     
 13             font-size: 12px;
 14             line-height: 1.7;
 15         }
 16         
 17         li{
     
 18             list-style: none;
 19         }
 20         
 21         #content{
     
 22             width: 800px;
 23             margin: 0 auto;
 24             padding: 20px;
 25         }
 26         
 27         #content h1{
     
 28             color:#0088bb;
 29         }
 30         
 31         #content .item{
     
 32             padding: 20px;
 33             margin-bottom: 20px;
 34             border:1px dotted #0088bb;
 35         }
 36         
 37         #content .item h2{
     
 38             font-size:16px;
 39             font-weight: bold;
 40             border-bottom: 2px solid #0088bb;
 41             margin-bottom: 10px;
 42         }
 43         
 44         #content .item li{
     
 45             display: inline;
 46             margin-right: 10px;
 47         }
 48         
 49         #content .item li a img{
     
 50             width: 230px; 
 51             height: 230px;
 52             border: none;
 53         }
 54         
 55 /*        右侧定位导航栏*/
 56         #menu{
     
 57             position: fixed;
 58             top:100px;
 59             left: 50%;
 60             margin-left: 400px;
 61             width: 60px;
 62         }
 63         #menu ul li a{
     
 64             display: block;
 65             margin: 5px 0;
 66             font-size: 14px; 
 67             font-weight: bold;
 68             color: #333;

最低0.47元/天解锁文章

一纸流年

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
网页定位 - 右侧导航栏效果

1 &lt;!DOCTYPE html&gt; 2 &lt;html lang="en"&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;网页定位导航效果&lt;/title&gt; 6 &lt;style&gt;
复制链接

扫一扫