博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS-hover
阅读量:4634 次
发布时间:2019-06-09

本文共 931 字,大约阅读时间需要 3 分钟。

1. padding:0 10px; 表示上下边距是0,左右边距是10.

2. padding:0 10px 0 10px; 上-右-下-左。(顺时针方向)

3. .pg-header .menu:hover; 表示只要鼠标移动到当前标签上时,就会应用这个下面所定义的样式。

 

hover: 徘徊在.......的旁边的意思。

4. 模拟抽屉网的首页:

http://dig.chouti.com/

 

    
Title
asdf

 运行结果:

抽屉网:

 

自己写的练习程序,完美达到了课上的效果:需要特别注意的地方:

1.  height:48px;   line-height:48px; 实现了文字上下居中。

2. margin-top:50px;  为了不与头部粘在一起,中间留了2px的间距。

3. 因为a标签是行内标签,所以无法修改高度等属性。需要display:inline-block;改成可编辑类型(块级标签).

4. pg-header .menu:hover 只有鼠标点击的时候,才会生效。

5. margin:0 auto 实现自动左右居中。表示上下边界为0,左右则根据宽度自适应相同值(即居中)

6. 写程序的时候,一定要注意要用分号,否则很容易掉坑。

 

    

 效果:

 

转载于:https://www.cnblogs.com/momo8238/p/7422755.html

你可能感兴趣的文章
Java_JVM参数-XX:MaxDirectMemorySize 与 两种 ByteBuffer: heap,direct ByteBuffer
查看>>
【转载】HBase Region重点剖析
查看>>
Linux系统添加路由条目信息
查看>>
Php—AJAX跨域问题
查看>>
谈到电影,我们收获了什么
查看>>
设置CentOS开机连接网络 Centos 开机启动网卡的设置方法
查看>>
1.12Linux下软件安装(学习过程)
查看>>
七:初探异步编程
查看>>
Shell编程之if语句实战(详解)
查看>>
OAuth 2.0 学习
查看>>
PHP 常用的header头部定义汇总
查看>>
测试虚线
查看>>
Codeforces Round #296 (Div. 2) B. Error Correct System
查看>>
python之列表生成式
查看>>
小程序开发 自定义转发
查看>>
【找回数学的感觉】1 再版汉诺塔等
查看>>
3. Longest Substring Without Repeating Characters
查看>>
我的一亩三分地
查看>>
Java线程和多线程(三)——线程安全和同步
查看>>
武汉小猫科技-工作总结(1):一图胜万言
查看>>