业余自学HTML5，学了一周，做出一堆屎，憋屈，不知道怎么学了！！！

最新推荐文章于 2022-10-07 11:21:45 发布

纯情小码哥

最新推荐文章于 2022-10-07 11:21:45 发布

阅读量319

点赞数

文章标签： HTML5 WEB前端

本文链接：https://blog.csdn.net/Liyunhao_haoge/article/details/101776631

版权

火狐页面制作：https://start.firefoxchina.cn/

先说一下个人感受吧：
匆匆看了40个视频，似懂非懂地做了一个网页。
刚开始的时候，除了写个div，感觉其他的东西都无从下手，火狐页面已经够简单的了，本以为花2个小时就能够彻底地做出来，后面才发现，做出了一堆“屎”，唉。
（1）火狐title里面插入图片
   刚开始去查笔记，用img、background-image，加高度、宽度，不行！上网一查，原来不是CSS的知识，网上抄袭了过来，发现不能显示。后面才发现，在google里面能够显示，在火狐浏览器里不能。
（2）select栏、输入栏、搜索栏
   这三个是在一个水平的，哦，好开心，用float:left；将它们排成一排。后来发现，位置不对啊，怎么往下移了那么多。小白刚学不久，大概知道什么块元素占了高度啥的，不过具体不知道怎么分析和解决。弄了半天的float，我彻底崩溃了，弄不出来；
   后来呢，直接用position，用position:relative的时候，发现坐标也不对，唉，用绝对位置恶心得要死，有种吃了屎又不能说的感觉；
（3）select里面插入图片
   继续无脑插入图片<img src = "xxx">;唉，显示不出来，晕死了，网上一搜，好像是不行的，要用其他技术去做这件事情；
（4）搜索里，有一个图标和“搜索”文字；
   刚开始的时候，想将搜索图标和“搜索”文字连在一起，我又来float了，无论怎么做，图标与文字都有空隙。后来想了想教程，把图标当成背景，再将文字加进去；
   图标成了背景，确实可以放在一起了，可是：文字和图标相隔太近了，哦，用那些什么padding好像可以解决，可是，怎么加进去都不生效啊啊啊！

懂了半天，总结了一个结论，要重新学了，我该何去何从，这打击有点大，感觉似曾相识，做起来非常陌生；

有经验的人，能不能教教我，怎么学前端比较好一点啊啊啊。

<html>
<head>
<title>火狐搜索起始页</title>

<link rel="icon" href="fireFox.ico" type="image/x-icon"/>

<!--
<meta http-equiv = "refresh" content = "1">
-->


<style type = "text/css">
.C_FireFoxPosition
{
	position:relative;
	top:100px;
	left:910px;
}

.C_Select
{
	position:absolute;
	top:253px;
	left:612px;

}

.C_InputPosition
{

	position:absolute;
	top:253px;
	left:687px;

}

.C_Submit
{
	position:absolute;
	top:253px;
	left:1213px;
	height:40px;
	width:100px;
	cursor:pointer;
}



.C_Font1
{
	position:absolute;
	top:376px;
	left:890px;
	font-family:"宋体";
	font-size:12px;
	text-decoration:underline;
	cursor:pointer;
}


.C_Font2
{
	margin:0;padding:0;
	position:absolute;
	top:376px;
	left:954px;
	font-family:"宋体";
	font-size:12px;
	text-decoration:underline;
	cursor:pointer;
}

.C_Pointer
{
	cursor:pointer;
}

</style>
</head>
<body>

<div class = "C_FireFoxPosition">
	<img src = "fireFox.jpg" width = "100px" height = "100px">
</div>

<div class = "C_Select">
<select style = "width:75px;height:40px" class = "C_Pointer">
	<option>百度<imt src = "fireFox.jpg" width = "20px" height = "20px"/></option>
	<option>谷歌</option>
	<option>淘宝</option>
</select>

</div>

<div class = "C_InputPosition">
	<form name = "表单" method = "post" action = "">
		<input style = "width:526px;height:40px"type = "text">
	</form>
</div>

<div class = "C_Serch">
		
</div>

<div class = "C_Submit">
	<form>
		<input style = 
		"width:100px;height:40px;
		background:url(serch.png);
		background-color:RGB(0,162,232);
		color:white;" 
		type = "submit" value = "搜索">	
	</form>
</div>
	
<div class = "C_Font1">
<a alt = "出错了" >火狐主页</a>
</div>

<div class = "C_Font2">
火狐移动联盟
</div>


</body>
</html>