line-height background 滚动条overflow-y 阴影box-shadow

1 段落行间距 line-height:150%;

2 css : background

在这里插入图片描述
例如:
background: url(…/image/banner_logo.png) no-repeat 10px 0px;
这里图片位置在top:10px处。

3 css : background-position

在这里插入图片描述

4 滚动条问题

页面上有标题head高度为120px,下面是每个菜单对应的jsp,因此下面高度为calc(100% - 120px)

		<section id="license" style="height:calc(100% - 120px); width: 100%;">
			<iframe src="pages/test.jsp" id="workframe" name="workframe" frameborder="0"
				scrolling="auto" style="height:calc(100% - 0px);width: 100%;"></iframe>
		</section> 

初始head高度因为有ul行间距,实际高度为135px,因此如果设置成(100%-120px),jsp的高度其实就超出了所需要的页面高度,因此会出现滚动条。
而使用overflow-y:hidden;可以在内容不超出时隐藏滚动栏。
然后又发现了一个问题。在test.jsp中,我同样设置了高度(100%-0px),初始在内容很少时是没有问题的,但是在页面内容特别长时,我发现比当前页面窗口多出来的部分看不到,但是又不能通过滚动栏拖动到下方。出现这个问题其实是因为div设置了固定高度,test.jsp页面的这个div的高度即上面的(100%-0px)。将其改成height:100%,滚动条就又出现了。
而还有一个更简单的办法就是**verflow-y: auto;**当内容没超过高度的时候,就不会出现滚动条了。这样就不用发愁滚动条的问题啦。
在这里插入图片描述

** 5 box-shadow**

http://www.w3school.com.cn/cssref/pr_box-shadow.asp
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43322208/article/details/84348544