CSS简单样式练习（三）
运行效果：
源代码：
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简单样式练习（三）的更多相关文章
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- CSS常用样式（三）
一.2D变换 1.transform 设置或检索对象的转换 取值: none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...
- CSS简单样式练习（七）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（六）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（五）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（四）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（二）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（一）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
随机推荐
- selenium+python安装
整理了下selenium+python环境搭建,搭建了很多次但每次都还是手忙脚乱,今天用心整理下 selenium 是用于测试 Web 应用程序用户界面 (UI) 的常用框架,并且 Selenium ...
- Navicat for MySQL 安装软件和破解补丁
软件 链接:https://pan.baidu.com/s/1e8gpbyWM7ISrWpMwsw-MNg 提取码:fag3 安装好 Navicat 将破解文件放到安装目录下,然后双节运行 是的,你 ...
- 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- 虚拟内存之后pagefile.sys不断的再增大快占满整个Ｃ盘，应该如何将处理？
"pagefile.sys"是页面交换文件,这个文件不能删除,不过我们可以改变其大小和存放位置. 1.右击"这台电脑/属性". 2.然后在对话框的"高 ...
- Fiddler抓包常用功能
通过上一篇文章Fiddler移动端抓包,我们知道了Fiddler抓包原理以及怎样进行移动端抓包,接下来介绍Fiddler中常用的功能. Fiddler中常用的功能如下: 停止抓包 清空会话窗内容 过滤 ...
- 论文解读（SUGRL）《Simple Unsupervised Graph Representation Learning》
Paper Information Title:Simple Unsupervised Graph Representation LearningAuthors: Yujie Mo.Liang Pen ...
- 关于如何让写自然溢出hash的无辜孩子见祖宗这件事
关于如何让写自然溢出hash的无辜孩子见祖宗这件事 来源博客 这几天考试连着好几次被卡hash卡到死. 我谔谔,为什么连hash都要卡. 码力弱鸡什么时候才能站起来. 只需要任意两种字符,比如噫呜呜噫 ...
- 《Java多线程编程核心技术》知识梳理
<Java多线程编程核心技术> @author ergwang https://www.cnblogs.com/ergwang/ 文章末尾附pdf和png下载链接 第1章 Java多线程技 ...
- redis之 主从复制和哨兵（一）
一.Redis主从复制 主从复制:主节点负责写数据,从节点负责读数据,主节点定期把数据同步到从节点保证数据的一致性 1. 主从复制的相关操作 a,配置主从复制方式一.新增redis6380.conf, ...
- SpringCloud项目中接入Nacos作为注册中心
具体demo https://blog.csdn.net/qq_33619378/article/details/95212754 <?xml version="1.0 ...