昨天刷手机看到个教做网页的广告,我寻思着反正周末闲着也是闲着,干脆自己动手试试。今天吃完早饭就坐电脑前开整了,咱从零开始哈。
第一步:新建文件夹找地方
先打开我的破笔记本,在桌面上右键戳了个新文件夹,名字就起"我的第一个丑网页"。这破名儿真贴切,后来证明确实丑得要命。
第二步:创建第一个文件
鼠标双击点进文件夹,直接右键选新建文本文档。文件名瞎敲了个"首页.txt",结果闪退两次才发现忘关杀毒软件。关掉后终于建好了,但还得改后缀名:
- 对着文件按F2把txt改成html
- 弹窗警告问要不要改,手一抖差点点取消
改完图标就变成浏览器图标了,双击后直接白花花一片,啥也没有很正常。
第三步:敲骨架代码
用记事本打开那个空文件,照着网图抄了五行基本框架:
- 第一行写<!DOCTYPE html>告诉浏览器这是啥玩意儿
- 后面包了个<html>当套娃盒子
- 盒子里分<head>和<body>俩小格子
- 在head里塞了个<title>我的土味网页</title>
保存后刷新浏览器,标签页上真出现了"我的土味网页"几个字!虽然页面还是白的,但成就感已经窜上来了。
第四步:瞎编内容
在<body>里开始胡写:
- 用<h1>搞了个超大字标题
- <p>标签里敲了两段瞎编的鸡汤文
- 用<ul>列了三行吹牛的话
保存完刷新一看,字全挤在左上角,段落之间没空隙,丑得眼睛疼。
第五步:挽救颜值
在<head>里加了<style>标签开整:
- 把body背景色改成米黄色(#ffe4b5),立刻顺眼多了
- 给标题调成蓝色,再加了个居中显示
- 给段落设了行高,终于不像挤在一起的蚂蚁了
调试最气人,给列表项加圆点符号时手滑写成list-style: squre;,死活不显示。后来才发现把square拼错了,改完才蹦出黑方块。
成果
折腾一上午搞出个四不像:标题歪歪扭扭居中,段落像被扯开的棉花糖,配色还是土得掉渣。但每个字都是自己敲的!浏览器标题、段落、列表都乖乖按指令排布了。建议新手别纠结美观度,能跑起来就是胜利!下次准备试试插图片,听说那个更闹心...





