2021-11-05

最新推荐文章于 2023-10-19 20:24:30 发布
最新推荐文章于 2023-10-19 20:24:30 发布
阅读量37 收藏
点赞数
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59598943/article/details/121163609
版权 
<!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>
    <style>
        .nav {
            text-align: center;
        }
        
        .nav a
        {
            display:inline-block;
            width: 120px;
            height:50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            text-decoration: none;
            background: url(./bg.png);
        }
        .nav a:hover
        {
           
            background: url(./bgc.png);
        }

    </style>
</head>
<body>
<div class="nav">  
    <a href="#">网站首页</a>
	<a href="#">网站首页</a>
	<a href="#">网站首页</a>
	<a href="#">网站首页</a>
    <a href="#">网站首页</a>
    <a href="#">网站首页</a>
  </div>
  
</body>
</html>

<!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>
    <style>
        .nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: #ff8500 3px solid;
            border-bottom: 1px #edeef0 solid ;
            line-height: 41px;

        }
        .nav a{
       
            display: inline-block;
            height: 41px;
            padding:0 20px;
            font-size:16px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .nav a:hover{
            background-color: #eee;
            color: #ff8500;
        }
      
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>

    </div>

</body>
</html>

 

◕901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新浪导航栏
qq_40687516的博客
11-20 775
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏</title> <style type="text/css"> *{ margin: 0; padding:0; } .top { ...
案例：新浪导航案例-padding影响盒子好处---CSS
H.千面的博客
12-02 576
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
前端习题之简易新浪导航栏
weixin_47481936的博客
11-08 642
简易新浪导航栏 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .nav{ height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; b
新浪导航栏(CSS)
Valentino112358的博客
09-19 1423
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .na
基于CSS的新浪导航案例
weixin_45995139的博客
09-28 377
分析： 1. padding内边距可以撑开盒子，我们可以做非常巧妙的运用； 2. 因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
gmall2020-mock-db-2021-11-14.jar
06-26
gmall2020-mock-db-2021-11-14.jar
App_Privacy_Report_v4_2021-11-05T06_08_55.ndjson
11-05
App_Privacy_Report_v4_2021-11-05T06_08_55.ndjson
tampermonkey-backup-chrome-2021-11-27T01-27-17-766Z.zip
11-27
配置过的油猴插件
2021-sc-web-05-band:2021-sc-web-05-band
03-25
标题和描述中提到的"2021-sc-web-05-band:2021-sc-web-05-band"可能是指一个项目或者课程的代码库，可能是关于Web开发的某个阶段或主题，但具体信息不够明确。不过，标签中提到了"CSS"，这代表我们将重点讨论CSS...
2021-05面试.rar
05-11
针对2021年5月的面试趋势，本压缩包包含了四份珍贵的资料：《百度面经-Java工程师.pdf》、《字节跳动算法面试题汇总.pdf》、《美团面经分享 Java工程师.pdf》和《阿里最新面经.pdf》。这些资料覆盖了从基础到高级的...
css综合案例--新浪导航栏（css第三天学习）
最新发布
qq_44803068的博客
10-19 259
凭借肌肉记忆，终于记得格式化代码为shift+alt+f。注意：a一定要转换为行内块元素！
新浪导航案例
绿色水杯
08-22 515
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma
CSS 05-01 新浪导航栏 项目笔记
Write less，do more
06-09 108
一定要先分析 1.先确定结构 div nav a a a a a 2.构建样式 a.构建边框 测量高度 测量背景色 测量上框色 测量下框色 3.
HTML5+CSS3综合案例-新浪导航（盒子）
m0_63171030的博客
03-08 440
【代码】HTML5+CSS3综合案例-新浪导航（盒子）
影响盒子大小的因素，案例-利用padding改变盒子大小的性质来制作导航栏
qq_43632490的博客
06-03 922
padding和border的设置会影响盒子的实际大小，因此需要注意一下width和height的设置，注意去掉padding和border的大小。 模拟新浪导航栏：
01-（案例）综合案例1-新浪导航案例
chenyouuu的博客
10-13 72
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01-（案例）综合案例1-新浪导航案例</title> <s
新浪导航栏案例
weixin_45253216的博客
04-05 982
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏案例</title> <style> /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } .na...
前端学习（新浪导航）
zhangfei199507的博客
02-27 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航</title> </head> <style> * { /*清除元素默认的内外边距*/ margin: 0; ...
实例（一）简单实现新浪导航栏
weixin_52583990的博客
07-18 1254
简单实现新浪导航栏
逗号分隔的多个数据，每个数据项由#分隔的四个小项构成。 # 第一个为题号；第二个为时间；第三个为操作类型，可能的取值：12、11、10--读题，空值-作答；第四个为科目。 data = '''1#2021-05-18 14:31:55##初级会计实务,2#2021-05-18 14:31:57#12#初级会计实务,2#2021-05-18 14:32:08##初级会计实务,3#2021-05-18 14:32:09#12#初级会计实务,4#2021-05-18 14:32:34#12#初级会计实务,4#2021-05-18 14:32:45##初级会计实务,5#2021-05-18 14:32:46#12#初级会计实务,5#2021-05-18 14:32:57##初级会计实务,6#2021-05-18 14:33:00#12#初级会计实务,7#2021-05-18 14:33:44#12#初级会计实务,7#2021-05-18 14:34:42##初级会计实务,8#2021-05-18 14:34:43#12
06-10
这个数据可以使用Python进行解析和处理。可以按照以下步骤进行： 1. 将数据分割成每个数据项。 ``` data_items = data.split(',') ``` 2. 对于每个数据项，将其按#分割成四个小项，并存储到一个列表中。 ``` data_list = [] for item in data_items: item_list = item.split('#') data_list.append(item_list) ``` 3. 对于每个小项，进行相应的类型转换。 ``` for item in data_list: item[0] = int(item[0]) # 题号转换为整数 item[1] = datetime.datetime.strptime(item[1], '%Y-%m-%d %H:%M:%S') # 时间转换为datetime类型 if item[2] != '': # 操作类型转换为整数 item[2] = int(item[2]) item[3] = str(item[3]) # 科目转换为字符串类型 ``` 4. 可以按照需要对数据进行进一步处理，如按照题号、时间等进行排序、筛选等操作。 完整的Python代码如下： ``` import datetime data = '''1#2021-05-18 14:31:55##初级会计实务,2#2021-05-18 14:31:57#12#初级会计实务,2#2021-05-18 14:32:08##初级会计实务,3#2021-05-18 14:32:09#12#初级会计实务,4#2021-05-18 14:32:34#12#初级会计实务,4#2021-05-18 14:32:45##初级会计实务,5#2021-05-18 14:32:46#12#初级会计实务,5#2021-05-18 14:32:57##初级会计实务,6#2021-05-18 14:33:00#12#初级会计实务,7#2021-05-18 14:33:44#12#初级会计实务,7#2021-05-18 14:34:42##初级会计实务,8#2021-05-18 14:34:43#12''' # 将数据分割成每个数据项 data_items = data.split(',') # 对于每个数据项，将其按#分割成四个小项，并存储到一个列表中 data_list = [] for item in data_items: item_list = item.split('#') data_list.append(item_list) # 对于每个小项，进行相应的类型转换 for item in data_list: item[0] = int(item[0]) # 题号转换为整数 item[1] = datetime.datetime.strptime(item[1], '%Y-%m-%d %H:%M:%S') # 时间转换为datetime类型 if item[2] != '': # 操作类型转换为整数 item[2] = int(item[2]) item[3] = str(item[3]) # 科目转换为字符串类型 print(data_list) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值