学习笔记-ife2015task0001(一)

最新推荐文章于 2019-12-28 16:30:35 发布

饮tom

最新推荐文章于 2019-12-28 16:30:35 发布

阅读量401

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/OAOiii/article/details/89476141

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习笔记-ife2015task0001(一)

极慢速学习前端一个月。最近在做百度ife的task0001的7综合练习，记下遇到的问题。

第一个任务是task0001_1。
然后就是任务中要求：不需要写任何JavaScript，只需要关注HTML、CSS。所以都是用css和html实现的。

初始，题目就有一个要求：

页面实际内容宽度为980px，头部背景、大图、底部背景均为100%宽，当浏览器宽度低于980px时，页面宽度不变，允许出现横向滚动条。右上角的Github图标在浏览器低于980px时消失。

然后展示图是这样的
在这里插入图片描述

既然说页面实际内容宽度为980px，那就是起一个头部分组然后里面包含了实际内容和Github的图标。

html代码

贴上总体的html代码

	<body>
		<div class="top">
			<div class="header">
				<header>NgSzeOi</header>
				<div class="h-menu">
					<ul class="menu">
						<li class="menu1">首页</li>
						<li class="menu1">文章</li>
						<li class="menu1">作品</li>
						<li class="menu1">关于</li>
					</ul>
				</div>
			</div>
			<a href="https://github.com/">
				<img src="icon-github.png" alt="进入Github">
			</a>
		</div>
	</body>

CSS代码

头部

.top {
position: absolute;
top: 0;
left: 0;
height: 80px;
background-color: #5C86BF;
}

实际内容

实际内容的要求实际上也是要在在头部中居中

.header {
height: 100%;
position: relative;
float: left;
width: 980px;
left: 50%;
margin-left: -490px;
}

YourLOGO

YourLOGO没有明确的要求，css代码，所以就只是设置与头部底部贴合。

    .header header {
    font-size: 36px;
    color: white;
    position: absolute;
    bottom: 0;
    }

菜单栏

然后就到了菜单栏

具体要求是：菜单文字为宋体，14px，菜单项之间间隔为28px，距离header下边线间距5px。

菜单文字的设置

.menu {
font-family: SimSun;
font-size: 14px;
color: white;
}

菜单项

菜单项之间间距为28px，这个要求我是设置了每一项的margin-left为28px，即盒模型的左外边距为28px。

其实设置分别盒模型左右外边距为14px也是可以的。

以及菜单项是横向展示的。

    .menu1 {
    display: inline;
    margin-left: 28px;
    }

菜单位置

由图可以知道，菜单项整体是紧贴实际内容的右端，它的底部距离头部的下边线间距是5px。

补充一些我之前还不太理解的概念：

Absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。

至于什么是“已定位父元素”？就是如果没有position属性，就不是已定位的祖先元素。

如果没有已定位的祖先元素，那么它的位置相对于最初的包含块，也就是body（或者称为html画布）。实际上，使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。

这里 .h-menu的已定位的祖先元素是 .header（实际内容部分），所以只需要将菜单的右部对齐祖先的右部，菜单底部高于祖先底部的5px

    .h-menu {
    position: absolute;
    right: 0;
    bottom: 5px;
    }

Github LOGO位置

显示要求是：右上角的Github图标在浏览器低于980px时消失。以及Github LOGO距离右边10px。

补充：Media Query（媒介查询）：

@media 媒体类型 and (条件1)   
{
<!--css样式-->
｝

媒体类型使用screen，这个适用于电脑屏幕、平板电脑、智能手机等。

min-width：最小宽度

Github LOGO的已定位的祖先元素是 .top，所以当浏览器大于等于980px时，logo的底部紧贴top的底部，logo的右端离top的右边10px；低于980px的时候不显示。

@media only screen and (min-width:980px){
    .top a {
        position: absolute;
        bottom: 0;
        right: 10px;
    }
    .top {
	    width: 100%;
    }
}

@media only screen and (max-width:980px){
    .top a {
        display: none;
    }

    .top {
	    min-width: 980px;
	    width: 100%;
    }
}

这里顺带实现了当浏览器宽度低于980px时，页面宽度不变，允许出现横向滚动条。
然而，实际上当浏览器大小大于980px时，github LOGO图片会覆盖了菜单项部分内容。也许将min-width和max-width:980px设置大点会更好一些，或者还有其他更好的方法。

饮tom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记-ife2015task0001(一)

学习笔记-ife2015task0001(一)极慢速学习前端一个月。最近在做百度ife的task0001的7综合练习，记下遇到的问题。然后就是任务中要求：不需要写任何JavaScript，只需要关注HTML、CSS。所以都是用css和html实现的初始，题目就有一个要求：页面实际内容宽度为980px，头部背景、大图、底部背景均为100%宽，当浏览器宽度低于980px时，页面宽度不变，允许出...
复制链接

扫一扫