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

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

yuyutoo 2025-04-06 00:10 4 浏览 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的加油啦。

相关推荐

刚买的阿里云服务器怎么用(阿里云服务器买完如何使用)

刚买的阿里云服务器怎么用?阿里云服务器在购买之后,需要进行一些操作,比如配置安全组,修改密码,安装软件,导入数据库等。具体如下:1.买了云服务器,第一件事就是重置密码。登录云主机控制台,可以在服务器管...

在阿里云 腾讯云上创建MySQL云数据库只需9步

与自建数据库相比,采用云数据库的优势是减少对数据库的运维任务。云数据库支持MySQL、SQLServer、MongoDB等多种数据库类型。下面看看如何设计高可用的云数据库。...

本地搭建简单的Kubernate实验环境并安装数据库

因为dockerhub的限制,这个工作还是有些麻烦的,在这里把过程分享给大家。由于是本地部署并且用于学习和实验,所以使用minikube1.安装docker最新版本的docker方法见链接:...

阿里云服务器安装宝塔面板教程,配置及错误解决方法全攻略

阿里云服务器安装宝塔面板,虽然教程很多,但估计你都看得云里雾里,不太明白,这也是我写这一批文章要解决的问题,将各种问题和配置方法分享,希望能对您有帮助。本文适合想要做网站的站长、技术爱好者,服务器管理...

Aliyun ecs上安装Mysql(yum mysql安装)

安装环境:阿里云ECS+操作系统ubuntu+mysql我这里直接就使用网上安装,输入如下的指令sudoapt-getinstallmysql-server注意:在安装的过程会要输入两次密码,...

阿里云服务器 centos 8 安装MYSQL

1、环境安装yumsearchlibaioyuminstalllibaioyum-yinstallnumactlyuminstalllibnumayuminstallld...

女人要当心 吃越少毛病越多?孕二月的妈咪营养关注?excel2003?

对身体过瘦的人来说,体内脂肪和蛋白质均供应不足,因此头发频繁脱落,发色也逐渐失去光泽。如果过分节食,头发则缺乏充足的营养补给,其中包括缺少铁的摄入,便会枯黄无泽,最后导致大量脱发。体瘦的女性髋骨骨折发...

新一代福克斯RS正式发布搭2.3T动力四驱

新一代福克斯RS正式发布搭2.3T动力四驱来源:经销商供稿日期:2015-02-20全新一代福克斯RS搭载了一台2.3TEcoBoost四缸涡轮增压发动机,并首次配备了拥有多片离合器的四驱系统。日...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:...

8个前端面试的题目(前端面试题2020及答案 知乎)

一、行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:divph1h2h3h4formul行内元素:abbrispaninputselectCss盒模型:内容,bo...

CSS中清除浮动的几种方法,快来学习一下吧

前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为:html代码css部分代码为:css代码通过上面的图片可以看出,当内部的div设置float后,外部的元素的...

前端兼容性问题总结(前端常见的兼容性问题)

1.如何在IE6及更早浏览器中定义小高度的容器?IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。解决:#test{overflow:hidden;height:1px;fon...

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。1.浮动。2.绝对定位。3.固定定位。一、什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一...

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

现在我们有了个网站index.htm,并且绑定了域名(没有买域名的同学可以继续用空间商送的免费的,一样学),这一篇我们扩充网站index.htm的内容,并且排版。首先说怎么添加图片,在网上随便找个好看...

如何解决div的高自适应问题(css设置div高度自适应)

一、DIV高度自适应(父div高度随子div的高度改变而改变)1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改...

取消回复欢迎 发表评论: