国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

web前端——頁(yè)面設(shè)計(jì)

2年前作者：vin77云虞分類：Toy博客閱讀(24)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了web前端——頁(yè)面設(shè)計(jì)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

為xhu.html添加CSS樣式，設(shè)計(jì)實(shí)現(xiàn)西華大學(xué)主頁(yè)導(dǎo)航欄的多級(jí)菜單，除了本實(shí)驗(yàn)明確要求的設(shè)置之外，頁(yè)面效果應(yīng)盡可能與西華大學(xué)首頁(yè)導(dǎo)航欄一致，主要要求：

  1. 設(shè)置導(dǎo)航欄菜單橫向分布，當(dāng)鼠標(biāo)經(jīng)過(guò)導(dǎo)航欄主菜單項(xiàng)時(shí)，顯示相應(yīng)的二級(jí)子菜單，一、二級(jí)菜單的菜單項(xiàng)寬度一致，見(jiàn)圖1；
  2. 導(dǎo)航菜單和展示圖應(yīng)能隨瀏覽器窗口寬度自適應(yīng)變化，但應(yīng)能確保導(dǎo)航欄主菜單項(xiàng)始終單行橫向分布，并且導(dǎo)航欄一級(jí)、二級(jí)菜單項(xiàng)中的超鏈接文本應(yīng)能始終單行顯示且寬度一致，見(jiàn)圖2；
  3. 不能更改原HTML文本，包括不能添加任何類名和ID屬性！
  4. 編寫應(yīng)用緩存文件，緩存頁(yè)面中圖像；
  5. 在頁(yè)面圖片下方動(dòng)態(tài)顯示當(dāng)前時(shí)間，歷史瀏覽次數(shù)，添加姓名、學(xué)號(hào)、電話輸入域和一個(gè)普通提交按鈕（不要使用submit），如果用戶曾經(jīng)提交過(guò)信息，則打開(kāi)頁(yè)面時(shí)在輸入域默認(rèn)顯示用戶歷史信息。（相關(guān)布局和元素樣式自行設(shè)計(jì)）。

友情提示：推薦使用彈性盒布局設(shè)計(jì)導(dǎo)航欄； 二級(jí)菜單的顯示與隱藏display屬性；二級(jí)菜單的定位采用position定位。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>西華大學(xué)</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            font-size: 18px;
            color: white;
        }
        
        a {
            text-decoration: none;
            color: white;
            /*color:white;*/
        }
        
        ul {
            position: relative;
            background: #0e6bc2;
            height: 50px;
            width: auto;
            list-style: none;
        }
        
        li {
            background: #0e6bc2;
            min-width: 144px;
            width: auto;
            height: 50px;
            line-height: 50px;
        }
        
        li:hover {
            background-color: #005691;
        }
        
        div {
            box-sizing: border-box;
            /*便于對(duì)齊，免受各類型元素padding不一致的影響*/
        }
        
        .nav {
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            width: 100%;
        }
        
        .sub-menu {
            display: none;
        }
        
        .menu-item {
            display: block;
            text-align: center;
        }
        
        #bg {
            margin: 0 auto;
            max-width: 1400px;
        }
        
        img {
            width: 100%;
        }
        
        .block {
            display: block;
        }
        
        input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 3px 4px;
            width: 200px;
            font-size: 14px;
            font-weight: 200;
        }
        
        .form {
            color: black;
            margin: 0 auto;
            max-width: 1400px;
        }
        
        #datetime {
            font-size: 20px;
            background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));
            -webkit-background-clip: text;
            color: transparent;
        }
        
        .times {
            letter-spacing: 0.2rem;
            font-size: 1.2rem;
			background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
        }
    </style>

	<script>
		var user = JSON.parse(localStorage.getItem('user')) || []
		var m = parseInt(localStorage.getItem('times')) || 1;
		console.log(m);
		window.addEventListener("load", () => {
			let item = document.getElementsByClassName('menu-item')
			for (let i = 0; i < item.length; i++) {
				item[i].addEventListener("mouseover", mouserOver)
				item[i].addEventListener("mouseout", mouserOut)
			}

			function mouserOver() {
				this.children[1].classList.add('block')
			}

			function mouserOut() {
				this.children[1].classList.remove('block')
			}

			setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);
			document.getElementById('frequency').innerHTML = m

		})
		window.addEventListener("beforeunload", () => {

			m++;
			console.log(m);
			localStorage.setItem('times', JSON.stringify(m))
		})

		nam = document.getElementById("name")
		num = document.getElementById("num")
		tel = document.getElementById("tel")
		nam.value = user.id
		num.value = user.num
		tel.value = user.tel

		function local(value) {
			localStorage.setItem('user', JSON.stringify(value))
		}

		function add() {
			const nam = {
				id: document.getElementById('name').value,
				num: document.getElementById('num').value,
				tel: document.getElementById('tel').value,
			}
			local(nam)
		}
	</script>
</head>

<body>
    <ul class="nav">
        <li class="menu-item"><a >學(xué)校概況</a>
            <ul class="sub-menu">
                <li><a  target="new">西華簡(jiǎn)介</a></li>
                <li>歷史沿革</li>
                <li>現(xiàn)任領(lǐng)導(dǎo)</li>
                <li>西華標(biāo)識(shí)</li>
                <li>西華影像</li>
            </ul>
        </li>
        <li class="menu-item"><a >機(jī)構(gòu)設(shè)置</a>
            <ul class="sub-menu">
                <li>學(xué)院</li>
                <li>部門</li>
            </ul>
        </li>
        <li class="menu-item"><a >人才培養(yǎng)</a>
            <ul class="sub-menu">
                <li>師資隊(duì)伍</li>
                <li>本科教育</li>
                <li>研究生教</li>
                <li>留學(xué)生教育</li>
                <li>?？平逃?lt;/li>
                <li>繼續(xù)教育</li>
            </ul>
        </li>
        <li class="menu-item"><a >科學(xué)研究</a>
            <ul class="sub-menu">
                <li>科研信息</li>
                <li>科研成果</li>
                <li>學(xué)科科研平臺(tái)</li>
                <li>學(xué)術(shù)期刊</li>
            </ul>
        </li>
        <li class="menu-item"><a >招生就業(yè)</a>
            <ul class="sub-menu">
                <li>本?？普猩?lt;/li>
                <li>研究生招生</li>
                <li>繼續(xù)教育招生</li>
                <li>就業(yè)信息</li>
            </ul>
        </li>

        <li class="menu-item"><a >合作交流</a>
            <ul class="sub-menu">
                <li>國(guó)際交流與合作</li>
                <li>地方合作</li>
                <li>西華大學(xué)科技園</li>
                <li>國(guó)際教育學(xué)院</li>
            </ul>
        </li>
        <li class="menu-item"><a >公共服務(wù)</a>
            <ul class="sub-menu">
                <li>學(xué)校校歷</li>
                <li>網(wǎng)絡(luò)服務(wù)</li>
                <li>招標(biāo)投標(biāo)</li>
                <li>后勤服務(wù)</li>
                <li>辦公電話</li>
            </ul>
        </li>
        <li class="menu-item"><a >人才招聘</a>
        </li>
    </ul>
    <div id="bg"><img src="images/bg.jpg"></div>
    <div class="form">
        姓名<input value="" type="text" id="name"> 學(xué)號(hào)
        <input value="" type="number" id="num"> 電話
        <input value="" type="tel" id="tel">
        <button onclick=add()>提交</button>
        <div id="datetime">時(shí)間</div>
        <span class="times">歷史瀏覽次數(shù):<span id="frequency">0</span></span>
    </div>
</body>

</html>

css：?

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            font-size: 18px;
            color: white;
        }
        
        a {
            text-decoration: none;
            color: white;
            /*color:white;*/
        }
        
        ul {
            position: relative;
            background: #0e6bc2;
            height: 50px;
            width: auto;
            list-style: none;
        }
        
        li {
            background: #0e6bc2;
            min-width: 144px;
            width: auto;
            height: 50px;
            line-height: 50px;
        }
        
        li:hover {
            background-color: #005691;
        }
        
        div {
            box-sizing: border-box;
            /*便于對(duì)齊，免受各類型元素padding不一致的影響*/
        }
        
        .nav {
            display: flex;
            justify-content: center;
            flex-wrap: nowrap;
            width: 100%;
        }
        
        .sub-menu {
            display: none;
        }
        
        .menu-item {
            display: block;
            text-align: center;
        }
        
        #bg {
            margin: 0 auto;
            max-width: 1400px;
        }
        
        img {
            width: 100%;
        }
        
        .block {
            display: block;
        }
        
        input {
            outline-style: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 3px 4px;
            width: 200px;
            font-size: 14px;
            font-weight: 200;
        }
        
        .form {
            color: black;
            margin: 0 auto;
            max-width: 1400px;
        }
        
        #datetime {
            font-size: 20px;
            background: linear-gradient(to right, rgb(53, 177, 72), rgb(118, 7, 7));
            -webkit-background-clip: text;
            color: transparent;
        }
        
        .times {
            letter-spacing: 0.2rem;
            font-size: 1.2rem;
			background-image: -webkit-linear-gradient(left, #961414, #9005e6 10%, #142396 10%, #05e679 50%, #879614);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
        }
    </style>

?新增HTML：

<div class="form">
        姓名<input value="" type="text" id="name"> 學(xué)號(hào)
        <input value="" type="number" id="num"> 電話
        <input value="" type="tel" id="tel">
        <button onclick=add()>提交</button>
        <div id="datetime">時(shí)間</div>
        <span class="times">歷史瀏覽次數(shù):<span id="frequency">0</span></span>
    </div>

js腳本：

<script>
		var user = JSON.parse(localStorage.getItem('user')) || []
		var m = parseInt(localStorage.getItem('times')) || 1;
		console.log(m);
		window.addEventListener("load", () => {
			let item = document.getElementsByClassName('menu-item')
			for (let i = 0; i < item.length; i++) {
				item[i].addEventListener("mouseover", mouserOver)
				item[i].addEventListener("mouseout", mouserOut)
			}

			function mouserOver() {
				this.children[1].classList.add('block')
			}

			function mouserOut() {
				this.children[1].classList.remove('block')
			}

			setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 500);
			document.getElementById('frequency').innerHTML = m

		})
		window.addEventListener("beforeunload", () => {

			m++;
			console.log(m);
			localStorage.setItem('times', JSON.stringify(m))
		})

		nam = document.getElementById("name")
		num = document.getElementById("num")
		tel = document.getElementById("tel")
		nam.value = user.id
		num.value = user.num
		tel.value = user.tel

		function local(value) {
			localStorage.setItem('user', JSON.stringify(value))
		}

		function add() {
			const nam = {
				id: document.getElementById('name').value,
				num: document.getElementById('num').value,
				tel: document.getElementById('tel').value,
			}
			local(nam)
		}
	</script>

測(cè)試結(jié)果截圖：

?前端頁(yè)面設(shè)計(jì),前端,css,html

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-758673.html

?

到了這里，關(guān)于web前端——頁(yè)面設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包