1. Toy模板网首页
  2. > Toy博客

web前端——页面设计

10月前 作者：vin77云虞 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了web前端——页面设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

为xhu.html添加CSS样式，设计实现西华大学主页导航栏的多级菜单，除了本实验明确要求的设置之外，页面效果应尽可能与西华大学首页导航栏一致，主要要求：

  1. 设置导航栏菜单横向分布，当鼠标经过导航栏主菜单项时，显示相应的二级子菜单，一、二级菜单的菜单项宽度一致，见图1；
  2. 导航菜单和展示图应能随浏览器窗口宽度自适应变化，但应能确保导航栏主菜单项始终单行横向分布，并且导航栏一级、二级菜单项中的超链接文本应能始终单行显示且宽度一致，见图2；
  3. 不能更改原HTML文本，包括不能添加任何类名和ID属性！
  4. 编写应用缓存文件，缓存页面中图像；
  5. 在页面图片下方动态显示当前时间，历史浏览次数，添加姓名、学号、电话输入域和一个普通提交按钮（不要使用submit），如果用户曾经提交过信息，则打开页面时在输入域默认显示用户历史信息。（相关布局和元素样式自行设计）。

友情提示：推荐使用弹性盒布局设计导航栏； 二级菜单的显示与隐藏display属性；二级菜单的定位采用position定位。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>西华大学</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;
            /*便于对齐，免受各类型元素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 href="http://www.xhu.edu.cn">学校概况</a>
            <ul class="sub-menu">
                <li><a href="http://www.xhu.edu.cn" target="new">西华简介</a></li>
                <li>历史沿革</li>
                <li>现任领导</li>
                <li>西华标识</li>
                <li>西华影像</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">机构设置</a>
            <ul class="sub-menu">
                <li>学院</li>
                <li>部门</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">人才培养</a>
            <ul class="sub-menu">
                <li>师资队伍</li>
                <li>本科教育</li>
                <li>研究生教</li>
                <li>留学生教育</li>
                <li>专科教育</li>
                <li>继续教育</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">科学研究</a>
            <ul class="sub-menu">
                <li>科研信息</li>
                <li>科研成果</li>
                <li>学科科研平台</li>
                <li>学术期刊</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">招生就业</a>
            <ul class="sub-menu">
                <li>本专科招生</li>
                <li>研究生招生</li>
                <li>继续教育招生</li>
                <li>就业信息</li>
            </ul>
        </li>

        <li class="menu-item"><a href="http://www.xhu.edu.cn">合作交流</a>
            <ul class="sub-menu">
                <li>国际交流与合作</li>
                <li>地方合作</li>
                <li>西华大学科技园</li>
                <li>国际教育学院</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">公共服务</a>
            <ul class="sub-menu">
                <li>学校校历</li>
                <li>网络服务</li>
                <li>招标投标</li>
                <li>后勤服务</li>
                <li>办公电话</li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://www.xhu.edu.cn">人才招聘</a>
        </li>
    </ul>
    <div id="bg"><img src="images/bg.jpg"></div>
    <div class="form">
        姓名<input value="" type="text" id="name"> 学号
        <input value="" type="number" id="num"> 电话
        <input value="" type="tel" id="tel">
        <button onclick=add()>提交</button>
        <div id="datetime">时间</div>
        <span class="times">历史浏览次数:<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;
            /*便于对齐，免受各类型元素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"> 学号
        <input value="" type="number" id="num"> 电话
        <input value="" type="tel" id="tel">
        <button onclick=add()>提交</button>
        <div id="datetime">时间</div>
        <span class="times">历史浏览次数:<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>

测试结果截图：

 前端页面设计,前端,css,html

 文章来源地址https://www.toymoban.com/news/detail-758673.html

 

到了这里，关于web前端——页面设计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包