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>

java-HTML&javaSkcript&CSS&jQuery&ajax的更多相关文章

  1. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

  2. XSS-HTML&javaSkcript&CSS&jQuery&ajax

    1.设置不同的样式列表 <style> ul.a{list-style-tyrp:circle;}    ul.b{list-style-type:square;}   ul.c{list ...

  3. HTML&javaSkcript&CSS&jQuery&ajax（十）

    HTML 1.SVG直接嵌入HTML网页 ,SVG 是使用XML描述2D图像的语言,Canvas通过JavaScript来绘制2D <svg xmlns="http://www.w3. ...

  4. HTML&javaSkcript&CSS&jQuery&ajax（八）

    一. <!DOCTYPE html><html><head><meta charset="utf-8"><tiitle> ...

  5. HTML&javaSkcript&CSS&jQuery&ajax（七）

    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...

  6. HTML&javaSkcript&CSS&jQuery&ajax（五）

    一.Framset标签定义了每个框架中的HTML文档, 1. <framset cols="25%,75%"> <frame src="frame_a. ...

  7. HTML&javaSkcript&CSS&jQuery&ajax（四）

    一.HTML创建响应设计 Responsive Web Design 可以改变尺寸传递网页,对于平板和移动设备是必须的 1.<!DOCTYPE html><html lang=&qu ...

  8. HTML&javaSkcript&CSS&jQuery&ajax（三）

    一.HTML块元素 1.块级元素 Block level element ,内联元素 inline element , HTML<div>元素属于块级元素,他是组合其他HTML元素的容器, ...

  9. HTML&javaSkcript&CSS&jQuery&ajax（二）

    一.HTML 1.标签<a href="http:www.baidu.com">This is a link </a>         <img sr ...

随机推荐

  1. mysql 开源 ~ canal+otter系列(2)

    一 创建相应用户    源数据用户权限: GRANT SELECT, REPLICATION SLAVE, REPLICATION CLIENT ON *.* TO `retl`@'%';    目的 ...

  2. nmap 使用总结

    nmap 网络探测工具 参考链接: https://nmap.org/man/zh/ http://www.360doc.com/content/18/0127/18/52402560_7255744 ...

  3. HashMap、Hashtable、ConcurrentHashMap面试总结

    原文链接:https://www.cnblogs.com/hexinwei1/p/10000779.html 小总结 HashMap.Hashtable.ConcurrentHashMap HashM ...

  4. protobuf 安装与卸载

    方法一:可以FQ 安装 下载https://github.com/google/protobuf/releases ##Source code (zip)## ./autogen.sh ./confi ...

  5. Python学习笔记-解释器和中文编码

    第一行 #!/usr/bin/env python 目的是指出用什么可执行程序去运行代码. 有两种写法 1.#!/usr/bin/python 调用/usr/bin下的python解释器,去运行代码. ...

  6. SpringSecurity如何退出登录

    ⒈如何退出登录? SpringSecurity默认为我们提供了退出操作,我们只需要访问特定的url就可以退出登录了 <!DOCTYPE html> <html lang=" ...

  7. 使用WireMock快速伪造RESTful服务

    ⒈下载WireMock独立运行程序 http://wiremock.org/docs/running-standalone/ ⒉运行 java -jar wiremock-standalone-2.2 ...

  8. Pytorch Visdom

    fb官方的一些demo 一.  show something 1.  vis.image:显示一张图片 viz.image( np.random.rand(3, 512, 256), opts=dic ...

  9. C/S 开发框架 ----- 广州本地

    C/S 开发框架 -----  广州本地: 1) 爱奇迪    http://www.iqidi.com       发现一个源码出售站   http://www.51aspx.com/code/co ...

  10. VC++、MFC最好的开源项目

    介绍:介绍一下用VC++/MFC写的最好的开源项目. Sourceforge.net中有许多高质量的VC++开源项目,我列举了一些可以作为VC++程序员的参考. 正文: VC++.MFC中最好的开源项 ...