前端练习——购物网站框架

最新推荐文章于 2024-04-05 21:08:35 发布

aaaaaaapple22

最新推荐文章于 2024-04-05 21:08:35 发布

阅读量2k

点赞数 4

文章标签：前端 html 图片导航框架

本文链接：https://blog.csdn.net/aaaaaaapple22/article/details/70652711

版权

这篇博客探讨了如何使用前端技术实现购物网站的导航框架，重点在于网页定位和导航特效的实现。通过HTML和相关样式技巧，创建出具有吸引力的用户体验。

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

主要技术点：网页定位导航特效

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地狗购物网——网页定位导航特效</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 12px;
            line-height: 1.7;
        }
        li{
            list-style: none;
        }
        #content{
            width: 800px;
            margin: o auto;
            padding: 20px;
        }
        #content h1{
            color: #08b;
        }
        #content .item{
            padding: 20px;
            max-resolution: 20px;
            border:1px dotted #08b;
        }
        #content .item h2 {
            font-size: 16px;
            font-weight:bold;
            border-bottom: 1px solid #08b;
            max-resolution: 10px;

        }
        #content .item li {
            display: inline;
            margin-right: 10px;
        }
        #content .item li a img {
            width: 230px;
            height: 230px;
            border:none;
        }
        #menu{
            position: fixed;
            top: 100px;
            left:50%;
            margin-left: 200px;
            width: 80px;
        }
        #menu ul li a {
            display: block;
            margin:5px 0;
            font-size: 14px;
            font-weight:bold;
            color: #333333;
            width: 80px;
            height:50px;
            line-height:50px;
            text-decoration: none;
            text-align: center;
        }
        #menu ul li a:hover,#menu ul li a.current{