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的加入会使得动画效果更加乐观 ...
随机推荐
- 【转载】SQL复杂实例
from:http://blog.csdn.net/basycia/article/details/52134320 OR from:http://www.wzsky.NET/ ...
- MATLAB菜鸟入门笔记【函数章】
一.用捷径表达式赋值 1.first:incr:last first代表数组的每一个值,incr代表步增量,last代表这个数组的最后一个值. Ep:>>x=1:2:10 ...
- php压缩zip文件类
使用文件压缩类, 注意传的路径是相对路径.如果传绝对路径就把addFile里面的第二个参数去掉/ $zip = new ZipFolder(); $zipFile = './autoloadClass ...
- 编写Python代码的注意事项
1.标识符 标识符是定义的名称,包括类名.变量名等等 标识符的大小写是敏感的,且第一个字符必须是字母表中的字母或"_" 在python3中,中文可被用作变量名 不能使用Python ...
- 使用http-server 模拟接口数据 mock data
首先创建文件夹 mkdir mockData&&cd mockData 安装http-server npm i http-server 创建数据文件 touch index.json ...
- 一步一步迁移ASP.NET Core 6.0-Part1
.NET 6 发布后,我们现有的应用会逐步升级到这个版本,首当其冲的是原因的ASP.NET Core的工程,如果一步一步升级到ASP.NET Core 6.0 本文简单整理一下升级ASP.NET Co ...
- wordpress在线检测主题和插件
http://wpthemedetector.coderschool.cn/ http://www.wpthemedetector.com/ http://whatwpthemeisthat.com ...
- c# / .net wFramework winform 之运行后的窗体窗口可拖动操作
学习winform 的同志们可能会有这样的提问,我运行起来的窗体或者窗口该如何实现可拖动呢?今天它来了 思路:可以给窗体增加一个进度条(progressBar控件) 全局定义这几个变量: long p ...
- 浅析Redis基础数据结构
Redis是一种内存数据库,所以可以很方便的直接基于内存中的数据结构,对外提供众多的接口,而这些接口实际上就是对不同的数据结构进行操作的算法,首先redis本身是一种key-value的数据库,对于v ...
- bzoj4182/luoguP6326 Shopping(点分治，树上背包)
bzoj4182/luoguP6326 Shopping(点分治,树上背包) bzoj它爆炸了. luogu 题解时间 如果直接暴力背包,转移复杂度是 $ m^{2} $ . 考虑改成点分治. 那么问 ...