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

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

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

相关推荐

深度解读Spring框架的核心原理

深度解读Spring框架的核心原理在Java开发的世界里,提到Spring框架,就像提起一位久经沙场的老将,它几乎成了企业级应用开发的代名词。那么,这个被无数开发者膜拜的框架究竟有何独特之处?今天,我...

「Spring认证」Spring 框架概述

Spring是最流行的企业Java应用程序开发框架。全球数以百万计的开发人员使用SpringFramework来创建高性能、易于测试和可重用的代码。Spring框架是一个开源的Java...

学习Spring框架 这一篇就够了

1.spring概述1.1Spring是什么(理解)...

Spring框架双核解析:IOC与AOP的本质与实战

#Spring核心#IOC容器#AOP编程#Java框架设计...

Spring Boot与传统Spring框架的对比:探索Java开发的新境界

SpringBoot与传统Spring框架的对比:探索Java开发的新境界在Java生态系统中,Spring框架无疑是一个里程碑式的存在。从最初的简单依赖注入容器,到如今覆盖企业级开发方方面面的庞大...

Spring MVC框架源码深度剖析:从入门到精通

SpringMVC框架源码深度剖析:从入门到精通SpringMVC框架简介SpringMVC作为Spring框架的一部分,为构建Web应用程序提供了强大且灵活的支持。它遵循MVC(Model-V...

Spring框架入门

一.spring是什么?Spring是分层...

程序员必知必会技能之Spring框架基础——面向切面编程!

面向切面编程AOP(AspectOrientedProgramming)与OOP(ObjectOrientedProgramming,面向对象编程)相辅相成。AOP提供了与OOP不同的抽象软件结...

Spring Security安全框架深度解读:为你的应用穿上“钢铁铠甲”

SpringSecurity安全框架深度解读:为你的应用穿上“钢铁铠甲”在现代网络世界里,保护我们的应用程序免受各种威胁攻击至关重要。而在这个过程中,SpringSecurity框架无疑是我们最可...

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用

Spring框架的设计哲学与实现:打造轻量级的企业级Java应用Spring框架自2003年诞生以来,已成为企业级Java应用开发的代名词。它不仅仅是一个框架,更是一种设计理念和哲学的体现。本文将带你...

Spring框架深度解析:从核心原理到底层实现的全方位避坑指南

一、Spring框架核心概念解析1.控制反转(IoC)与依赖注入(DI)Spring的核心思想是通过IoC容器管理对象的生命周期和依赖关系。传统开发中,对象通过new主动创建依赖对象,导致高耦合;而S...

Java框架 —— Spring简介

简介一般来说,Spring指的是SpringFramework,它提供了很多功能,例如:控制反转(IOC)、依赖注入...

Spring 框架概述,模块划分

Spring框架以控制反转(InversionofControl,IoC)和面向切面编程(Aspect-OrientedProgramming,AOP)为核心,旨在简化企业级应用开发,使开发者...

spring框架怎么实现依赖注入?

依赖注入的作用就是在使用Spring框架创建对象时,动态的将其所依赖的对象注入到Bean组件中,其实现方式通常有两种,一种是属性setter方法注入,另一种是构造方法注入。具体介绍如下:●属性set...

Spring框架详解

  Spring是一种开放源码框架,旨在解决企业应用程序开发的复杂性。一个主要优点就是它的分层体系结构,层次结构让你可以选择要用的组件,同时也为J2EE应用程序开发提供了集成框架。  Spring特征...

取消回复欢迎 发表评论: