HTML-CSS_placeholder 缩进-CSDN博客

本文链接：https://blog.csdn.net/fangjianj/article/details/129106245

一、文字片段首行缩进

文字首行缩进需要先设置一个<p>或者<div>标签并且在<style>中进行描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				text-indent:2em;
			}
		</style>
	</head>
	<body>
		<div>12132143<br>2546646766</div>
	</body>
</html>
 

   12132143
2546646766

二、制作搜索栏，并在搜索栏中搜索你想的事然后跳到百度上

先制作出一个完整的搜索栏，一个完整的搜索栏由两部分组成：搜索框和搜索按钮。这两个要分开写之后在利用浮动来选择搜索框的位置是在左边还是右边，最后在定位整个搜索栏的位置，一个完整的搜索栏就完成了。中间还有很多细节像：在搜索框中要有“请输入内容”的字样或者其他的字，可以在input的标签里用 placeholder="请输入内容"就行，还有就是选择页面的打开方式就要用 target=" ";其中_bank是打开一个新页面去搜索，_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中；_self，在同一框架或窗口中打开所链接的文档。至于要跳到其他网站去搜索就要用标签<form>需要在action后面输入目标网站，但需要注意的是在输入目标网站之后还要加上一个s（代表搜索的意思）否则将会直接跳到官网上，将不会就行内容的搜索。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				 border: 0; 
				 outline: none;
			}
			.search{
					position: absolute;
					left: 950px;
					top:120px;
					width: 400px;
					height: 69px; 
			}
			.search input{
						float: left;
						width: 230px;
						height: 67px;
						padding-left: 10px;
			}
			.search button{
				        float: left;
						width: 80px;
						height: 68px;
						background-color:#11C2EE;
						font-size: 16px;
						color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="search">
			<form method="get" action="https://www.baidu.com/s" target="_top">
		        <input type="text" name="wd" placeholder="请输入内容" >
		        <button type="submit">搜索</button>
			</form>
		</div>
	</body>
</html>

三、定位

HTML中定位分为：static定位 fix定位 relative定位 absolute定位

1、static定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

2、fix定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

3、relative定位：相对定位元素的定位是相对其原本的正常位置。

移动相对定位元素，但它原本所占的空间不会改变。

4、absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。

absolute 定位使元素的位置与文档流无关，故不占据空间。absolute 定位的元素和其他元素重叠。

一般来说，要是位置不容易固定的话，absolute是一个不错的选择。

5、还有就是可以用padding或者margin进行定位，但这种容易产生一些意想不到的bug。

四、显示在最上层