整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
导航栏
图书管理功能模块图
图书管理功能包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小时内与您取得联系。
