前端三十:模仿新浪的导航

最新推荐文章于 2021-09-20 17:05:06 发布
最新推荐文章于 2021-09-20 17:05:06 发布
阅读量383 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37564426/article/details/91491618
版权 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height: 1500px;
        }
        .navigation{
            border-top:3px solid #FF8500;
            border-bottom: 1px solid #EDEEF0;
            height:41px;
            background-color: #FCFCFC;
        }

        a{
            color:#4C4C4C;
            text-decoration: none;
            height: 41px;
            display: inline-block;
            padding: 0 15px;
            line-height: 41px;
            font-size: 12px;
        }

        a:hover{
            color:#FF8500;
            background-color: #EDEEF0;
        }

        .banxin{
            width: 1000px;
            height: 41px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="navigation">
        <div class="banxin">
             <a href="#">设为首页</a>
            <a href="#">手机新浪网</a>
            <a href="#">移动客户端</a>
        </div>
        
    </div>
</body>
</html>

 

总结： 这个模仿html中，用到了a标签，hover伪类标签。div标签。

            用到了两个div标签。其中class="banxin"的div标签一般设置的width都为1000px.

            这个实例中，要用到fireworks工具，这个工具功能很强大。

          

            

请叫我大虾
关注
专栏目录
Web前端————微博主页模仿
weixin_41460135的博客
08-08 2196
文章目录Web前端————微博主页模仿CSS部分HTML部分index主体部分 Web前端————微博主页模仿 CSS部分 /*! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/boot...
前端小米商城首页简易模仿
人生当苦无妨
08-18 1466
前端小米商城首页简易模仿 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城首页zzy</title> <link rel="icon" href="img/favicon.ico"> <link rel="stylesheet" href="./
仿新浪首页、主题、详情页，纯html静态页面
10-27
仿新浪首页、主题、详情页，纯html静态页面
模仿新浪页面
Dalu_1226的博客
10-06 1159
一、模仿页面 新浪首页部分页面 二、div区域划分 a.所模仿部分位于整个首页的头部，故需要用div划分出整个页面的上部 b.上述页面从左至右共有五个模块（不包括最后一列的 交易 理财 ），同样需要划分成五个区域，但div划分的是上下方向上的区域，这就需要用到了一个新的知识点就是浮动。 具体操作：先将区域上下划分，在进行左浮动，即可达到想要的效果。 源代码 <div id="nav" ， ...
仿新浪导航栏（固定定位练习）
leechoy
06-18 742
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .top{ position: fixed; top: 0px; height: 44px; width: 100%; text-align: center; } .box { wid
仿新浪导航栏
leechoy
06-09 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏test</title> <style> * { margin: 0; padding: 0; } .nav { height: 41px; background: #FCFCFC; /*上边框*/ border-top: 3.
前端菜鸟模仿新浪导航
Jy
06-03 1517
大家可以去新浪网看看导航，前几天突然有这样的一个想法，所以就来撸一番代码。详细看代码。 index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta char
模仿新浪云首页
03-06
模仿新浪云首页，旨在学习和掌握网页设计的基本原则、前端开发技术以及响应式布局等关键知识点。下面我们将详细探讨这些方面。 1. **网页设计原则**： - **用户体验**：首页设计应以用户为中心，提供清晰的导航，...
新浪博客前端html5+javascript
10-06
本项目“新浪博客前端html5+javascript”正是以此为基础，通过模仿新浪博客的界面设计并融入自创特效，旨在为前端开发者提供一个实践和学习的平台。 首先，我们来看看HTML5。HTML5是超文本标记语言的第五个版本，它...
相册 新浪图片
09-11
综上所述，创建一个类似新浪图片的相册功能涉及到前端开发的多个层面，从UI设计到后端数据处理，再到用户体验优化，都需要综合运用多种技术和技巧。通过合理的设计和实现，可以创建一个既美观又实用的图片浏览系统。
swift-仿新浪微博首页(cell定制)
08-15
仿新浪微博首页(cell定制)
仿新浪首页，仿腾讯首页手机版新闻门户HTML5源码
12-18
仿新浪首页，仿腾讯首页手机版新闻门户HTML5源码 免费，免积分
前端初学者二级导航(超简单的例子)
08-02
超简单的一些前端学习例子，比如简易轮播图，简易二级导航等，有一两个例子因为懒所以没写完，美化也没做，只是一些原理性的东西而已
前端项目练手-模仿天猫官网前端
11-29
前端项目练手-模仿天猫官网前端
web前端基础案例
09-30
介绍了web前端技术基础html+css+js的运用教程，通过一个小案例学习
5.仿新浪网首页导航条
neilro的博客
01-16 468
效果： 把鼠标放在导航条上背景会变色（hover效果） 这个例子重点在于内外边距的理解和运用： 新浪首页 .nav{ height:40px; background:#eee; border-top:3px solid orange; border-bottom:1px solid #aaa; }
web开发之简易新浪导航栏
一杯咖啡，一行代码
09-20 316
用到padding知识： <!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"> ...
新浪博客前端架构：代码框架与加载策略
"新浪博客前端架构分享" 新浪博客前端架构是一个精心设计的系统，旨在优化网站的性能、可维护性和可扩展性。该架构主要由三个核心部分组成：代码框架、代码的加载与执行以及开发流程。以下是这些部分的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值