（标题栏实战）浮动标题栏与锚

最新推荐文章于 2024-06-10 14:22:01 发布

魔芋小灰菜

最新推荐文章于 2024-06-10 14:22:01 发布

阅读量589

点赞数

分类专栏： # web学习日志文章标签： web html基础

本文链接：https://blog.csdn.net/u014185088/article/details/80294102

版权

web学习日志专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.在学习前端的过程中，实际的操作了一波。

常用选择器：

.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2

标签：<p><div>

选择器：#（ID选择器）使用方法：<p id=”1”> css中使用方法：:#1{}

属性：

height-->物件高度如图片的高

line-height --->表示行高，，一行文字的高度

（DIV中的高度会在内容超过后增加）

解释地址：百度知道

z-indx：定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

（越大其显示权限越大。默认为0.）

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如position:absolute;）！

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

position: fixed;

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。（）
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

属性中 text-decoration：none表示默认文本，即使原文本存在本身的样式（a默认带的下划线）都会被删除。

其他值：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。不适用IE。
inherit	规定应该从父元素继承 text-decoration 属性的值。

Margin()

问题：设置div上部标题后，但是div背后依然有文字显示。-----------今日问题

Div后面的文字依然在段首，以及div存在上边距（top=0）

解决方案：

解决方法

修改后的代码：

<!DOCTYPE html>
<html>
	<head>
		<style>
			/*#是ID选择器，*是全局选择器，*/
			body
			{background-color: antiquewhite;width: 100%;margin-bottom: 80px;}
			#nav
			{background-color:skyblue ;
			width: 100%;
			height: 80px;
			left: 0;
			margin: 0;
			position:fixed;z-index: 1;
			top: 0;
			}
			#bt-nav
			{width: 100%;
			text-align: right;
			height: 0;
			line-height: 80px;
			text-decoration:none;
			margin: 0 auto;
			}
			#bt-nav a
			{text-decoration: none;
			display: inline-block;
			margin: 0px 20px;
			color: blue;
			font-size: 24px;height: 80px;}
		#bt-nav a:hover{background-color:darkcyan;}
			#banner{
				margin-top: 80px;
				background-image: url(img/u=2943163049,2347131133&fm=27&gp=0.jpg);
		text-align: center;height: 300px;
	}
		#container{margin-top: 0px;width: 1000px;top: 0px;position:inherit;}
	#container h3{padding-top: 80px;margin-top: -80px;}
	/*至关重要的部分*/
		</style>
		<meta charset="UTF-8">
		<title>上部标题栏展示</title>
	</head>
	<body>
		<div id="nav">
			<div id="bt-nav">
<a href="#haizei">我的海贼</a>
<a href="#lufei">路飞简介</a>
<a href="#suolong">索隆简介</a>
<a href="#namei">娜美简介</a>
			</div>
		</div>
<!--内容显示页面-->
<div id=banner></div>
        <div id="container">
            <div>
            <h3 id="haizei">我的海贼</h3>
            <p class="text1">海贼王《ONE PIECE》（海贼王、航海王）简称“OP”，是日本漫画家尾田荣一郎作画的少年漫画作品。在《周刊少年Jump》1997年8月4号开始连载。故事讲述曾经拥有一切的“海贼王”哥尔·D·罗杰，在临死前留下了一句话，让全世界的人们，趋之若鹜奔向大海，世界迎来了“大海贼时代”！其中主角蒙奇·D·路飞就是带着自己的梦想奔向大海，在遥远的路途上找寻着志同道合的伙伴，一起进入“伟大航道”，目标当上“海贼王”。2012年5月11日，《航海王》获得第41回日本漫画家协会赏。截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。<img class="pic" src="12.jpg">
            </div>
            <div>
            <h3 id="lufei">路飞简介</h3>
            <p class="text2">蒙奇·D·路飞，日本漫画《航海王》的主角，草帽海贼团、草帽大船团船长，极恶的世代之一。橡胶果实能力者，悬赏金5亿贝里。梦想是找到传说中的One Piece，成为海贼王。
                他性格积极乐观，爱憎分明且十分重视伙伴，不甘屈居于他人之下，对任何危险的事物都超感兴趣。和其他传统的海贼所不同的是，他并不会为了追求财富而无故杀戮，而是享受着身为海贼的冒险和自由。
                从忘年交香克斯手里继承了海贼王罗杰的草帽[1]  。
                <img class="pic" src="img/唐人街探案2.jpg">
            </div>
            <div>
            <h3 id="suolong">索隆简介</h3>
            <p class="text3">罗罗诺亚·索隆，日本漫画《航海王》及衍生作品中的角色，草帽一伙的剑士，使用三把刀战斗的三刀流剑士，极恶的世代之一，也是二年前集结香波地群岛的十一超新星之一[1]  。目前悬赏3亿2000万贝利[2]  。好嗜酒，实力强劲。
                为了小时候与古伊娜的约定而踏上了前往世界第一剑士的道路，随后成为主角蒙奇·D·路飞的第一个伙伴。在初次败给世界第一剑士“鹰眼米霍克”后向路飞发誓永不再败，并且更加努力的锻炼自己。在两年前草帽一伙被熊逐个击飞后，遇见了米霍克。在鹰眼的帮助训练下，两年后的他成功与伙伴们会合，并且为了实现自己的梦想，奔赴强者如云的新世界[3]  。和船上的厨师山治是形影不离的死对头。
                <img class="pic" src="5.jpg" >
            </div>
            <div>
            <h3 id="namei">娜美简介</h3>
            <p class="text4">娜美，称号：小贼猫，日本漫画《海贼王》[1]  及衍生作品中的角色，女主角，草帽海贼团的航海士，路飞的第二个伙伴[2]  ，悬赏6600万贝里。
                特征是橘色的短发（两年后为波浪长发）和左肩的刺青（风车与橘子的图案）。使用棍术，现在武器为“魔法天候棒”。头脑聪明又机灵，精通气象学和航海术，能用身体感知天气，完美指示航路，是个能精确画出航海图的天才航海士。本质上是个细心、善良、重视感情、嫉恶如仇、偶尔有些温柔的能干的女性。最喜欢钱和橘子，梦想是要画出全世界的地图。
                <img class="pic" src="7.jpg">
            </div>
          
        </div>

	</body>
</html>

魔芋小灰菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（标题栏实战）浮动标题栏与锚

1.在学习前端的过程中，实际的操作了一波。常用选择器：.class .intro 选择 class="intro" 的所有元素。 1 #id #firstname 选择 id="firstname" 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有 &lt;p&gt; 元素。 1 element,element div,p 选择所有 &lt;d...
复制链接

扫一扫