简单制作html静态网页代码
作者:80网站模板发布时间:2021-04-17浏览量:23
精选企业建站模板,pb建站教程以及各类手机网站模板下载和企业网站模板分享,PbootCMS模板下载提供优质网站模板源码,仿站业务PbootCMS个人博客模板,PbootCMS企业建站,PbootCMS导航模板等

之前讲了html和css的相关知识,也该是时候动手搭建一些简单的静态网页了。这一篇博客主要除了分享怎么搭建,更多是是想分享一些需要注意的小细节以及一些实用的技巧。


正文

1.先来看看成果


这个资源我上传好了,这是链接

里面jquery相关的翻页样式实现一起都放在里面了


2.搭建静态网页基本步骤

找到一个能够参考的网页模板,收集需要的素材

考虑规划好分区布局

先搭好html各个部分的大致框架,再去写css样式(搭一点写一点的那种)

将经常用到的css样式单独存放,方便引入其他html

耐心+细心

3.一些技巧和注意事项

1.讲讲在jetbrains系列软件中写html、css的操作

不管是IDEA还是pycharm或者是webstorm……,写的时候都要会使用TAB键,这个真的太省事了。

比如


<div id="div1"></div>

1

我们只需要输入div#div1然后按TAB键就行了,就和之前css讲的一样,class就用.。当然写css的时候更方便


height:20px;

1

我们只需要输入h20然后按TAB键就行了,更多的自己去尝试一下就知道啦。

列表的创建:ul>li*n然后TAB,n是需要的列表数

重复需要复制的时候用ctrl+d


2.常用的css样式

当我们需要块元素同一行显示的时候,通常使用浮动,但是这个时候父元素千万要有高度,或者就写上overflow:hidden;

学会用margin和padding去调节位置

margin:0 auto;块元素水平居中,这个千万要记住哈哈哈

:first-child、:last-child、 :nth-child(xn)的使用,这些一般是用于选择列表的第几个li做单独设置,:nth-child(xn)中x是数字,n会依次递增知道列表末尾,比如3n就是3,6,9……

面包屑导航,如下图



3.素材和注意事项

有的时候我们不用重复造轮子就可以借用网上有的素材,比如


就是去找网上的jquery直接下载搬进来的。


需要注意的地方:如果你写到哪里发现效果和你想象的不一样,或者哪里突然消失不见了,好好看看是不是哪里的px没加!!!一开始最容易发生的就是这个错误;然后就是注意css的划分,把常用的样式放在一起,多个页面涉及到的样式放在一起,这样能多次利用少写很多代码


结尾

相关的文件我已经上传了,正在审核,过几天我把资源链接贴上来。写这个网站大概花了四个多小时,对刚开始学html和css应该很有帮助。因为等下还有个事,所以这篇博客比较精简。


文章标签:html    网站    静态    模板    建站   
关 键  词:制作html静态网页代码,网站模板免费下载, html网页制作源码,用html和css做网页完整代码
本文网址:http://www.80oo.cn/jishu/375.html如有转载请注明来源!
最新模板
(自适应手机版)净水设备类pbootcms网站模板

编号:x084     价格:50
(自适应手机版)站长导航类网站pb网站模板下载

编号:x085     价格:100
(手机版)蓝色通用企业wap手机网站源码

编号:x083     价格:50
建站知识
2021
06-01
网站语言需要配合一定的规则,大家在使用网站模板的时候,都需要提前知道网站的语言是什么,有助于使用这套模板,大家在看到别人网站的时候,不知道别人的网站是什么语言开发的,也想要做同样的网站的时候,教大家怎样看网站用什么语言开发的1. 根据 meta 信息判断不少的网站会在 meta 添加框架的信息,比如 Joomla、XOOPS、
2021
06-01
很多站长在建站的时候喜欢在底部加入网站运行时间统计,显得逼格特别上档次,今天技术小编就分享下,一个购买网站模板的用户,寻求这样一个代码加上运行时间代码。查看了网站底部模板代码插入的网上很多教程,貌似都只能精确到天,今天我们麦模板技术小编分享的代码是运行时间精确到年月日时分秒。网站底部模板运行时间代码
2021
05-13
如今建站是件很简单的事情,任何人都可以在不了解Web开发,设计或编码的情况下建立和设计网站。无论您是想为自己还是为企业创建网站,都可以使用正确的工具和资源轻松地做到这一点。本分步指南将帮助您从头开始创建网站,而无需花钱给自由职业者,代理商或网站建设者。您只需要1-2小时的空闲时间即可完成指南并建立网站。建
2021
05-11
一个网站的框架是跟搜索引擎蜘蛛抓取收录有关的。网站设计工作的内容 网站主页设计而大部分客户登录网站先浏览的便是主页。在网站设计时,首页布局不光仅仅是思考到美观方面,关键的问题是符合网站的营销策略,所以设计网站主页的工作量占据多半以上的时间。设计网站主页的工作量占据多半以上在设计网站之
服务热线