学生个人网页制作代码(自己制作一个网站的步骤)

如果你跟我一样,希望快速制作一个属于自己的个人网站,怎么样才能快速学会并且构建一个自己的网站呢,也许我的经验可以帮助到你。里面有许多是其他更专业的朋友整理的文档,我会一一标明出处。

同时,这篇文章提到的一些理解可能不是那么严谨,参杂比较多的个人的理解方式,希望避开专业的术语,能让大家更好地理解代码。本文可作大纲了解,毕竟代码这东西有太多细节,仅仅通过一篇文章是不能完全讲透彻的。

一、网站在代码中由什么构成?

我们看到的网站都由以下几个基础部分构成:结构,样式,动作。

1-1.首先,结构就是网站的框架,所有网页内容,无论是图片还是文字,其实都是放置在一个个方形的盒子里的。比如:

学生个人网页制作代码(自己制作一个网站的步骤)

这些方形的盒子,在代码里是用标签语言来实现的,也就是HTML。基础的盒子标签比如<div></div>。标签语言一般成对出现.也有少数单个的标签,比如插入图片的标签为<img>。

在个人网站中经常用到的基本的标签有:

<body></body>

<nav></nav>

<div></div>

<ul></ul>

<li></li>

<a></a>

<img>

<p></p>

<span></span>

<button></button>

你只需要认识以上一些标签组合,就可以完成一个简单的个人网站的框架了。

更多标签可以到3cshool这个网站去查看:https://www.w3school.com.cn.1-2.其次,我们要了解盒子模型的排列和嵌套.可以注意到,上面百度网站的图片中,盒子跟盒子的关系除了平行或者竖直排列,就是大盒子嵌套着小盒子.我们设计和制作网站就是把这一个个盒子合理地排列和嵌套。排列关系在代码中很好理解,就是一组标签接着一组标签写下去,基本可以理解为排列的关系:

比如上面的代码中,几组<li></li>标签就是排列的关系。

<nav></nav>,<ul></ul>和几组<li></li>标签就是嵌套的关系.<nav></nav>是最外层的大盒子,<ul></ul>是中间的盒子,<li></li>是被包裹在最里面的盒子。

代码和盒子的对应关系是:红色方框盒子对应<nav></nav>标签,紫色方框盒子对应<ul></ul>标签,蓝色方框盒子对应<li></li>标签。

1-3.对标签进行分类,可分为内联元素和块级元素。内联元素和块级元素有不同的默认样式,分清楚内联元素和块级元素的区别,有助于我们更灵活地安排页面结构:

a.下表列出了内联元素和块级元素的主要区别

html中内联元素和块级元素的区别块级元素行内元素独占一行,默认情况下,其宽度自动填满其父元素宽度相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化可以设置width,height属性行内元素设置width,height属性无效可以设置margin和padding属性行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。对应于display:block对应于display:inline;

b.块级元素主要有

<div>定义文档中的分区或节

<dl>定义列表

<dt>定义列表中的项目

<form>创建表单元素

<h1><h2><h3><h4><h5><h6>标题元素

<hr>水平线

<li>定义列表项目

<ol>有序列表

<ul>无序列表

<p>定义段落

<table>定义表格

<td>表格中的标准单元格

<tr>表格中的行

c.内联元素有

<a>可定义锚以及超链接

<b>字体加粗

<big>大号字体加粗

<br>换行

<em>定义为强调的内容

<i>斜体文本效果

<img>向网页中嵌入一张图像

<input>输入框

<select>定义单选或者多选菜单

<span>组合文档中的行内元素

<var>定义变量

其中,<input>和<img>都是行内元素,但是它们是可以设置宽和高的。

注:以上关于内联元素和块级元素的区别出自CSDN“区块小白龙”的博客

https://blog.csdn.net/xuanfuhuo4769/article/details/81326457

里面还有关于可替换元素和不可替换元素的说明。但最重要的还是先弄清楚内联元素和块级元素。

如果你记不清哪个是内联元素,哪个是块级元素,不知道这个标签可不可以定义宽高,你可以先给这个元素写一个背景颜色,然后定义宽高,刷新一下,看看有没有起作用。

怎么让一组样式显示在相应的结构中?有了标签框架,就要有相应的样式去描述这个方形的盒子,颜色,外边框,里面的字体,字体的颜色,位置是靠左还是靠右等等。在了解样式之前,我们需要明白,标签是有默认的属性,也就是默认的样式的。有些标签本身没有高度和宽度,如果里面既没有放置其他有宽度和高度的标签,也没有给这个标签定义宽高样式的话,是没有办法直观地看到这个盒子的。这时我们有必要了解css样式。

2.css样式

2-1.选择器

在了解css样式之前,我们要明白,样式和框架之间是怎么链接在一起的。样式和框架其实是通过相同的命名链接在一起的,这个命名方式,在样式表中我们称为“选择器”。在标签也就是在结构中,称之为“命名”。命名方式主要有标签选择器,id选择器和class选择器,当然还有其他很多种选择器,但记住以上三种选择器的使用就足够我们搭建个人网站了。

例如以上的代码中,蓝色方框的为class选择器,橙色方框的为id选择器,所有标签元素,例如<li></li>都可以作为标签选择器。

在css样式表中是这样的

我们留意到,id选择器在样式中的写法是“# id名 {}”,class选择器在样式中的写法是“. 类名 {}”,标签选择器的写法是“标签名 {}””{}”括号里面写样式,以及样式对应的数值。其中id名和类名是我们自己可以随意取的,但是一般都会根据网页结构或者这个结构的功能去命名。且注意他们的区别:id选择器具有唯一性,如果给某个标签命名了id=”menu”,那么这个网页中只能有这一个选择器,而同一个class选择器名称可以用在多处,只要他们的样式是一样的,就可以写同一个class名称。

我常用的命名方式如:nav,firstnav,aboutmebt,secondnav,main,right,left,text,content等等。

常用的命名方式可参考CSDN“C小浩”的博客:

https://blog.csdn.net/chen_haoqiang/article/details/54646380

一般情况下,如果你在前面写了一个样式,比如.menu{width:100px;},后面再写了一个.menu{width:200px;},那最后这个名字对应的结构的宽度是200px;后面的样式会覆盖前面的样式,只要两个名字都是指向同一个标签元素.这涉及到选择器的优先级问题。

附:扩展阅读,选择器的优先级

https://www.jb51.net/css/470518.html.

https://www.runoob.com/w3cnote/css-style-priority.html

怎么让网页动起起来?

3.动作(jQuery/javascript)

要让网页产生交互行为,单靠html和css的力量是有限的,尽管有<a href=””></a>标签之类的标签可以添加超链接,或者css中诸如:hover之类的伪类。需要实现更复杂的动作,需要依靠jQuery/javascript完成个人网站,不需要太多复杂的数据传输,我们只需要用到jQuery就足够了。jQuery可理解为简化版的javascript。

以上提到css的基本结构是“选择器” 样式,jQuery也可以用相同的方法理解,它的基本结构是“选择器” 动作。其中jQuery的“选择器”写法是:$(“div”)或者$(“.content”)$(“#main”)等等,由此可知jQuery的“选择器”就是$(“”),双引号中间可以是css的选择器:$(“css选择器”),这种写法叫做“jQuery 元素选择器”,是jQuery选择器中的一种。

jQuery的更多选择器可参看:

https://www.w3school.com.cn/jQuery/jQuery_selectors.asp

如果是连续的动作,两个动作之间没有因果关系,动作都是针对同一个对象,那就接续写下去,比如$(“元素1”).addClass().removeClass().animate()

关于jQuery的更多详细介绍可参看:

B站视频教程:

https://www.bilibili.com/video/BV1Ep4y1677G

jQuery API 3.5.1 速查表:

https://jquery.cuishifeng.cn/index.html

以上,就是针对“结构(盒子模型概念,div) 样式(css) 动作(jQuery)”这三个分别负责网页的骨骼,样式,动作的三种语言框架的介绍。

二、个人网站中需要的基本结构

导航栏 网页主体是个人网站必不可少的两个大的结构,导航栏又以顶部导航和侧边导航这两种最为常见。

在了解了以上基础知识之后,我们就可以根据热心好友提供的代码去修改自己喜欢的样式。比如:

代码链接:https://www.cnblogs.com/yuer20180726/p/11005545.html

代码链接:https://www.jb51.net/css/379455.html

关键词百度搜索:网页二级导航栏代码

5.断点布局

这里讲到了一个专业名称——断点布局,其实通俗来说就是网页随着浏览器的左右拉伸,改变了显示的宽度,网页随之做一些改变,适应屏幕的大小,以免某些重要的内容被遮盖。作为用户,我们有时可能忽略了这一细节的设计。

具体效果可参看:

http://www.w3cdream.com/content-sort-7-article-577.html

具体代码可以简化为下图:

这里是说:当屏幕宽度小于750px时,使用后面中括号里面的样式,以此类推,第二行意思是,当屏幕宽度大于750px且小于1000px时,使用相应中括号里面的样式。屏幕宽度大于1000px时,使用后面中括号里面的样式。具体的屏幕断点范围可以根据自己的需求进行设置。

相关链接:

关于响应式布局和自适应布局的详细解释

http://caibaojian.com/356.html

4.一些可能会遇到的问题解决方案

4-1.块元素同显示在同一行

在块级元素和内联元素的区别中,已得知<div></div>属于块级元素,独占一行,如果要让box01box02,box03在同一行显示。

方案一:可以在样式表中给这里面的三个元素写float:left;

方案二:给他们的父级元素添加display: flex;

这个做法简单,但是不能跳转到精确的位置,只能跳转到特定的模块,在顶部导航栏浮动在主体内容之上并固定在顶部的时候,跳转到相应模块,会出现顶部导航栏覆盖掉部分模块内容的情况。

这个方法适合侧边导航或者顶部导航不固定在顶部的情况。(2)指定时间滚动到ID为gun的元素,且gun这个类名对应的元素字体颜色变为#2F5DDD:

$(‘.gun’).click(function() {

$(‘html,body’).animate({

scrollTop: $(“.gun”).offset().top – 80

}, 400);

$(this).css(‘color’,’#2F5DDD’);

});

相关链接:

关于offset() 方法的介绍:

http://w3c0.com/jquery/136968

https://www.haorooms.com/post/jquery_offset_xy

关于animate() 方法的介绍:

https://www.w3school.com.cn/jquery/effect_animate.asp

JS如何实现在页面上快速定位(锚点跳转问题):

https://www.jb51.net/article/121107.htm

https://www.jq22.com/webqd4315

4-3.导航栏置顶导致覆盖网页主体部分的问题

可在网页主体之前增加一个块级元素,让它的高度跟导航栏的高度相同。

相关链接:

锚点定位被顶部固定导航栏遮住的解决方案:

https://zhuanlan.zhihu.com/p/127781764

4-4.button:hover不起作用的原因:

写button样式的时候,选择器层级超过两级,就不起作用了。应减少选择器的层级。

注:本页面打开和新页面打开的写法区别。

方案一来自CSDN“菜鸟M”的博客:

https://blog.csdn.net/weixin_43592907/article/details/107606531

方案二:通过input标签,并且赋予input标签的类型是button,如<input type=button οnclick=”window.open(‘连接’)”>4-6.引用外部特殊字体

个人网站设计通常会用到特殊字体,这时要用到@font-face{ font-family: “字体名称”; src:url(“字体在网站文件夹中的位置”) ; }

具体详见:https://www.cnblogs.com/ylh188/p/15002643.html

4-7.css样式单独写在一个外链文件中

样式少的时候,可以把样式写在<style></style>这个标签中,代表样式信息.样式多的时候,单独创建一个文件名为.css的样式文件,再通过<link>标签链接到相应的html文件中。这样所有公用的样式都可以放在一个样式表里面,比如导航的样式需要改动时,只需要改一个样式表就可以。

例如:<link rel=”stylesheet” type=”text/css” href=”theme.css” />

以下是百度知道中关于单独引用样式文件的讨论:

https://zhidao.baidu.com/question/402684981.html

4-8.如何让<ul></ul>标签中li横向排列

在导航栏或者文章列表中经常用到无序列表,无序列表标签组合为<ul><li></li></ul><ul></ul>中的各条目<li></li>默认都是纵向排列的,如果让他们横向排列,只需要给所有<li></li>标签添加float:left;这个样式即可。

相关链接:

用<ul><li>无序列表标签写一个横向导航栏的具体操作参见:

https://blog.csdn.net/leewokan/article/details/6626774

关于无序列表、有序列表、自定义列表

https://blog.csdn.net/qq_41999819/article/details/89501800

4-9.如果引用的图片是svg格式,且图片中包含文字,会涉及不同浏览器中文字显示不同的问题

解决方案是将文字转曲,同时把相应的文字包放到文字文件夹里面。

以上如有错漏,欢迎指正和补充。

发表评论

登录后才能评论