java-HTML&javaSkcript&CSS&jQuery&ajax

Posted 疏桐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了java-HTML&javaSkcript&CSS&jQuery&ajax相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

HTML&javaSkcript&CSS&jQuery&ajax

HTML&javaSkcript&CSS&jQuery&ajax

HTML&javaSkcript&CSS&jQuery&ajax

HTML&javaSkcript&CSS&jQuery&ajax(11)

HTML&javaSkcript&CSS&jQuery&ajax

HTML&javaSkcript&CSS&jQuery&ajax