百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

从abc起步学做网站(4)(从abc开始学英语)

yuyutoo 2025-04-06 00:10 11 浏览 0 评论

现在我们有了个网站index.htm,并且绑定了域名(没有买域名的同学可以继续用空间商送的免费的,一样学),这一篇我们扩充网站index.htm的内容,并且排版。

首先说怎么添加图片,在网上随便找个好看的图片,下载到自己桌面上,并重命名为 1.jpg ,表示是我们的第一个图片。(提示:你找的图片如果不是jpg格式的会出错,重新找一找jpg格式的图片,就是后面后缀名为.jgp)。

桌面上的 index.htm 应该没有删吧,删的话重新建一个,然后右键--index.htm,选择打开方式-选择记事本打开,然后在记事本中输入:

我的第一个网站,网贷揭秘 wangdai119

然后保存并关闭。

打开一个文件夹,并在文件夹的地址栏打开你的ftp地址,登陆你网上的文件夹,把 index.htm 和 1.jpg这两个文件都拖进去,覆盖上次拖进去的index.htm。

现在打开你的网站,就能看到图片了,你可以把 1.jpg 换成任何图片文件,也可以换成一个图片网址。

以后讲的内容大家都可以在本机浏览,不用上传到网上的文件夹了,因为比较麻烦,大家心里知道怎么把内容放到网上就可以了。

现在讲用DIV定位,就是规定内容在网站的哪个地方显示,一个DIV就是一个长方形,你可以规定这个长方形多高,多长,里面内容随便填。一个标准的DIV类似这样:

我的第一个网站,网贷揭秘 wangdai119 ,我是顶部

其中开头的<div 告诉浏览器我是一个长方形,结尾的

告诉浏览器这个长方形结束了。长方形中间的内容可以随便填。其中id="toubu"就是这个长方形的名字,一个网站可能有很多长方形组成,每个长方形应该有自己的名字,就像一个班级没人名字都不一样,不然就乱了。

style=后面的内容就告诉浏览器我这个长方形是什么样子的,width:900px就是长方形宽900像素,height:100px;就是长方形高100像素,border:1px solid red; 这里有三个东西,border:是长方形边框的意思,1px 是边框宽1像素,solid是说边框是实线的,red是说边框的颜色是红色的。其中我的第一个网站,网贷揭秘 wangdai119 ,我是顶部就是长方形中间的内容,合起来就是定义一个高100宽900,边框宽1像素红色实线,内容是刚才的内容的长方形。把代码复制进index.htm,保存-关闭,然后用浏览器打开就可以看到效果了。

现在我们做一个通常网站会用的模板,

我的第一个网站,网贷揭秘 wangdai119 ,我是顶部

我是左侧,通常会放导航

我是右侧,通常会放主要内容

我是底部,通常会放版权链接

显示效果如下图

这里有五个长方形,其中一个是隐藏的,四个现时代额红色长方形都在长方形排版方法如下,我们先剔除长方形样式的语句,只说div怎么排的,div标记必须成对出现,像下面一样

我是隐藏的长方形的开始

我是顶部长方形的开始
我是顶部长方形的结束

我是左边长方形的开始
我是左边长方形的开始

我是右边长方形的开始
我是右边长方形的开始

我是底部长方形的开始
我是底部长方形的开始

我是隐藏的长方形的结束

其中顶部和底部的长方形大家好理解,从上到下排列显示的,中间两个并排的不好理解。

顶部和底部长方形宽都是900,左边长方形宽300,右边的宽580。

大家看代码里左边长方形多了一个参数float:left;,表示这个长方形靠左侧显示。右边长方形也多了一个float:right;表示这个长方形靠右侧显示。所以能并排显示。

有一个细节是底部长方形也多了一个参数,clear:both; ,这个参数的意思是说,我不跟上面那两个家伙一样,我不并排排列的,我按原来从上到下的顺序排列,所以就不会出问题。

里面的参数大家可以自己按喜好修改试试,长方形内的内容更是可以随便修改,把我们刚才说的图片放上去也可以。

下一篇详细讲解DIV的细节,毕竟CSS还没出现呢。

现在选学php的一百多人了,asp的才几十个,想学asp的加油啦。

相关推荐

ETCD 故障恢复(etc常见故障)

概述Kubernetes集群外部ETCD节点故障,导致kube-apiserver无法启动。...

在Ubuntu 16.04 LTS服务器上安装FreeRADIUS和Daloradius的方法

FreeRADIUS为AAARadiusLinux下开源解决方案,DaloRadius为图形化web管理工具。...

如何排查服务器被黑客入侵的迹象(黑客 抓取服务器数据)

---排查服务器是否被黑客入侵需要系统性地检查多个关键点,以下是一份详细的排查指南,包含具体命令、工具和应对策略:---###**一、快速初步检查**####1.**检查异常登录记录**...

使用 Fail Ban 日志分析 SSH 攻击行为

通过分析`fail2ban`日志可以识别和应对SSH暴力破解等攻击行为。以下是详细的操作流程和关键分析方法:---###**一、Fail2ban日志位置**Fail2ban的日志路径因系统配置...

《5 个实用技巧,提升你的服务器安全性,避免被黑客盯上!》

服务器的安全性至关重要,特别是在如今网络攻击频繁的情况下。如果你的服务器存在漏洞,黑客可能会利用这些漏洞进行攻击,甚至窃取数据。今天我们就来聊聊5个实用技巧,帮助你提升服务器的安全性,让你的系统更...

聊聊Spring AI Alibaba的YuQueDocumentReader

序本文主要研究一下SpringAIAlibaba的YuQueDocumentReaderYuQueDocumentReader...

Mac Docker环境,利用Canal实现MySQL同步ES

Canal的使用使用docker环境安装mysql、canal、elasticsearch,基于binlog利用canal实现mysql的数据同步到elasticsearch中,并在springboo...

RustDesk:开源远程控制工具的技术架构与全场景部署实战

一、开源远程控制领域的革新者1.1行业痛点与解决方案...

长安汽车一代CS75Plus2020款安装高德地图7.5

不用破解原车机,一代CS75Plus2020款,安装车机版高德地图7.5,有红绿灯读秒!废话不多讲,安装步骤如下:一、在拨号状态输入:在电话拨号界面,输入:*#518200#*(进入安卓设置界面,...

Zookeeper使用详解之常见操作篇(zookeeper ui)

一、Zookeeper的数据结构对于ZooKeeper而言,其存储结构类似于文件系统,也是一个树形目录服务,并通过Key-Value键值对的形式进行数据存储。其中,Key由斜线间隔的路径元素构成。对...

zk源码—4.会话的实现原理一(会话层的基本功能是什么)

大纲1.创建会话...

Zookeeper 可观测性最佳实践(zookeeper能够确保)

Zookeeper介绍ZooKeeper是一个开源的分布式协调服务,用于管理和协调分布式系统中的节点。它提供了一种高效、可靠的方式来解决分布式系统中的常见问题,如数据同步、配置管理、命名服务和集群...

服务器密码错误被锁定怎么解决(服务器密码错几次锁)

#服务器密码错误被锁定解决方案当服务器因多次密码错误导致账户被锁定时,可以按照以下步骤进行排查和解决:##一、确认锁定状态###1.检查账户锁定状态(Linux)```bash#查看账户锁定...

zk基础—4.zk实现分布式功能(分布式zk的使用)

大纲1.zk实现数据发布订阅...

《死神魂魄觉醒》卡死问题终极解决方案:从原理到实战的深度解析

在《死神魂魄觉醒》的斩魄刀交锋中,游戏卡死犹如突现的虚圈屏障,阻断玩家与尸魂界的连接。本文将从技术架构、解决方案、预防策略三个维度,深度剖析卡死问题的成因与应对之策,助力玩家突破次元壁障,畅享灵魂共鸣...

取消回复欢迎 发表评论: