整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
天無(wú)意中看到一個(gè)網(wǎng)站的導(dǎo)航條，覺(jué)得效果還不錯(cuò)，而且制作也很簡(jiǎn)單，就自己試著用HTML+CSS做了個(gè)一模一樣的，下面就把導(dǎo)航條的制作方法及步驟分享給大家！
導(dǎo)航按鈕效果圖
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>一級(jí)導(dǎo)航</title>
<style>/*css樣式可以在style里面寫*/
body {
margin: 0;/*外邊距:分別左,上,右,下都為0,這樣就不會(huì)出現(xiàn)左右上下間距*/
padding: 0;/*內(nèi)邊距:分別左,上,右,下都為0,這樣就不會(huì)出現(xiàn)左右上下內(nèi)間距*/
}
/*第一個(gè)div樣式*/
#menu {
width: 100%;/*寬度:100%表示瀏覽器默認(rèn)寬度*/
height: 45px;/*高度*/
background-color:#FF0033;/*背景顏色:紅色*/
}
/*第二個(gè)div樣式*/
#menu-title {
width: 1000px;
height: 45px;
margin-left: auto;/*margin-left: auto;margin-right: auto;可以把div自動(dòng)居中*/
margin-right: auto;
}
/*第二個(gè)div里面無(wú)需列表樣式*/
#menu-title ul {/*ul是無(wú)序列表*/
margin: 0px;
padding: 0px;
list-style: none;/*列表樣式:無(wú)*/
}
/*第二個(gè)div里面無(wú)需列表li樣式*/
#menu-title ul li {
width: 142.8px;
height: 45px;
float: left; /*多個(gè)li往左浮動(dòng)*/
line-height: 45px;/*行高*/
text-align: center;/*文本對(duì)齊:居中*/
}
/*第二個(gè)div里面無(wú)需列表li里的a：超鏈接樣式*/
#menu-title ul li a {
color: white; /*顏色:白*/
text-decoration: none;/*文本下劃線:無(wú)*/
}
/*第二個(gè)div里面無(wú)需列表li里的a：超鏈接鼠標(biāo)經(jīng)過(guò)樣式*/
#menu-title ul li:hover {
background-color: #333333;
}
</style>
</head>
<body>
<div id="menu">
<div id="menu-title">
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">軟件中心</a></li>
<li><a href="#">產(chǎn)品案例</a></li>
<li><a href="#">免費(fèi)素材</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">會(huì)員注冊(cè)</a></li>
<li><a href="#">會(huì)員登錄</a></li>
</ul>
</div>
</div>
</body>
</html>
以上HTML+CSS代碼復(fù)制可用。
好多小白不知道怎么搭配顏色，為你們搜集了一下網(wǎng)頁(yè)顏色搭配工具：http://tool.c7sky.com/webcolor/#hue_0
下一個(gè)文章：HTML+CSS二級(jí)導(dǎo)航制作，敬請(qǐng)期待
TML拖放接口為DragEvent, DataTransfer, DataTransferItem和DataTransferItemList（后兩者瀏覽器支持很差）.說(shuō)簡(jiǎn)單點(diǎn)就是關(guān)于拖拽的系列事件。其實(shí)除非是要用DataTransfer,更建議使用瀏覽器支持性更好的鼠標(biāo)點(diǎn)擊移動(dòng)松開(kāi)相關(guān)事件。
拖拽相關(guān)的系列事件
當(dāng)元素節(jié)點(diǎn)或選中的文本被拖拉時(shí)，就會(huì)持續(xù)觸發(fā)拖拉事件，包括以下一些事件。
關(guān)于上述事件的注意點(diǎn)
dataTransfer
關(guān)于事件event參數(shù)很重要。區(qū)別于其他事件，拖拽系列事件有一點(diǎn)特殊就是dataTransfer。他用來(lái)讀寫拖拽需要攜帶的數(shù)據(jù)。往往是開(kāi)始拖拽設(shè)置數(shù)據(jù)，結(jié)束時(shí)候讀取數(shù)據(jù)。
dataTransfer的屬性
dataTransfer的方法
完小編前段時(shí)間發(fā)表的HTML學(xué)習(xí)之后，相信大家對(duì)網(wǎng)站建設(shè)與網(wǎng)頁(yè)編寫有了一定的初步了解，今天我們來(lái)開(kāi)始介紹層疊樣式表css，css是為HTML頁(yè)面的排版美化而設(shè)計(jì)的，可以實(shí)現(xiàn)html無(wú)法設(shè)計(jì)的效果，一般是用來(lái)配合html來(lái)使用的，一般模式：選擇器{屬性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三種引入方式：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。
css三種嵌入方式：
一、行內(nèi)樣式
使用style屬性引入CSS樣式。
示例：
<h1 style="color:red;">style屬性的應(yīng)用</h1>
<p style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>
實(shí)際在寫頁(yè)面時(shí)不提倡使用，在測(cè)試的時(shí)候可以使用。
例如：
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行內(nèi)樣式</title> </head> <body> <!--使用行內(nèi)樣式引入CSS--> <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p標(biāo)簽</p> </body> </html>
二、內(nèi)部樣式表
在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。
示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>內(nèi)部樣式表</title> <!--使用內(nèi)部樣式表引入CSS--> <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>
三、外部樣式表
CSS代碼保存在擴(kuò)展名為.css的樣式表中
HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。
語(yǔ)法：
1、鏈接式
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2、導(dǎo)入式
<style type="text/css">
@import url("css文件路徑");
</style>
例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部樣式表</title> <!--鏈接式:推薦使用--> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--導(dǎo)入式--> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>
行內(nèi)樣式>內(nèi)部樣式>外部樣式(后兩者是就近原則)。
css注釋格式如下：
/* 注釋如下*/
css中的顏色值表示如下：
可以是直接寫英文單詞，例如藍(lán)色盡可以寫blue；還可以寫為十六進(jìn)制字符，例如#rrggbb\#ffcc00,#rgb如:#fc0十六進(jìn)制的顏色可以在顏色表中查詢，這里我給大家提供一個(gè)，當(dāng)然網(wǎng)上也有很多，大家也可以自己百度一下：
還有一種顏色的表示方式就是rbg模式，例如：
rgb(x,x,x) 其中x是一個(gè)0-255的整數(shù)值如:rgb(255,204,0)
rgb(x%,x%,x%) 其中x是一個(gè)0-100的整數(shù)值如rgb(100%,80%,0%)
Css的長(zhǎng)度單位：
相對(duì)長(zhǎng)度單位：px 像素（Pixel） em 相對(duì)于當(dāng)前文本字體尺寸的倍數(shù) % 百分比
絕對(duì)長(zhǎng)度單位：in英寸（Inch） pt 點(diǎn)（Point） cm 厘米（Centimeter）mm 毫米（Millimeter）。
換算比例：1in = 2.54cm = 25.4 mm = 72pt
Css的七大類選擇器：
標(biāo)簽選擇器 例如：p{};
類選擇器 例如.div{};（一個(gè)點(diǎn)加命名的類名）
Id選擇器 例如 #div{};（斜體井號(hào)加ID名，ID是不可重復(fù)的，類可以相同）
通配符選擇器：*{}；
偽類選擇器：
a:link{}沒(méi)有訪問(wèn)時(shí)的鏈接；
a:visited{}已經(jīng)訪問(wèn)過(guò)時(shí)的鏈接；
a:hove{}鼠標(biāo)滑過(guò)時(shí)的鏈接；
a:active{}已經(jīng)選中的鏈接；
:first-child{}為第一個(gè)字符設(shè)置樣式；
:last-child{}為最后一個(gè)字符設(shè)置樣式；
：nth-child（）{}可以為指定字符設(shè)置樣式
派生選擇器（后代選擇器、子元素選擇器和相鄰兄弟選擇器）：
后代選擇器: 以空格分隔
div ul li {color:#0099cc;}
子元素選擇器: 以>分隔
div >ul li
相鄰兄弟選擇器: 以+分隔
div + div ul li
最后一個(gè)就是組合選擇器，以逗號(hào)隔開(kāi)
h1, h2, h3, h4, h5, h6 { color: green }
好了，css基礎(chǔ)就給大家介紹到這里，有什么不懂得地方可以給小編留言，如果您有什么好的建議也可以關(guān)注小編，我們共同學(xué)習(xí)，共同討論，共同進(jìn)步，接下來(lái)我們會(huì)介紹下css的屬性，敬請(qǐng)期待吧
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
