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

火狐页面制作：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>

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

学完python基础开始学爬虫_零基础入门Python爬虫不知道怎么学？这是入门的完整教程...
这是一个适用于小白的Python爬虫免费教学课程,只有7节,让零基础的你初步了解爬虫,跟着课程内容能自己爬取资源.看着文章,打开电脑动手实践,平均45分钟就能学完一节,如果你愿意,今天内你就可以迈入爬 ...
连续加班2周做出来的功能，老板说先不做了
web前端教程用大白话,来讲编程 1. 去除掉网页中的CSS文件,不忍直视 2. 这个bug已经修复好了,结果... 3. 代码运行一次就完美通过了 4. 连续加班2周做出来的功能,老板说这个先不做 ...
花998购买的拍摄技巧和7天起号培训文档，学了一周的总结。
花998购买的拍摄技巧和7天起号培训文档,学了一周的总结. 为了更加专业的给大家讲讲短视频和自媒体,花了998买了一套培训教材,然后花了一周的时间细细的学习了一下. 学完后,对于拍摄和运营都有了进步, ...
小姐姐用一周的时间，偷偷带你学Python，从小白到进阶，全站式保姆的Python基础教程导航帖（已完结）
第一部分.基础知识目录小姐姐带你们偷偷的学Python,然后你们要惊呆所有人(第一天) 小姐姐带你们偷偷的学Python,然后你们要惊呆所有人(第二天) 小姐姐带你们偷偷的学Python,然后你们要 ...
3D手绘模型和次世代模型的区别？零基础学游戏建模应该做出什么样的选择？
3D建模是一个总称,普遍来说3D建模分为:角色模型和场景模型两种,其中又分为手绘模型和次时代模型. 一.什么是手绘模型? 3D美术设计师根据原画设计师的构思,将二维的东西在3D软件里面制作出来,最终得 ...
花188购买的0基础短视频入门实战培训文档，学了一周的总结。
花188购买的0基础短视频入门实战培训文档,学了一周的总结. 大家好,我是我赢助手,专注于自媒体短视频去水印.去重和文案提取运营! 为了更加专业的给大家讲讲短视频和自媒体,也为了能了解0基础怎么搞定短 ...
html语言面向对象,自学html5教程之JavaScript面向对象
原标题:自学html5教程之JavaScript面向对象 1.对象是什么面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式. 它将真实世界各种 ...
python学了真的很有用吗-你还在盲目跟风学Python？你真的了解吗？某华大学教授有话要说...
你觉得Python真的好吗?或许你在漫天的宣传中看到了这些: 接近英语的简单语法: 开发环境简单,能打字就能写代码: 众多的第三方库: 解释执行,不需要编译: 跨平台,方便移植: 但是作为一个负责任的 ...
Java不知道怎么学？看这个就对了！
Java不知道怎么学?看这个就对了! Java近些年来一直稳坐编程语言排名的前三名,最为编程语言的老大,受到了全球范围内众多编程爱好者的追捧.再加上Java语言在各个领域的开发应用和极高于其他行业的薪 ...

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

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

最新文章

热门文章