资源管理平台头部导航栏(1+X Web前端开发初级 例题)

发布于：2022-11-06 ⋅ 阅读:(948) ⋅ 点赞:(0)

 📄题目要求

  • 阅读下列说明、效果图和HTML代码，进行静态网页开发，填写（1）至（20）代码。

🧩说明

  • 这是资源管理平台，用html+css完成。

  • 项目包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含base.css文件；img文件夹包含用到的图片。

  • 请根据效果图和已提供的代码，补全（1）-（20）中的代码。

🧩效果图

🧩补充：题目文件结构

💻HTML代码

<!-- 声明 -->
<!-- ______(1)_______ -->
<!DOCTYPE html>
<html>

<head lang="en">
    <!-- 设置编码为utf-8 -->
    <!-- <meta ___(2)_____="UTF-8"> -->
    <meta charset="UTF-8">
    <title>资源中心-首页</title>
    <!-- 引入样式 -->
    <!-- <___(3)___ href="css/base.css" rel="___(4)____"> -->
    <link href="css/base.css" rel="stylesheet">
</head>

<body>
    <!--公用头部导航开始-->
    <div class="top">
        <div class="top_conten">
            <div class="top_nav fl">
                <ul>
                    <!-- 填写链接属性 -->
                    <!-- <li><a ___(5)___="#">平台首页</a><span></span></li>
                    <li><a ___(5)___="#">个人中心</a><span></span></li>
                    <li><a ___(5)___="#">我的主页</a><span></span></li>
                    <li><a ___(5)___="#">学习中心</a><span></span></li>
                    <li class="cur"><a ___(5)___="#">资源中心</a><span></span></li> -->
                    <li><a href="#">平台首页</a><span></span></li>
                    <li><a href="#">个人中心</a><span></span></li>
                    <li><a href="#">我的主页</a><span></span></li>
                    <li><a href="#">学习中心</a><span></span></li>
                    <li class="cur"><a href="#">资源中心</a><span></span></li>
                </ul>
            </div>
            <div class="top_secher fl">
                <!-- 插入图片 -->
                <!-- <___(6)___ __(7)___="img/xiaobiao_img3.jpg"> -->
                <img src="img/xiaobiao_img3.jpg">
                    <input type="text">
            </div>
            <div class="top_info fr">
                <ul>
                    <li>
                        <!-- <___(6)___ __(7)___="img/xiaobiaio_tx.jpg" width="46" height="46"> -->
                        <img src="img/xiaobiaio_tx.jpg" width="46" height="46">
                    </li>
                    <li>李凤鸣同学<span>1</span></li>
                    <li>
                        <div class="set">
                            <!-- <___(6)___ __(7)___="img/xiaobiao_img1.jpg"> -->
                            <img src="img/xiaobiao_img1.jpg">
                        </div>
                    </li>
                    <li>
                        <div>
                            <!-- <___(6)___ __(7)___="img/xiaobiao_img2.jpg"> -->
                            <img src="img/xiaobiao_img2.jpg">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--公用头部导航结束-->

</body>

</html>

💻CSS代码

@charset "utf-8";
/* CSS Document */

/*样式重置*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,hr,span,form,fieldset,table,td,img,div,dl,dt,dd,input{
	margin:0;
	padding:0; 
	/* _____(8)____;清除列表样式 */
	list-style: none;/*清除列表样式*/
}
body,html{
	/* ____(9)____:"Microsoft YaHei";设置字体 */
	font-family:"Microsoft YaHei";/*设置字体*/
	font-size: 14px;
}
a{
	/* _____(10)_____;去掉下划线 */
	text-decoration: none;/*去掉下划线*/
}

img{
	border:none; 
	display:block; 
	margin: 0 auto;
}
input,select,textarea{
	outline:none;
	border:none; 
	/* background-color: ____(11)_____;设置背景透明 */
	background-color: transparent;/*设置背景透明*/
}
input:focus { 
	outline: none; 
}
textarea{
	/* _____(12)_______;阻止手动改变文本框大小 */
	resize: none;/*阻止手动改变文本框大小*/
}

/*清除浮动*/
.clearfix:after{
	content:"";
	display:block;
	clear:both;
}
.fl{
	float:left;
}
.fr{
	float:right;
}

/*头部样式*/
.top{ 
	width:100%; 
	margin:0; 
	padding:0; 
	height:60px; 
	background-color:#FFCF4E; 
	/* _____(13)______;设置固定定位  */
	position: absolute;/*设置固定定位*/ 
	/* ____(14)_____: 9999;设置层级 */
	z-index: 9999;/*设置层级*/
}
.top_conten{ 
	width:1200px; 
	margin:0 auto; 
	/* ____(15)_____;设置相对定位 */
	position: relative;/*设置相对定位*/
}
.top_nav ul{ 
	margin-left: 0px;
}
.top_nav ul li{  
	position:relative;
	float: left; 
	text-align: center; 
	color: #383337; 
	font-size: 16px; 
	/* ___(16)_____: 40px; 设置行高 */
	line-height: 40px; /*设置行高*/
	padding-top: 7px;
	margin: 0 15px;
}
.top_nav ul li a{ 
	color: #383337;
}
.top_nav ul .cur{ 
	border-bottom: 1px solid #383337;
}
.top_nav ul .cur a{
	color:#383337;
}
.top_nav span{
	display:inline-block;
	position:absolute;
	bottom:-1px;
	left:50%;
	margin-left:-35px;
	width:70px;
	height:1px;
	background:#383337;
	overflow:hidden;
	/* ___(17)____:____(18)___(0);放大 */
	transform:scale(0);/*放大*/
}
.top_nav ul li:hover span{
	/* ___(17)____:____(18)___(1); */
	transform:scale(1);
	/* ___(19)____:all .5s ease;设置过渡时间 */
	transition:all .5s ease;/*设置过渡时间*/
}
.top_secher{ 
	margin-top:18px; 
	border:none; 
	width: 0; 
	line-height: 24px; 
	height: 24px; 
	border-radius: 13px; 
	text-align: left; 
	/* ___(19)____: all .5s ease; */
	transition: all .5s ease;
}
.top_secher img{ 
	margin-left: 4px; 
	margin-top: 3px; 
	width: 19px; 
	display:block; 
	float: left;
}
.top_secher input{ 
	width: 120px; 
	float: left; 
	margin-left: 28px; 
	line-height: 24px; 
	position: absolute;
}
.top .open{ 
	width: 158px; 
	border: 1px solid #343434; 
	/* ___(19)____: all .5s ease; */
	transition: all .5s ease;
}
.top_info ul li{ 
	float:left; 
	margin:0 10px; 
	height:46px; 
	margin-top:7px; 
	display:table; 
	line-height:46px; 
	/* ___(15)____; */
	position: relative;
}
.top_info ul li > div{ 
	display:table-cell; 
	vertical-align:middle;
	text-align: center; 
	cursor:pointer;
}
.top_info ul li span{ 
	background-color: #FF4A1F; 
	border: 1px solid #fff; 
	color: #fff; 
	padding: 0 4px; 
	font-size: 12px; 
	line-height: 15px; 
	top:3px; 
	left: 68px; 
	position: absolute; 
	/* ____(20)_____: 50%;设置圆角 */
	border-radius: 50%;/*设置圆角*/
}

🎯实现效果

📰完整答案

试题一（30分）
【问题】（30分）
（1）<!DOCTYPE html>
（2）charset
（3）link
（4）stylesheet
（5）href
（6）img
（7）src
（8）list-style: none
（9）font-family
（10）text-decoration: none;
（11）transparent
（12）resize:none;
（13）position: fixed 
（14）z-index
（15）position:relative
（16）line-height
（17）transform
（18）scale
（19）transition
（20）border-radius
（每空1.5分，共30分）

🎯点赞收藏，防止迷路🔥 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布