CSS  伪装

1、<style>a;link{color:#000000}

a:visited{color:#000000;

a.:hover{color:#FF00FF}

a:active{color: #0000FF;}</style>  <body><p><a href="/css" target="-blank"><>/a</p></body>

2、first-child伪类来选择元素的第一个子元素

<style>p:first-child{

color:blue;

}</style>

<body><p>第一行</p>    <p>第二行</p>  </body>

匹配第一个元素的<p>元素中的所有<i>元素

<style>

p>i:first-child{

color:blue;}</style>

<body> <p>I am is <i>strong</i>man   <i>yes</i></p>

<p>I am is <i>strong</i>man   <i>yes</i></p></body>

3、<style>p:first-line{

color:#ff0000;

font-variant:small-caps;}</style>    <body><p>klKJDF</p></body>

4、文本首字母设置特殊样式

<style>p:frist-letter{

color:#ff0000;

font-size:xx-large;}</stylel>

<body> first a letter</body>

5、before元素添加首行的图片

<style>h1:before{

content:url(smiley.gif);}</style>

<body><h1>this is A  haeading</h1></body>   before 元素改成after就是在尾行添加图像

6、HTML导航栏设置

<body> <ur><li><a href="#home">主页</a></li>

<li><a href="#home">新网</a></li>

<li><a href="#home">联系方式</a></li>

<li><a href="#home">关于公司</a></li>

</ul></body>   这里要说明的是 # 这个标记就是指url测试,只是在按照url的形式反映出来,但不链接不能跳转

7、在列表中删除边距和填充

ul{   list-style-type:none;   -------->移除列表前的小标志

margin:0;

padding:0;

}     <body><ul><li><a href="#home">主页</a></li>

<li><a href="#home">新闻</a></li>

<li><a href="#home">联系</a></li>

<li><a href="#home">关于</a></li></ul></body>

8、垂直导航栏

<style>ul{

list-style-type:none;

margin:0;

padding:0;

width:20px;

background-color:#ffffff;

}

li a{

display:block;

color:#000;

padding:3px 23px;

text-decoration:none;

}

li a:hover{

background-color:#444;

color:white;

}</style>

<body>

<ul>

<li><a href="#home">主页</a></li></ul></body>   如果设置激活导航栏列    li a.active{    background-color:#444;  color:white;}

设置水平导航栏   li{ display:inline;}

9、下拉菜单

<style>

.dropdown{

position:relative;

display:inline-block;

}

.dropdown-content{

display:none;

position:absolute;

background-color: #FFFFFF;

min-width:92px;

box-shadow:0px 3px 23px 23px egbz(0,0,0,2);

padding:12px 12px;

}

.dropdown:hover .dropdown-content{

display:block;

}</style>

<body><div class="dropdown"'>

<span>鼠标移动走到这里</span>

<div class="dropdown-content">

</body>

最新文章

  1. 10 Symbol
  2. innoDB源码分析--缓冲池
  3. css限制图片大小,避免页面撑爆
  4. int和long int的区别
  5. NovaMind使用教程
  6. Java架构师之路:JAVA程序员必看的15本书
  7. WordPress Ultimate Auction插件跨站请求伪造漏洞
  8. 【细说Java】揭开Java的main方法神秘的面纱
  9. 组队赛第二场:字符串哈希+DP
  10. 生成 Qt 文档
  11. AS中layout_gravity与gravity的区别
  12. P1892 [BOI2003]团伙 并查集
  13. 用js来实现那些数据结构04(栈01-栈的实现)
  14. 底层代码创建GUI
  15. logback -- 配置详解 -- 二 -- &lt;appender&gt;
  16. c++primer记录(二) 模板
  17. sqlserver2008事物处理---待续
  18. Monkey测试运用实例
  19. 《Java 程序设计》课堂实践一
  20. 一起来学redis(一)

热门文章

  1. struts2简单入门-参数传递的三种方式
  2. UOJ #276「清华集训2016」汽水
  3. Element Tabs 组件中使用 ve-histogram组件渲染不出来(已解决)
  4. 数组去重的4种方法(Which one is the fastest???嘻嘻嘻....)
  5. 给出随机存储器(RAM)和只读存储器(ROM)的差别
  6. 中国各省市县级 JSON 文件
  7. ssh连接报错server responded”algorithm negotiation failed”
  8. sonar排除实体类配置
  9. Python学习笔记-进度条
  10. Android SpannableString实现TextView的点击事件