仅凭我自己的经验写给小白的网页制作全过程

先说一点题外话，目的是为了自己写一个网站，然后帮助一下我的小生意，但是我在弄完网站以后才知道，不是说有个网站就可以在百度上搜索到我的网站，我也在网上游荡了很久，总体上来说我学会的东西并不是很多，基本上是从下面的网站免费学的，所以在这里感谢一下这几个网站，CSDN、mooc、w3school、中国大学MOOC(慕课)。写在这留给我自己做个纪念，并且期望能帮助到跟我一样是小白的伙伴

首先，展示一下我在学习完怎么在网页上写出“hello world”，然后我把我的网页上写下了如下文字，之后一个星期多都没有改，因为那段时间我完全不知道怎么制作一个有哪怕一点点排版的网页，如图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>石河子吉祥开锁</title>
</head>
<h1 align="center">石河子吉祥开锁换锁联系电话0993-2666660</h1>
<h2 align="center">石河子市内开锁换锁、安装指纹锁、维修热水器</h2>
<p align="center">不要问我网页为什么这么烂，我只是不会做网页罢了</p>
<p align="center">维修洗衣机，煤气灶我也行</p><body>
</body>
</html>

在这之后，我在W3C上阅读了HTML标签的文章，大概了解标签的意思，但是也依然不能让我有能力写出一个彩色的网页，而不是黑白的。于是我就想有没有谁在网上发一个手把手教人制作网页的视屏呢?优酷搜了一下，哈哈，还是算了吧，最后我在mooc上找到了我需要的，最基础的课程而且是免费的。在这个网页的课程里，我弄明白了什么是文档流，知道了块的意思，明白了布局的意思，也知道了浮动，学会了用DIV，到现在我也只会用DIV，无论做什么都是DIV，很笨拙。这个网页上的课程质量很高很好。但是遇到问题是没有人解答的，只能自己搜索于是我找到了CSDN真的太多的答案在这里非常棒。

紧接着，之后的一个星期我的网页变成了这样，下面是我网页的代码和CSS样式表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="sogou_site_verification" content="rkzoF585fo"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ksindex.css" rel="stylesheet" type="text/css" />
<title>石河子吉祥开锁</title>
<meta name="location" content="province=新疆 ； city= 石河子" />
<meta name="description" content="石河子开锁，石河子开锁公司，石河子吉祥开锁，石河子王师傅开锁，石河子最快开锁热线0993-2666660，石河子安装指纹锁" />
<meta name="keywords" content="石河子开锁，石河子开锁公司，石河子吉祥开锁，石河子王师傅开锁，石河子指纹密码锁" />
<meta name="baidu-site-verification" content="dOLrUTxhkh" />
<meta name="format-detection" content="telephone=09932666660" />
<meta http-equiv="x-rim-auto-match" content="none" />
</head><body>
<div class="topinfor">
<span>欢迎来到石河子吉祥260开锁公司官方网站</span>
<div class="clear"></div>
</div>
<div class="top"><img src="sucai/smallrepairman.jpg" alt="logo" /><h1 align="center"> 石河子吉祥260开锁</h1><h2><a href="tel:0993-2666660"> <span class="kaisuotell"> 点击拨打<br/>服务电话：0993-2666660  </span></a> </h2><div class="clear"></div>
</div>
<div class="nav"><ul class="dhwz"><li><a href="https://shz260.com/"><span>首页</span></a></li><li><a href="https://shz260.com/secondarypage/about.html"><span>关于我们</span></a></li><li><a href="https://shz260.com/secondarypage/services.html"><span>服务项目</span></a></li><li><a href="https://shz260.com/secondarypage/lockabout.html"><span>开锁知识</span></a></li><li><a href="https://shz260.com/secondarypage/qualifications.html"><span>资质证明</span></a></li><li><a href="https://shz260.com/secondarypage/ksxz.html"><span>开锁须知</span></a></li><li><a href="https://shz260.com/secondarypage/servicesarea.html"><span>服务范围</span></a></li><li><a href="https://shz260.com/secondarypage/callus.html"><span>联系我们</span></a></li></ul> <div class="clear"></div>
</div><!--nav结束--><div class="main"><div class="lab1"><ul><li><a href="article/ks03.html">1、石河子开锁</a></li><li><a href="article/ks03.html">2、石河子换锁</a></li><li>3、维修热水器</li></ul></div><!--lab1结束--><div class="photo1"><ul><a href="article/ks03.html"><img border="0" src="sucai/jiesuo.jpg" alt="石河子开锁" /></a><a href="article/ks03.html"><img border="0" src="sucai/suoxin.jpg" alt="石河子换锁" /></a><img src="sucai/gasheater.jpg" alt="石河子热水器维修" /></ul></div><!--photo1结束--><div class="lab2"><ul><li>4、洗衣机维修</li><li>5、清洗地暖</li><li>6、煤气灶维修</li></ul></div><!--lab2结束--><div class="photo2"><ul><img src="sucai/washingmachine.jpg" alt="石河子洗衣机维修"  /><img src="sucai/floorheating.jpg" alt="石河子清洗地暖" /><img src="sucai/gasstove.jpg" alt="石河子煤气灶维修" /></ul></div><!--photo2结束--><div class="lioucheng"><ul><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务流程</li><li><a href="tel:0993-2666660"><img src="sucai/开锁电话.jpg" alt="石河子开锁公司电话"  width="65px" height="64px" />拨打服务电话</a></li><li><img src="sucai/约定上门时间.jpg" alt="石河子上门换锁" width="65px" height="65px"  />约定时间</li><li><img src="sucai/上门服务原图.jpg" alt="石河子市上门维修" width="65px" height="65px"  />按时上门维修</li></ul></div><!--流程结束--><div class="news1"><div class="news_title"><div class="news_tiitle_left"><h2 class="tiitle_left">锁具相关</h2><a href="https://shz260.com/secondarypage/lockabout.html"><span class="title_right">More&gt;&gt;</span></a></div><!--news_tiitle_left结束--><div class="news_title_right"></div><!--news_title_right结束--> </div><!--news_title结束--><div class="pic_news"><img src="sucai/石河子开锁电话.jpg" alt="石河子开锁公司电话" height="80px"/> <h2><a href="article/ks03.html" title="石河子吉祥260开锁换锁">石河子吉祥开锁换锁<br />更换防盗门门把手<br />冬季门防风减震框密封条</a></h2></div><!--pic_news结束--><div class="news_list"><ul><li><a href="article/ks01.html" title="石河子开锁-锁芯要如何保养">石河子开锁-锁芯要如何保养</a></li><li><a href="article/ks02.html" title="石河子吉祥开锁">锁具防盗及等级的认识</a></li><li><a href="article/ks06.html" title="石河子开锁公司电话">石河子常见入室盗窃常见九种手段</a></li><li><a href="article/ks07.html" title="石河子上门换锁电话">锁具按结构可划分的几种形式</a></li><li><a href="article/ks04.html" title="石河子开锁电话">宠物自己开门溜出去玩的处理方法</a></li><li><a href="article/trunklock.html" title="石河子行李箱密码锁">行李箱密码锁忘记密码打开方式</a></li><li><a href="article/mycarslock.html" title="单钩开宝骏310W车锁">单钩开宝骏310W车锁</a></li></ul></div><!--news_list结束--></div><!--news1结束--><div class="news2"><div class="news_title"><div class="news_tiitle_left"><h2 class="tiitle_left">家电维修相关</h2><a href="secondarypage/repairabout.html"><span class="title_right">More&gt;&gt;</span></a></div><!--news_tiitle_left结束--><div class="news_title_right"></div><!--news_title_right结束--> </div><!--news_title结束--><div class="pic_news"><img src="sucai/repairheater/上门维修不带电话号码.jpg" alt="石河子热水器维修电话"  height="80px"/> <h2><a href="">石河子热水器维修<br />石河子煤气灶维修<br />石河子洗衣机维修</a></h2></div><!--pic_news结束--><div class="news_list"><ul><li><a href="article/wx03.html" title="石河子王师傅热水器维修">华帝热水器漏水铜管补漏</a></li><li><a href="article/wx01.html" title="石河子吉祥热水器维修">石河子热水器日常使用常识</a></li><li><a href="article/wx02.html" title="石河子上门维修热水器">恒温热水器故障代码大全</a></li><li><a href="article/watergas.html" title="石河子维修热水器电话">燃气热水器水汽联动开关漏水维修方法</a></li><li><a href="article/twokindofheater.html">热水器的分类</a></li><li><a href="article/washingmachine/waterlevel.html">洗衣机脱水脱不干</a></li><li><a href="article/2k2clight.html">家庭双开双控照明电路</a></li></ul></div><!--news_list结束--><div class="clear"></div></div><!--news2结束--><div class="clear"></div>
</div><!--main结束--><div class="foot"><p class="link" >友情链接:<a href="https://blog.csdn.net" title="CSDN" rel="nofollow" target="_blank">CSDN</a><a href="https://www.imooc.com/" title="慕课网" rel="nofollow" target="_blank">慕课网</a><a href="http://www.freebuf.com/" title="freebuf" rel="nofollow" target="_blank">freebuf</a><a href="http://www.w3school.com.cn/" title="w3cschool" rel="nofollow" target="_blank">w3cschool</a><a href="https://www.thinkcss.com/" title="thinkcss" rel="nofollow" target="_blank">thinkcss</a><a href="http://www.079318.com/"  rel="nofollow" target="_blank">神马电影网</a><a href="http://www.v0r.cn/"  rel="nofollow" target="_blank">裤兜手赚网</a></p><!--友情链接 --><div class="clear"></div>
</div><!--foot结束--><div class="foot_box"><div class="footbb"><div class="foot_box1"><h3><a href="https://shz260.com/secondarypage/about.html">关于我们</a></h3></div><div class="foot_box1"><h3><a href="secondarypage/services.html">服务项目</a></h3><a>防盗门</a><br /><a>保险柜</a><br /><a>热水器</a><br /><a>煤气灶</a><br /><a>清洗地暖</a><a></a><a></a></div><div class="foot_box1"><h3><a href="secondarypage/lockabout.html">开锁知识</a></h3></div><div class="foot_box1"><h3><a href="https://shz260.com/secondarypage/qualifications.html">资质证明</a></h3></div><div class="foot_box1"><h3><a href="https://shz260.com/secondarypage/callus.html">联系我们</a></h3><br /><p>石河子吉祥开锁公司<br />24小时服务电话：0993-2666660<br />地址：石河子21小区小车排</p></div><div class="clear"></div></div><!--footbb边框结束-->
</div><!--foot_box结束--></body>
</html>

/* CSS Document */* {margin:0;padding:0;
}.a {text-decoration:none;}
.topinfor{
width:100%;
height:20px;
min-width:1000px;
background-color:#009900;
color:#FFFFFF;
}
.topinfor span{
margin-left:30px;}
.top{
width:100%;
min-width:1000px;
background-color:#CCCCCC;
height:100px;
}
.top img {
position:absolute;
left:30px;}
.top h2 a{
text-decoration:none;
}
.kaisuotell{
display:block;
margin-bottom:10px;
line-height:24px;
float:right;
margin-right:30px;
}
.main{
width:1000px;
margin:0 auto;
padding:0;
}
.nav{
width:100%;
min-width:1000px;
height:60px;
background-color:#009900;}
.dhwz{
width:1000px;
margin:0 auto;
padding:0;
}
.dhwz li {
background:url(../sucai/navBg.gif) no-repeat right;
display:block;
list-style:none;
float:left;
width:120px;
height:60px;
font-size:18px;
font-family:"微软雅黑";
line-height:60px;
color:#FFFFFF;
text-align:center;
}
.nav ul li a{
text-decoration:none;
color:#FFFFFF;
}
.nav ul li:hover{background-image:url(../sucai/navs.gif);height:60px;}.lab1,.lab2{
height:40px;}.photo1 ul img{
margin:0;
padding:0;
width:330px;
height:333px;
display:inline;
text-align:right;
}.lab2 ul li,.lab1 ul li{
display:block;
text-decoration:none;
margin:0;
padding:0;
float:left;
text-align:center;
width:333px;
line-height:40px;
font-size:36px;
font-family:"微软雅黑";
}.photo2 ul{
top:0px;
left:0px;
height:340px;
width:1000px;}
.photo2 ul img{
width:33%;
height:333px;
margin:0;
padding:0;
text-align:center;
top:500px;
left:0px;
display:inline;}.lioucheng {
height:100px;
border:2px #E8E8E8 solid;
margin-top:10px;
}.news1,.news2{
width:496px;
height:350px;
border:2px #A4A7AA solid;
display:inline;
margin-top:10px;
float:left;
}.lioucheng ul li {
text-decoration:none;
display:block;
margin:0;
padding:0;
width:249px;
height:100px;
float:left;
line-height:100px;
font-family:"微软雅黑";
font-size:24px;}
.LC{
width:100px;}
.LCtell{
width:400PX;}
.lioucheng ul li img{
vertical-align:middle;}.news_title{height:35px;border-bottom:2px solid #E8E8E8;}
.tiitle_left{
width:70%;
font-family:"微软雅黑";
font-size:24px;
font-weight:bold;
color:#786f66;
float:left;
line-height:35px;
padding-left:20px;
}
.title_right{
width:20%;
float:right;
line-height:35px;
}
.pic_news{
height:80px;
margin-top:10px;}
.pic_news img{
float:left;
margin:0 5px;}
.news_list{
margin-top:20px;
}
.news_list ul li{
list-style:none;
text-decoration:none;
margin:8px;
background:url(../sucai/list.jpg) no-repeat;
padding-left:10px;
border-bottom:1px dotted #ccc;
}.foot{
width:100%;
min-width:1000px;
float:left;
margin-top:10px;
}
.link{
padding-left:30px;
}.foot_box{
min-width:1000px;
width:100%;
background-color:#009900;
}
.footbb{
width:1000px;
margin:0 auto;}
.foot_box1{
float:left;
margin:0 auto;
height:150px;
width:200px;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
.foot_box1 a{ text-decoration:none; color:#FFFFFF;}
.clear{ clear:both;}

罗里吧嗦的，写的也没有条理，大概的意思就是我会写网页了，虽然还是很小白，但是在这里希望觉得自己小白的伙伴可以自己动手试一试，感觉真的不错。

后记于 2019/3/10

在上面的网页制作之后，我想让我的网页变成响应式的网页，所以学习了bootstrap，然后制作了简单的响应式网页。由于写文章这会儿比较累，所以就记在这篇文章下面，如果有和我一样的小白同学想看现在的网页就点链接石河子开锁（我靠开锁养活自己，前面也说过，也是我作网页的原因）自己看吧，网页的源码F12可以直接看，非常简单。

在我的网页变成响应式后，百度排名的效果就非常好了，百度应该是比较喜欢移动端的网页。

另外现在移动端的搜索量/PC+移动端的量大概是56%，所以所有的搜索引擎都应该是重视移动端的。百度移动端搜索占据搜索引擎市场的74%多，神马搜索20%多，搜狗，360都是个位数，所以百度还是大哥。

想要排名靠前，还是要写一点有用的东西。这段时间就这些要记录的吧。另外，如果网页再次更新，我会把我自己网页的代码和截图放到这里，记录一下的。就这样吧00：27了有点瞌睡了，昨晚开了一个锁凌晨4点才睡的，拜拜

学习很重要，继续努力

仅凭我自己的经验写给小白的网页制作全过程相关推荐

根据自己平时的经验写的针对SQLSERVER操作的通用类库
根据自己平时的经验写的针对SQLSERVER操作的通用类库 1using System; 2using System.Data; 3using System.Data.SqlClient; ...
和cnn结合_写给小白的R-CNN介绍
在上一篇写给小白的YOLO介绍中,我介绍了目标检测的任务类型和YOLO的基本方法. 实际上,R-CNN是比YOLO更早的方法,但是因为它对后面的许多目标检测方法都有指导意义,所以我们还是介绍一下. 下 ...
手把手教你写DI_3_小白徒手支持 Singleton 和 Scoped 生命周期
在上一节:手把手教你写DI_2_小白徒手撸构造函数注入浑身绷带的小白同学:我们继续开展我们的工作,大家都知道 Singleton是什么,就是全局只有一个呗,我们就先从它开始,这个多简单,我们找个字典 ...
python小白从哪来开始-写给小白的工程师入门 - 从 Python 开始
题图:pexels 这是我面向小白写的 Python 编程教程的第一篇.周三已经抓勺子同学上完了这节课,得到了很多珍贵反馈,于是我把讲义初版又修改了一遍,放到⌈影子练习SinanTalk⌋上来. 原本 ...
用bootstrap写一个简洁的网页
在最近两周,我学习了bootstrap前端开发框架来快速制作一个网页,以往自己用html,css等学习的网页知识来写一个网页,往往需要挺长的时间.这次用bootstrap写的这个demo前后大概用了2 ...
html怎么写分享代码,怎么写一个文件分享网页？百度一键分享按钮HTML代码
怎么写一个文件分享网页?首先一个基本的网页包含主要的哪些就不说了,下面直接上关键的代码即可,把他放到需要的地方即可.下面一起来看看吧. 百度一键分享按钮HTML代码下面是需要加分享按钮的css代码 ...
html中写meta会乱码,网页html代码不可缺少的5个meta标签属性
网页html代码中,meta标签是个非常重要的标签,meta标签可以包含很多属性,而其中有5个是不可缺少的. meta标签属性 1.title title其实不算是meta标签的属性,其本身就是一个标 ...
小白也能重装系统？写给小白的一封信--重装纯净版Win10系统
电脑卡顿了?电脑老是死机?想换个新系统玩玩?来吧,重装系统把! 以往重装系统通过某些软件,老毛桃,番茄,大白菜等等用这些软件装系统往往不够纯净会有一些插件什么的,或是下载镜像,通过软件Ultraiso ...
html5文字中加图片,5、手写HTML语言代码之《在文字中加条横线、插入图片》学习网页制作的心得体会...
千里之堤始于足下!! 学习网页制作的心得体会5.........手写HTML语言代码之<在文字中加条横线.插入图片> 一.运用给网页加条横线在以下"教师自制教学软件的背景&q ...

仅凭我自己的经验写给小白的网页制作全过程

仅凭我自己的经验写给小白的网页制作全过程相关推荐

最新文章

热门文章