圖書(shū)管理系統(tǒng)-菜單頁(yè)面實(shí)現(xiàn)------------
成績(jī)管理系統(tǒng)-菜單頁(yè)面實(shí)現(xiàn)------------
菜單頁(yè)面是用戶登錄之后的界面，該頁(yè)面有人愿意使用橫向菜單，有人愿意采用縱向菜單，我比較喜歡縱向菜單，這里做一個(gè)手動(dòng)伸縮的縱向拉伸菜單，可以收到左邊且不影響進(jìn)入右側(cè)的主頁(yè)面，右側(cè)的空白是留給大家做主頁(yè)面展示的，可以是數(shù)據(jù)的可視化，可以是數(shù)據(jù)的查詢界面，也可以是其他。下面的第一個(gè)圖就是菜單縮到左側(cè)的界面。
當(dāng)你點(diǎn)擊左側(cè)縮回的圖書(shū)管理系統(tǒng)之后，界面會(huì)將菜單顯示，如下圖所示：------------
該界面是可以自動(dòng)化伸縮的，只會(huì)顯示你點(diǎn)擊的分類(lèi)菜單。這樣一個(gè)合理的縱向下拉菜單就完成了。代碼見(jiàn)下方：------------
</head>
<body>
<div id="menu">
<!--隱藏菜單-->
<div id="ensconce">
<h2>
<img src="images/show.png" alt="">
圖書(shū)管理系統(tǒng)
</h2>
</div>
<!--顯示菜單-->
<div id="open">
<div class="navH">
圖書(shū)種類(lèi)
<span><img class="obscure" src="images/obscure.png" alt=""></span>
</div>
<div class="navBox">
<ul>
<li>
<h2 class="obtain">經(jīng)濟(jì)類(lèi)<i></i></h2>
<div class="secondary">
<h3>經(jīng)濟(jì)1</h3>
<h3>經(jīng)濟(jì)2</h3>
<h3>經(jīng)濟(jì)3</h3>
<h3>經(jīng)濟(jì)4</h3>
<h3>經(jīng)濟(jì)5</h3>
<h3>經(jīng)濟(jì)6</h3>
</div>
</li>
<li>
<h2 class="obtain">語(yǔ)言文字類(lèi)<i></i></h2>
<div class="secondary">
<h3>語(yǔ)言文字1</h3>
<h3>語(yǔ)言文字2</h3>
<h3>語(yǔ)言文字3</h3>
<h3>語(yǔ)言文字4</h3>
<h3>語(yǔ)言文字5</h3>
<h3>語(yǔ)言文字6</h3>
</div>
</li>
<li>
<h2 class="obtain">自然科學(xué)類(lèi)<i></i></h2>
<div class="secondary">
<h3>自然科學(xué)1</h3>
<h3>自然科學(xué)2</h3>
<h3>自然科學(xué)3</h3>
<h3>自然科學(xué)4</h3>
<h3>自然科學(xué)5</h3>
<h3>自然科學(xué)6</h3>
</div>
</li>
<li>
<h2 class="obtain">數(shù)理科學(xué)和化學(xué)類(lèi)<i></i></h2>
<div class="secondary">
<h3>數(shù)理科學(xué)和化學(xué)1</h3>
<h3>數(shù)理科學(xué)和化學(xué)2</h3>
<h3>數(shù)理科學(xué)和化學(xué)3</h3>
<h3>數(shù)理科學(xué)和化學(xué)4</h3>
<h3>數(shù)理科學(xué)和化學(xué)5</h3>
<h3>數(shù)理科學(xué)和化學(xué)6</h3>
</div>
</li>
<li>
<h2 class="obtain">醫(yī)藥衛(wèi)生類(lèi)<i></i></h2>
<div class="secondary">
<h3>醫(yī)藥衛(wèi)生1</h3>
<h3>醫(yī)藥衛(wèi)生2</h3>
<h3>醫(yī)藥衛(wèi)生3</h3>
<h3>醫(yī)藥衛(wèi)生4</h3>
<h3>醫(yī)藥衛(wèi)生5</h3>
<h3>醫(yī)藥衛(wèi)生6</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="js/menu.js"></script> <!--控制js-->
<div style="text-align:center;">
</div>
</body>
</html>
??base.css程序----------
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
font-family: "微軟雅黑";
height: 100%;
width: 100%;
box-sizing: border-box;
}
/*定位居中*/
.middle {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
a {
color: #3e3e3e;
text-decoration: none;
}
img, input, button, textarea {
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋體";
}
/*去掉行內(nèi)替換元素空白縫隙*/
img {
border: 0;
vertical-align: middle;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em, u {
font-style: normal;
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*清除浮動(dòng)*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/*IE/7/6*/
}
??2.css文件----------
#menu {
overflow: hidden;
height: 100%;
float: left;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#menu #ensconce {
/*隱藏菜單樣式*/
width: 0.35rem;
height: 100%;
background-color: #20343c;
float: left;
text-align: center;
position: relative;
display: none;
}
#menu #ensconce h2 {
cursor: pointer;
color: #fff;
font-size: 0.24rem;
line-height: 0.5rem;
width: 100%;
position: absolute;
top: 35%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(0%, -50%);
}
#menu #ensconce h2 img {
width: 52%;
}
#menu #open {
/*顯示菜單樣式*/
width: 2.6rem;
height: 100%;
background-color: #363a45;
padding-bottom: 0.1rem;
box-sizing: border-box;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
}
#menu #open .navH {
height: 0.6rem;
background-color: #44495a;
line-height: 0.6rem;
text-align: center;
font-size: 0.2rem;
color: #fff;
position: relative;
box-sizing: border-box;
}
#menu #open .navH span {
position: absolute;
top: 49%;
right: 0;
padding: 0 0.15rem;
cursor: pointer;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
display: inline-block;
}
#menu #open .navH span .obscure {
width: 0.24rem;
}
#menu #open .navBox {
height: 100%;
overflow-y: auto;
padding-left: 0.05rem;
padding-right: 0.07rem;
margin-top: 0.1rem;
}
#menu #open .navBox ul li {
background-color: #393c4a;
cursor: pointer;
margin-bottom: 4px;
}
#menu #open .navBox ul li .obtain {
background-color: #3889D4;
}
#menu #open .navBox ul li .obtain:hover {
background-color: #3D8332;
}
#menu #open .navBox ul li h2 {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size: 0.15rem;
padding: 0.15rem 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li h2 i {
position: absolute;
top: 50%;
right: 0.15rem;
border-top: 0.07rem transparent dashed;
border-left: 0.07rem solid #fff;
border-right: 0.07rem transparent dashed;
border-bottom: 0.07rem transparent dashed;
display: inline-block;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
-o-transition: -o-transform 0.6s ease;
-ms-transition: -ms-transform 0.6s ease;
transform-origin: 4px 3px;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#menu #open .navBox ul li h2 .arrowRot {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#menu #open .navBox ul li .secondary {
overflow: hidden;
height: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li .secondary h3 {
padding: 0.1rem 0;
text-align: center;
font-size: 0.13rem;
background-color: #282c3a;
color: #ffffff;
border-bottom: 0.8px solid #42495d;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
}
#menu #open .navBox ul li .secondary h3:hover {
background-color: #1acbfc;
}
#menu #open .navBox ul li .secondary .seconFocus {
background-color: #1acbfc;
-webkit-box-shadow: 3px 3px 3px #aa8c51;
-moz-box-shadow: 3px 3px 3px #aa8c51;
box-shadow: 3px 3px 3px #aa8c51;
}
??大學(xué)時(shí)期的項(xiàng)目前端無(wú)非就是css html JavaScript這些技術(shù) 熟練使用嵌套網(wǎng)頁(yè)模板進(jìn)行修改 久而久之你就會(huì)發(fā)現(xiàn)這些東西就是布局眼光的設(shè)計(jì) 實(shí)際上的邏輯運(yùn)算基本沒(méi)有 所以這個(gè)門(mén)檻還是很低的
HTML理論介紹
??HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式．被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)。
??HTML5是Web中核心語(yǔ)言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)，雖然技術(shù)人員在開(kāi)發(fā)過(guò)程中可能不會(huì)將這些新技術(shù)投入應(yīng)用，但是對(duì)于該種技術(shù)的新特性，網(wǎng)站開(kāi)發(fā)技術(shù)人員是必須要有所了解的。
就是這個(gè)地方你只需要記住一句話 html是超文本標(biāo)記語(yǔ)言即可，你大學(xué)計(jì)算機(jī)考試也就能考個(gè)選擇題或者填空題對(duì)于html的理解。
??層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。 [1]
??CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
??CSS具有以下特點(diǎn)：
??豐富的樣式定義
??CSS提供了豐富的文檔樣式外觀，以及設(shè)置文本和背景屬性的能力；允許為任何元素創(chuàng)建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內(nèi)容間的距離；允許隨意改變文本的大小寫(xiě)方式、修飾方式以及其他頁(yè)面效果。
??易于使用和修改
??CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個(gè)專(zhuān)門(mén)的CSS文件中，以供HTML頁(yè)面引用?？傊?，CSS樣式表可以將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。
??另外，可以將相同樣式的元素進(jìn)行歸類(lèi)，使用同一個(gè)樣式進(jìn)行定義，也可以將某個(gè)樣式應(yīng)用到所有同名的HTML標(biāo)簽中，也可以將一個(gè)CSS樣式指定到某個(gè)頁(yè)面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應(yīng)的樣式聲明進(jìn)行修改。
??多頁(yè)面應(yīng)用
??CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣我們就可以在多個(gè)頁(yè)面中使用同一個(gè)CSS樣式表。CSS樣式表理論上不屬于任何頁(yè)面文件，在任何頁(yè)面文件中都可以將其引用。這樣就可以實(shí)現(xiàn)多個(gè)頁(yè)面風(fēng)格的統(tǒng)一。
??層疊
??簡(jiǎn)單的說(shuō)，層疊就是對(duì)一個(gè)元素多次設(shè)置同一個(gè)樣式，這將使用最后一次設(shè)置的屬性值。例如對(duì)一個(gè)站點(diǎn)中的多個(gè)頁(yè)面使用了同一套CSS樣式表，而某些頁(yè)面中的某些元素想使用其他樣式，就可以針對(duì)這些樣式單獨(dú)定義一個(gè)樣式表應(yīng)用到頁(yè)面中。這些后來(lái)定義的樣式將對(duì)前面的樣式設(shè)置進(jìn)行重寫(xiě)，在瀏覽器中看到的將是最后面設(shè)置的樣式效果。
??頁(yè)面壓縮文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-426472.html
??在使用HTML定義頁(yè)面效果的網(wǎng)站中，往往需要大量或重復(fù)的表格和font元素形成各種規(guī)格的文字樣式，這樣做的后果就是會(huì)產(chǎn)生大量的HTML標(biāo)簽，從而使頁(yè)面文件的大小增加。而將樣式的聲明單獨(dú)放到CSS樣式表中，可以大大的減小頁(yè)面的體積，這樣在加載頁(yè)面時(shí)使用的時(shí)間也會(huì)大大的減少。另外，CSS樣式表的復(fù)用更大程度的縮減了頁(yè)面的體積，減少下載的時(shí)間。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-426472.html
到了這里，關(guān)于圖書(shū)管理系統(tǒng)-菜單頁(yè)面實(shí)現(xiàn)及HTML理論介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
