htmlcss网页设计步骤详解跟着做就能完成网页

发布日期： 2025-09-17 阅读量： 作者： admin

昨天闲着没事瞎鼓捣，突然琢磨着整个个人博客首页出来试试手。反正这玩意儿学学不吃亏，网页基础嘛

一开电脑就手忙脚乱

先哐哐敲了个空架子。打开记事本，开头就怼了个!DOCTYPE html上去，管它懂不懂，先按套路来！接着html大括号一开，里面塞上head和body两块。

页面总得有个大框？我就拿div当脸盆使，给它起了个名字叫container。这脸盆里还得装几个小碗：

刚开始跟摆摊似的乱糟糟，菜单栏用ul列了一排导航，结果全挤成一坨。赶紧给每个li套上display: inline-block才像排队买煎饼了。

打开.css文件开始上色。给header刷了个屎黄色背景（#f5e79c），自己看着都笑出声。

翻出昨天喝的奶茶色号（#d7bde2），把nav菜单泡成了粉奶茶色。鼠标划过去想整点动静，就写了段：nav a:hover { color: red; }，这下手一滑菜单就发神经变红字！

正文区更搞笑，给article盒子画了个虚线边框，想着用margin: 20px auto;就能居中，结果左边右边死活留空，折腾半小时才发现没设盒子宽度！气得我直接定了width: 70%;才消停。

在电脑上美滋滋欣赏，顺手用手机一看——完了完了，整个布局碎成了旺旺雪饼！标题挤成芝麻粒，导航菜单直接掉出屏幕外。

赶紧查了下解决偏方，在css文件尾巴塞了个咒语： @media screen and (max-width: 600px) {

里面临时抱佛脚：

捣鼓完再瞅手机——好歹能看清楚了。

保存刷新！虽然配色还是跟被揍了似的青一块紫一块，但好歹像个网页了。下次再试试让图片别乱飘——这玩意比遛狗还难控制！