整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
導航欄
圖書管理功能模塊圖
圖書管理功能包4括大模塊 ，16個子模塊。
1. 制作方式： 列表<ul><li>制作。
四大模塊：用一個<ul><li></li></ul>列表制作出來，每個模塊下面的四個子模塊用同樣的<ul><li></li></ul>列表嵌套出來。
具體格式如下：
<ul> <li>模塊1 <ul> <li>模塊1.1</li> <li>模塊1.2</li> <li>模塊1.3</li> <li>模塊1.4</li> </ul> </li> <li>模塊2 <ul> <li>模塊2.1</li> <li>模塊2.2</li> <li>模塊2.3</li> <li>模塊2.4</li> </ul> </li> .......... </ul>
2.導航標簽<a>：都是一個超鏈接，通過點擊鏈接到相應的導航頁面。
所以在每個列表選項中，都應該加入超鏈接<a>標簽。
<ul> <li><a href="javascript：;" >用戶管理</a></li> ... </ul>
3.導航框的修飾：CSS樣式表
3.1 樣式表接入方式：
一般用鏈接式<link >，運用高內聚，低耦合的思想。
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
3.2標簽選擇器
行內選擇器>id選擇器>class選擇器>標簽選擇器
常用到的為 id選擇器、class選擇器、標簽選擇器。
例如：
<ul> <li class="litems"><a href="javascript：;">用戶管理</a> <ul class="uitems"> <li><a href="javascript：;">添加用戶</a></li> </ul> </li> </ul>
具體用法見：HTML/CSS中可直接輸數據的表格
4.導航欄的框框
模塊標簽特點：
litems類標簽 中 <a>標簽的樣式如下：
.litems>a
{
background-color:#990020; /*背景色*/
height:30px;
display:block; /*塊顯示*/
line-height:30px; /*垂直居中*/
border-left: solid 12px #711515; /*邊框*/
padding-left:5px; /*左邊距*/
}
5.鼠標懸浮變化--- a:hover 屬性
鼠標未懸浮狀態
鼠標懸浮狀態
特點：鼠標懸浮時，字體變為黃色。
a:hover
{
color:#FF0;
}
制作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。
以下附帶部分樣式源碼：
HTML列表內容
CSS樣式表源碼：
SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級聯樣式表”，CSS盒子模型是在網頁設計中用到的CSS技術中引用的一種思維模型。CSS盒子模型由內容區、填充、邊框、空白邊組成。
由于CSS盒子模型是CSS中的一個重要概念，每一個元素都可以當作一個矩形的盒子，這個矩形盒子可以描述元素所占空間內容。CSS盒子模型更方便了設計者對網頁設計的整體把控。
用億圖圖示繪制CSS盒子模型十分簡單，只需要找到指定模板即可，新手參考以下幾個步驟即可完成CSS盒子模型的繪制。
第一步：下載“億圖圖示”軟件，啟動軟件界面，登錄賬號開始操作。
第二步：點擊搜索框輸入“CSS盒子模型”，尋找符合設計要求的CSS盒子模型模板，點擊“使用”打開CSS盒子模型模板。
第三步：點擊操作區的CSS盒子模型，根據自己的需要，在模板上修改各層次的注釋，在上方操作區更改字體為黑體，并更改字體大小。
第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側填充可以修改填充色、邊框顏色。
第五步：完成CSS盒子模型制作之后，點擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數之后，CSS盒子模型就可以存儲在電腦中。
以上就是CSS盒子模型繪制方法的相關介紹。
當有繪制CSS盒子模型的需求時，選擇億圖圖示這款國產矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設計開發，在滿足了用戶基本的繪圖需求基礎上，開發了模板套用功能，讓繪圖的效率提高許多，同時，在云存儲的加持下，億圖圖示用戶可以隨時隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個模板，在原有基礎上修改、添加需要的元素，提升繪圖效率。
1、可靠軟件，值得信賴：億圖圖示經過了九個大版本的升級，軟件可靠程度大幅增加，現在已經擁有超過900萬用戶，龐大的使用群體是億圖圖示經受住市場優勝劣汰的體現。
2、軟件資源庫強大，滿足繪圖需求：億圖圖示擁有數量龐大的矢量符號庫和模板庫，當用戶繪圖時可以很輕松的找到自己需要的符號，即使符號很特殊在庫中找不到，用戶也可以自行繪制或者導入本地符號圖形、從庫外調用。
3、先用后付，性價比高：億圖圖示為新用戶謀福利，凡是新注冊的億圖圖示賬戶，均可長期使用免費基礎版本。當有高級需求的時候，可以再升級購買會員版。
.1 CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。
在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意圖為您展示了上面這段代碼的結構：
image.png
1.1.1 字體屬性：
屬性 含義 屬性值
font-family 字體 各種字體 font-style 字體樣式 italic、oblique font-variant 小體大寫 small-caps font-weight 字體粗細 bold、bolder、lighter… font-size 字體大小 absolute、relative、% color 字體顏色 顏色值
1.1.2 顏色與背景屬性：
屬性 含義 屬性值
Color 顏色 顏色值 Background-color 背景色 顏色值 Background-image 背景圖案 圖片路徑 Background-repeat 背景圖案重復方式 Repeat-x | repeat-y | no-repeat Background-attachment 背景的滾動 Scroll | fix Background-position 背景圖案初始位置 % | n em | top | left | right | bottom
1.1.3 文本屬性:
屬性 含義 屬性值
word-spacing 單詞間距 n em letter-spacing 字母間距 n em text-decoration 裝飾樣式 underline| overline| line-through| blink vertical-align 垂直方向位置 sub| super |top |text-top| middle| bottom| text-bottom text-transform 轉為其他形式 capitalize| uppercase| lowercase text-align 對齊 left| right| center| justify text-indent 縮進 n em| % line-height 行高 pixels、n em、%
1.1.4 邊距屬性:
屬性 含義 屬性值
margin-top 上邊距 n em | % margin-right 右 n em | % margin-bottom 下 n em | % margin-left 左 n em | %
1.1.5 邊框屬性:
屬性 含義 屬性值
Border-top-width 上邊框寬度 n em | thin | medium | thick Border-right-width 右 同上 Border-bottom-width 下 同上 Border-left-width 左 同上 Border-width 四邊 同上 Border-color 邊框顏色 Color Border-style 邊框樣式 Dotted | dash | solid | double | groove | ridge | inset | outset Border-top|right|bottom|left 上(右|底|左)所有屬性 Border-width | border-style | color
1.1.6 圖文混排:
屬性 含義 屬性值
Width 寬度 n em | % Height 高度 n em Float 文字環繞 Left | right clear 去除文字環繞 Left | right | both
1.1.7 列表屬性:
屬性 含義 屬性值
Display 是否顯示 Block | inline | list-item | none White-space 空白部分 Pre | nowrap | normal（是否合并) List-style-type 項目編號 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none List-style-image 項目前圖片 Img-url List-style-position 第二行位置 Inside | outside List-style 全部屬性 Keyword | position | url
1.1.8 鼠標屬性:
屬性值 含義 屬性值 含義
Auto 自動 N-resize 上箭頭 Crosshair "+" Se-resize 右下 Default 默認 Sw-resize 左下 Hand 手形 S-resize 下箭頭 Move 移動 W-resize 左箭頭 E-resize 右箭頭 Text "I" Ne-resize 右上 Wait 沙漏 Nw-resize 左上 help 幫助
1.2 CSS選擇器
1.2.1 li標簽選擇器
html:
<li>列表項1</li>（改變標簽里的樣式類型）
css:
針對所有列表
li{
color: rgb(255,0,0); /*#ff0000 red*/
font-size: 30px;
}
1.2.2 類選擇器 class（把一堆樣式劃為一類）
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA; word-break:break-all">div`.topBar +Tab = <`divclass`=`"topBar"`></`div`>`</pre>
當前頁面內可以多個同樣 html:
<pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA; word-break:break-all"><li class="blue">`列表項``2`</li></pre>
css:
<pre style="margin-bottom:18.0pt; line-height:16.5pt;background:#F6F8FA;word-break:break-all"> color: #0000ff;</pre> <pre style="margin-bottom:18.0pt; line-height:16.5pt;background:#F6F8FA;word-break:break-all"> }</pre>
1.2.3 ID選擇器 id（也可控制某個DIV樣式）
當前頁面內唯一id； 如果頁面內出現多個相同id，雖然可以解析出，但不規范，不建議
<li id="item">列表項1</li>
#item{
color: #00FF00;
font-size:40px;
}
權重越大，優先級越高，優先級高的覆蓋優先級低的
各種選擇器可以用在列表li、容器div等中
html:
<div>這是一個Div</div>
CSS:
div{
background-color: #ccc;
}
1.3 CSS樣式規則
1.3.1 三種定義樣式的方法
①****在本文件下的表示方法
<head>
<style type="text/css"> //樣式
選擇器（即修飾對象）{ //.g{ }
對象屬性1：屬性值1； //font：
對象屬性2：屬性值2； //height：50px；
}
</style>
</head>
②在1.css文件中的表示方法
<link rel="stylesheet" type="text/css" href="1.css">
③直接跟著定義樣式
<div class=" size show show-1"></div>
每個樣式間用空格隔開，有三個樣式 size、show、show-1
1.3.2 顏色
red = #FF0000 = rgb(255,0,0) 紅色 blue = #0000ff = 藍色 green = #00FF00 = 綠色 #ccc = #cccccc 灰色 #fff = #ffffff 白色 black = #333 黑色 background: #fff; 背景為白色 background: #fff; 背景為白色 cursor: pointer; 當移動到當前位置時（配合li:hover）變成小手 transition: all 1s ease; 漸變效果（有些瀏覽器不支持） -webkit-transition:all 1s ease; -o-transition:all 1s ease; -moz-transition:all 1s ease; -ms-transition: all 1s ease; 對于不支持的瀏覽器，解決方案
1.3.3 字體font
width: 200px;寬度 font-weight: bold; 字體粗細（粗體） font-size: 12px; 字體大小 color: #ff7300; 字體顏色 background-color: #ccc; 背景色 height 高度 width 寬度（可以認為是長度） font-family：隸書；字體
長度單位：
px 像素
顏色
十六進制：#ffffff 顏色名稱：red
尺寸屬性：
Height、max_height、min_height width、max_width、min_width
字體、字號：
font 縮寫形式 font-weight 粗細 font-size 大小 font-family 字體系列 font-style 字體樣式
字體顏色
color opacity 透明度 css3
行距、對齊等
line-height 行高 text-align 對齊 letter-spacing 字符間距 text-decoration 文本修飾 overflow 浮動 text-overflow text-indent
1.3.4 列表寬度決定了列表項寬度
height: 100px; line-height: 100px; 使其上下居中對齊 text-align: right; 水平對齊方式：水平靠右 text-align: center; 水平對齊方式：水平居中 letter-spacing: 10px; 字間距 text-decoration: none; 下劃線設置（去除） white-space: nowrap; 設為一行顯示 overflow: hidden; display: block; 隱藏多余內容
1.3.5 圖片
background-image: url(images/1.jpg); 插入圖片 background-image: url(../images/1.jpg); 插入上一級文件夾中images文件夾中的圖片1.jpg background-repeat: no-repeat; 圖片默認多大就是多大（不加自動復制顯示） background-position: 50px 50px; 移動圖片（正數為右下角，負數為左上角）
1.3.6 塊級元素 默認占一行
★float: left; 浮動 將塊級元素變為行級元素 讓多行在一行 如果一行放不下，自動轉第二行 height: 50px; /*使其上下居中對齊*/ line-height: 50px; /*使其上下居中對齊*/ text-align: center; 水平對齊方式：水平居中 margin-right: 5px; 每個元素間間隔5px font-size: 20px; 字體大小
1.3.7 焦點
鼠標移到當前位置時的狀態
a:hover{
color: red;
}
/*鼠標激活選定狀態*/
a:active{
color: green;
}
1.3.8 超鏈接樣式的四種狀態
未訪問狀態 a:link 已訪問狀態 a:visited 鼠標移上狀態 a：hover 激活選定狀態 a：active
1.3.9 盒子（矩形方框）
margin（外邊距/邊界） border（邊框） padding（內邊距/填充） width 寬度 height 高度 margin 外邊距/邊界 margin：1px 2px 3px 4px 外邊距/邊界（上右下左） margin：1px 2px 外邊距/邊界（上下、左右） margin：1px 外邊距/邊界（上下左右、通常表現出來上左）
margin
一個值：4邊
兩個值：上下、左右
四個值：上右下左
margin-left: auto; 左邊距自動 margin-left: auto; /水平居中/ margin-right: auto; /水平居中/ margin: 0px auto; /水平居中，有的瀏覽器不支持/
默認下，div沒有邊框border（有顏色）
默認不顯示border
border-color: blue; border-width: 10px; border-style: solid; 以上三句話使其最終顯示 solid實心的 border width style color border：20px solid green 一句話也可以顯示 border-top:30px solid #ccc; 設置上邊框屬性 padding-top: 20px; 內邊距（上） padding: 20px; 內邊距（上下左右） padding: 20px 50px; 內邊距（上下、左右）
對同一屬性做設置，后面的優先級高
對外邊距/邊界設置，一般統一格式，不要上邊設下邊距，下邊設上邊距；如果設置，按大的顯示
margin-bottom: 30px;
.topbar .search .topabar .link{float:right;} 共用一種樣式{浮動 將塊級元素變為行級元素}
1.3.10 解決浮動問題，使用尾類
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
<div class="wrap fix"> +fix誰的子元素浮動，就可以清除影響
.fix{*zoom:1;*clear:both;}
.fix:before,.fix:after{
display: table;clear:both;
content: '';
}
1.3.11 定位
position: absolute; 絕對定位 position: relative; 相對定位
參照物是距離最近 定位的父元素
1.3.12 對定位元素顯示排序
z-index: 1; 數字越大，優先級越高
設置 鼠標指到哪里，哪里在上邊
.c4:hover{
z-index: 3;
}
1.3.13 響應式
viewport 設備方向：Orientation 設備方向：Orientation
1.3.14 其他樣式
header、footer、center、left、right
頭 尾 中間 左 右
鏈接 默認帶下劃線
<div class=" size show show-1"></div>
每個樣式間用空格隔開，有三個樣式 size、show、show-1
list-style:none; 去除前面的列表序列號
border 邊框
border: 1px solid red; 添加邊框
<div style="clear: both"></div> 用于消除浮動效果導致的順序錯亂
height 高度
width 寬度（可以認為是長度）
font-family：隸書；字體
top: 25px; 距離上方25px
left: 15px; 距離左邊15px
display: none;不顯示
@media screen and (max-width: 900px){ } 當分辨率小于900px時
line-height: 1.8; 行高
1.4 為CSS單獨建立文件（建立鏈接link）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
