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. 【译】第十一篇 SQL Server安全审核

    本篇文章是SQL Server安全系列的第十一篇,详细内容请参考原文. SQL Server审核SQL Server审核是指你可以在数据库或服务器实例监控事件.审核日志包含你选择捕获的事件的列表,在服 ...

  2. xshell操作

    (1)命令ls——列出文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的“隐藏”文件 ls a* 列出当前目录下以字母a开头的所有文件 ls -l *.doc 给出当前目录下以. ...

  3. 列式数据库~clickhouse日常管理

    clickhouse日常管理一 变量相关  1 查看变量     system.setting相关表  2 设置变量     set variables= 请注意这里是session级别,如果想永久生 ...

  4. Light oj 1099 - Not the Best 次短路

    题目大意:求次短路. 题目思路:由于可能存在重边的情况所以不能采用邻接矩阵储存图,我用了邻接表来存图. 由起点S到终点E的次短路可能由以下情况组成: 1.S到v点的次短路 + v到E的距离 2.S到v ...

  5. DataGrid 查出一个列 按要求显示格式 例如:操作人(地点)

    这是转换DataGrid显示格式之后 连接字符串的方法 显示:操作人(地点) public static ObservableCollection<CListModel> AllUserL ...

  6. 查找轮廓(cv2.findCountours函数)

    1.输入为二值图像,黑色为背景,白色为目标 2.该函数会修改原图像,因此若想保留原图像在,则需拷贝一份,在拷贝图里修改. 一.查找轮廓 cv2.findContours() 三个输入参数:输入图像(二 ...

  7. 使用vmstat和iostat命令进行Linux性能监控【转】

    转自:https://linux.cn/article-4024-1.html 这是我们正在进行的Linux命令和性能监控系列的一部分.vmstat和iostat两个命令都适用于所有主要的类unix系 ...

  8. python 中的exec

    x = 10 expr = """ z = 30 sum = x + y + z print(sum) """ def func(): y ...

  9. longzhuapp项目笔记

    1.配置不同环境的打包命令

  10. iphoneX适配!!!

    方法1.js判断(以下采用Jquery) //适配iphonex && $(window).height() === && window.devicePixelRati ...