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的加入会使得动画效果更加乐观 ...
随机推荐
- GAN实战笔记——第七章半监督生成对抗网络（SGAN）
半监督生成对抗网络 一.SGAN简介 半监督学习(semi-supervised learning)是GAN在实际应用中最有前途的领域之一,与监督学习(数据集中的每个样本有一个标签)和无监督学习(不使 ...
- 常用的公共 DNS 服务器 IP 地址
转载自:小哈龙 2019-04-12 09:34:42 公共 DNS 服务器 IP 地址 名称 DNS 服务器 IP 地址 阿里 AliDNS 223.5.5.5 223.6.6.6 CNNIC SD ...
- 怎么做好企业IT运维工作
维的工作层次来分,又分为硬件运维.桌面运维.系统运维.数据库运维和应用运维.他们运维的设备,小的从个人电脑,大的到数以亿计的高精尖计算设备(比如 大型机 ). 根据公司 IT 系统规模的不同,运维团队 ...
- 36 异常机制 自定义异常 实际应用中的经验总结 尽量添加finally语句块去释放占用的资源
自定义异常 概念 使用Java内置的异常可以描述在编辑时出现的大部分异常情况.除此之外,用户还可以自定义异常.用户自定义异常类,只需继承Exception类即可. 在程序中使用自定义异常类,大体可分为 ...
- java.sql.SQLException: Unable to load authentication plugin 'caching_sha2_password'.
原来是mysql5.X,升级到8.X,连接数据库就报错: Unable to load authentication plugin 'caching_sha2_password'. 原因分析: 可能为 ...
- Kubernetes：Ingress总结(一)
Blog:博客园 个人 参考:Ingress | Kubernetes.<Kubernetes进阶实战>.<Kubernetes网络权威指南 > 何谓Ingress?从字面意思 ...
- 什么叫线程安全？servlet 是线程安全吗?
线程安全是编程中的术语,指某个函数.函数库在多线程环境中被调用时,能够 正确地处理多个线程之间的共享变量,使程序功能正确完成. Servlet 不是线程安全的,servlet 是单实例多线程的,当多个 ...
- MySQL_fetch_array 和 MySQL_fetch_object 的区别是什么？
以下是 MySQL_fetch_array 和 MySQL_fetch_object 的区别: MySQL_fetch_array() – 将结果行作为关联数组或来自数据库的常规数组返回. MySQL ...
- ReentrantLock 源代码之我见
ReentrantLock,英文意思是可重入锁.从实际代码实现来说,ReentrantLock也是互斥锁(Node.EXCLUSIVE).与互斥锁对应的的,还有共享锁Node.SHARED Reent ...
- Protected 修饰符
Protected 修饰的变量和方法,在子类中可见.所有的变量和方法,子类都继承( private 也是).父类的变量和方法在子类实例中预留内存空间. Private 成员不能被子类实例引用.构造方法 ...