java-HTMLjavaSkcriptCSSjQueryajax
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>
轉載于:https://www.cnblogs.com/xinxianquan/p/8525898.html
總結
以上是生活随笔為你收集整理的java-HTMLjavaSkcriptCSSjQueryajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用单元测试测试简单的首页
- 下一篇： 2017年html5行业报告,云适配发布