(HTML完结篇)制作一个简单页面(详解)——零基础自学网页制作

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style=\”width:50%;margin:auto;\”>放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中,就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin(外边距)是在CSS布局中经常用到的属性,它指定了该div元素距离四周的距离。使用“auto”值,可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style=\”position:fixed; top:0px;\”>添加到<a style=\”margin: 0px 30px 0px 10px;\” href=\”#chapter1\”>试飞进程</a>之上。

将</div>添加到<a style=\”margin: 0px 30px 0px 0px;\”href=\”#chapter4\”>总体评价</a>之下。

position是css布局中指定位置的属性,“fixed”值是让该div悬停于固定位置。

默认下,该div距离视窗顶端有10px左右的距离,因此为了让它与视窗顶部对齐,添加top:0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说,就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过的小伙伴应该知道,CSS脚本是可以添加在head元素中的。

其中,a:hover中的a指的是所有<a></a>标签。

hover指的是:当鼠标悬停在a上面时的状态

使用:连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先,我们要明确一点,就是,滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条,就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中,控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面,为div规定尺寸,添加style=\”width:610px; height:530px;\”。

这样,就不会超出视窗。但是代码写完后发现并不是,如图:

多出的文字内容超出div范围,右侧滚动条依然存在。

这就要在div的style中再增加一条语句\”overflow-y:scroll;\”

这句话的意思是“overflow-y”(超出最大高度)就显示滚动条(scroll)。而不是让内容超出div的边框。

<div style=\”width:610px; height:530px; overflow-y:scroll;\” >

如图:

因为图片宽度的问题,下方的x轴的scroll也出现了,我们不想看到它,影响美观。

添加“overflow-x:hidden”即可,hidden(隐藏)。

<div style=\”width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;\” >

如图:hidden之后,将无法滚动或拖动画面。

最后,我们要把右侧的scroll也隐藏掉,因为点击鼠标,滚动滚轮就够了,滚动条实在碍眼。

从前面的例子可知,hidden是不行的,有没有别的办法?

那就是在盖div的外部再添加一个div,让这个div的宽度略小于里面div的宽度,小到刚刚挡住滚动条既可以。如图:

这个div这样写即可

<div style=\”margin:30px 0px 0px 0px;width:600px;overflow:hidden;\”>

</div>

同时还要给里面的div添加margin来让它们对齐

<div style=\”margin:30px 0px 0px 0px;width:600px;overflow:hidden;\”>

<div style=\”margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;\” >

<!–省略了p img map 请自行脑补或参考源码–>

</div>

</div>

完整代码:

4.图片区域链接

详见

具体过程请参照演示视频:

视频加载中…

几经周转,我还是坚持将HTML部分的内容写完了。

经过这段时间的实践,我确定的原则是:

第一,事无巨细,有用的话,就要用大白话解释清楚。

第二,不嫌琐碎,尽量把内容堆齐。堆到全看完后能够看懂常见页面代码、具有一定的开发能力。

第三,使用多媒体手段把操作过程演示清楚,什么时候忘了,打开就能看。

第四,控制篇幅,做碎片化学习。

无论怎样,写作本身是一件非常有趣的事,通过互联网还能分享出来也是件快乐的事。

HTML部分结束了。

下一步该筹备CSS部分了。

谢谢大家的支持与陪伴!也感谢自媒体平台免费提供的服务。

内容如有疏漏或错误,欢迎斧正!感激不尽。

使用碎片时间,学习完整知识!关注大鱼师兄,一起精研技艺。

如何做一个网站?建网站需要什么?

无论企业建站还是个人建站,不管你搭建网站的用途是什么,想必大家最在意的就是价钱和质量,那么就会出现建网站多少钱和什么建站系统好的两大问题,当然花少钱搭建一个质量好的网站是建站朋友们的最大心愿。解决这两大问题前我们首先应该要了解建站的整个过程和建站需要什么,接下来就让拥有十年网站建设经验的耐思尼克建站公司为你解答。

建站流程

对于建站而言,注册域名,购买空间,选择程序是建站的三大要素,缺少任一要素网站都不能正常访问。当然,除了这些,还需要域名解析、网站程序的上传安装等操作。

1、注册域名。第一步要做的就是注册一个符合你网站需要的域名,毕竟域名是网站的门牌号,也是网站在网络上的一张名片,于是选择一个好记,有含义的好域名是很有必要的,可以很好的树立自己的网站品牌形象。

2、购买空间。空间就是用来存储网站的网页、数据库等数据的。网站空间有很多种,VPS、虚拟主机、独立服务器等,个人站长选择虚拟主机就行了,既满足需求也降低了成本。另外虚拟主机只需通过图形化的操作界面简单管理即可,而VPS和独立服务器还需要一定的技术,不适合新手站长。

3、选择程序。时下网站程序有很多种,选择哪一种就看你要搭建什么类型的网站而定了,例如有WordPress博客程序、织梦CMS管理系统、Shopex商城程序等等,建站的朋友们不要忽略了这一块的选择哦,因为选择程序是网站建设很重要的一部分,当然你也可以个人独立开发网站程序,网上也有很多现成的。

建站需要什么?

从上文建站过程,我们可以清楚的了解到域名,空间,程序是我们搭建一个网站所必须的。当然有的建站朋友可能还会用到企业邮局、CDN服务、网站设计费用等等,这些不是必须的,可是需要收费的。而有的朋友问到,我会写程序或者我自己有程序可以放到空间里吗?答案肯定是可以的。

建一个网站多少钱?

上面我们了解完建站需要后,对于建站朋友门最在意的价钱问题,这个时候就可以很好的得到解决了,那就是一个域名,一个空间和一套网站制作系统的费用。当然网站制作系统也可以用自助建站系统。

什么建站系统好?

商业建站系统:此类建站系统大多主要针对企业用户开发的,包括企业网站、人才招聘网站、地方性门户、房产家居网站等等,费用大多不菲,但使用这类建站系统至少安全有保障,网站可以根据客户的要求去做,不会像免费模板那样,被人用滥了,让人产生视觉疲劳。商业网站也有缺点,那就是费钱,一切事情都是靠钱说话的,如果你是土豪,好吧,当我没说!

自助建站系统:这类系统是针对中小型企业研发的,傻瓜式建站方式,会打字就会建站,操作便利性强。缺点是功能少,模板单一。不过,像耐思尼克研发的企业自助建站系统的升级版系统,建站宝盒就支持上千套精美的全行业企业模板,支持制作PC站+手机站+微网站+手机APP的企业网站,在线商城,在线下订单,不仅能全网营销,还能进行微营销,十分不错的。如果用户建站成本投入少,不妨一试,费用基本上在300元-1000元之间,而且赠送虚拟主机和主力域名。试用地址:http://www.iisp.com/design/?s=yanan

好了,以上就是今天小编为大家介绍的搭建网站所要花的费用和好的建站系统,如果你还在为建站问题烦恼,不妨可以试用一下建站宝盒自助建站。本文来源耐思尼克,转载请载明文章出处:http://www.iisp.com/ztview/F_yanan05301.html

怎样建立一个网站,教你一招轻松搞定网站自助搭建

零基础自己做网站很简单,选择最简单的方法,通过乔拓云智能建站网,可以免费使用里面的网站模板,不需要自己去租用服务器,也不要懂代码,只要有域名(一般几十块就能购买的到),在乔拓云网,复制一个同行业的模板,编辑logo,网站标题,页面内容,图案,就可以轻松搞定一个网站。一起看下详细的操作吧。

工具、材料:

电脑

乔拓云网

网站模板

制作步骤:

1、在乔拓云网里面有很多的网站模板,涉及的行业超过一百多个,模板,超过一千多个。我们在首页这边,点击【企业网站】可以直接预览模板。乔拓云首页找不到的朋友,可以直接舒服这个地址,直接打开即可。

2、要使用网站里面的模板,我们需要注册账号,点击右上角免费注册完成账号注册,提醒大家,注册的时候,账号名称,企业名称这些可以按自己的喜好,输入字母或者文字,能记得住的就行。所以个人注册的时候,不用担心自己没有企业名称而放弃体验。

3、有了账号就可以登录到产品中心,在【企业网站】卡片这边,点击【去管理】,就可以进入网站后台管理。新建网站,决定你要创建的是电脑还是手机网站,点击【去设计】。

4、挑选模板,开始编辑模板页面的内容,图片,文字,都可以直接编辑。跟修改PPT模板差不多。

5、左侧这边有模块、设置、样式等,你可以点击去看看。

6、模块下面有多种多样的空白模块,可以直接添加到网页中,比如,你可以拖拽一个文章列表的模块,将你要展示的文章添加进去。

7、你可以提前在后台管理你的产品、文章等内容,提前把这些网站要用到的内容上传到后台,这样你在前端编辑网页的时候,就更加得心应手。

以上几个步骤,轻松搭建一个网站,感兴趣的老铁们可以自己体验一下,是不是如我所说的那么简单。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。