当前位置:首页 > 网站建设 > 正文内容

html个人主页网页设计代码两个页面(设计一个html页面)

网站建设2年前 (2023-01-08)1746

今天给各位分享html个人主页网页设计代码两个页面的知识,其中也会对设计一个html页面进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

用html制作一个个人网页要求有五个链接,每页都有css格式

方法/步骤

1

CSS是由选择器加声明组成的。

比如:

h1{color:red;}

h1就是选择器,意思是只要遇到h1,就使用该CSS的规则

color:red; :这个事声明

color:这个是属性

red:这个是值

2

OK,我们先来分析选择器。

END

一.选择器

1

选择器的种类很多,各有各的作用。我们来一一讲解。

标签选择器

class选择器

id选择器

全局选择器

组合选择器

伪类选择器

2

标签选择器

顾名思义,HTML中有许多标签,而标签选择器就是用来给标签直接申明样式的,简单、实用、常用。

举例:

p{color:red;}

只要是p标签,其P标签内部的颜色,都是红色。

如图代码

headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestylep{ color:red;}/style/headbodyp嘿嘿哦嘿嘿呀哦嘿嘿哦/p/body

其中,style标签是样式标签,请将CSS放在其中

(这部分内容后续会介绍,这里只是先提一下)

3

看网页效果

4

class选择器

也叫做类选择器,直接说概念估计你也不明白,直接上例子吧。

举例:

.alsp{color:red;}

这就是一个class选择器,意思是有一种CSS的样式,其名字是alsp,谁想用谁用。

看代码:

headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题文档/titlestyle type="text/css".alsp{color:red;}/style/headbodyp class="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/pol class="alsp"li嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡,死不投降/p/body

5

看网页效果

通过.alsp定义一个class选择器。

在后面的代码中,哪个标签想用,就用class="alsp"去调用,就可以使用这件“衣服”来修饰自己了

6

ID选择器

ID和class很像,但是和class有一个区别。class像姓名,两个人是可以同名的,但是id像身份证,只有一个人可以使用。

例如:

#alsp{color:red;}

OK,上代码:

#alsp{color:red;}/style/headbodyp id="alsp"嘿嘿哦嘿嘿呀哦嘿嘿哦/polli嘿啥嘿/lili我想嘿嘿/lili专制各种不服/li/olp世界为亡,死不投降/p/body

7

看网页效果

只能有一个标签使用该id,或者说该标签专属ID

8

全局选择器

*{margin:0; padding:0;}

这个很简单,前面用个*来表示,整个网页都会使用。这句话也是网页基本都要添加的,什么意思呢?自己试试看吧。

9

组合选择器

组合选择,小编是非常喜欢使用的,原因无他,懒而已。他可以减少代码量,并且方便、易读。

不过组合选择器的组合方式比较多,但也多很好理解。

1)群模式

比如:

h1{color:red; font-size:14px;}

p{color:red; font-size:14px;}

a{color:red; font-size:14px;}

这三个虽然标签不同,但是样式是一模一样的,所以,可以这样写:

h1,p,a,{color:red; font-size:14px;}

2)继承模式

比如:

.alsp li{color:red;}

ul class=".alsp"

lifdf/li

/ul

li是在ul之中的,算是ul的后代。通过.alsp li确定li是属于调用alsp类选择器里的li标签,其他的li标签并不会使用该样式。

3)群模式(多元素并列选择器)

其实也是一种特殊的群模式

p.alsp{color:red;}

p class="alsp"p.alsp/p

a class="alsp"a.alsp/p

alsp仍然是一种class选择器,但是他只有在p的标签下被使用才生效。

所以,第一行生效,p.alsp字样变红,第二行不生效

10

伪类选择器

“伪”字暴露了他的本质,伪类选择器并不像其他选择器直接做用在标签上,但是他偏偏又是在标签上进行使用,所以称为“伪类选择器”。

伪类的作用,是作用在状态上。

一般情况正常运行,只有当达成条件的时候触发,才会执行伪类选择器所代表是css样式。

伪类选择器很多,但许多都是我们这辈子估计都用不到的。

OK,伪类选择器后续我会专门写一篇经验介绍,有点小多,这里也就不多说了。

END

二.在HTML中调用CSS

调用CSS的常用方法有3中

内样式

外样式

行间样式

内样式

直接看代码,如图所示

在head/head中,加入style/style,并将相关的CSS样式放在其中

外样式

直接看代码,如图所示:

link rel="stylesheet" type="text/css" href="index.css"

这里,href为css的路径。

意思是,你专门创建一个index.css的文件,里面放上CSS样式,和内样式的语法一模一样,只是专门找了一个文件存放而已。

4

行间样式

行间样式直接写在元素里面

例如:p style="color:#900"嘿嘿哦嘿嘿呀哦嘿嘿哦/p

直接在标签后面加上style

一般不要用,不过可以用来调试使用

学生个人网页制作html代码是什么?

网页的源代码称为HTML代码。

可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“心急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。

由于所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。

一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站。

我需要一个网页的设计代码,HTML网页设计,设计一个网页,一个完整的源代码

htmlheadtitle帅哥的个人主页/title/headbody我是XXX,男,XX年X月X日出生,XX省XX市人,长得很帅!br李嘉诚理财名言:世界上并非每一件事情,都是金钱可以解决的,但是确实有很多事情需要金钱才能解决。 /body/html

把上面的代码用记事本存为index.html文件打开就行。

怎么样,这个够简单了吧。纯手工书写。

如需更好的,可以说明具体要求。

关于html个人主页网页设计代码两个页面和设计一个html页面的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://hon-tex.cn/post/2950.html

分享给朋友:

“html个人主页网页设计代码两个页面(设计一个html页面)” 的相关文章

包含衡水网站建设的词条

包含衡水网站建设的词条

今天给各位分享衡水网站建设的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、衡水网站建设报价高低不等,企业该选择多少钱的 2、衡水门户网站,衡水电子商务类网站建设哪家好 3、衡水网站建设,找哪家公司比较好 4、衡水星河网络科技有限...

网站seo诊断(网站seo诊断的好坏)

网站seo诊断(网站seo诊断的好坏)

今天给各位分享网站seo诊断的知识,其中也会对网站seo诊断的好坏进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、如何对网站进行全面SEO诊断 2、网站seo要诊断哪些内容呢 3、如何做SEO网站诊断? 如何对网站进行全面SEO诊断 方案顾名思义包...

企业网站排名优化(企业网站排名优化公司)

企业网站排名优化(企业网站排名优化公司)

今天给各位分享企业网站排名优化的知识,其中也会对企业网站排名优化公司进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、企业网络seo排名优化推广有什么优势? 2、怎么做企业网站的SEO优化 3、seo网站排名优化有什么方法? 4、网站快速优化排名网...

怎么给视频加模板边框(如何给视频加边框)

怎么给视频加模板边框(如何给视频加边框)

今天给各位分享怎么给视频加模板边框的知识,其中也会对如何给视频加边框进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、pr怎么在视频上加个边框 2、拜年视频边框怎么加? 3、怎么给自制视频加边框? 4、手机怎么给视频加黑色椭圆边框 5、怎样制作...

小程序制作一个需要多少钱(小程序制作一个需要多少钱作一个需要多少钱)

小程序制作一个需要多少钱(小程序制作一个需要多少钱作一个需要多少钱)

本篇文章给大家谈谈小程序制作一个需要多少钱,以及小程序制作一个需要多少钱作一个需要多少钱对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、微信小程序开发一个多少钱 2、微信小程序开发多少钱做一个? 3、微信小程序开发一般需要多少钱呢 4、做一个小程序需要多少费用...

短视频脚本制作模板(短视频脚本制作流程)

短视频脚本制作模板(短视频脚本制作流程)

今天给各位分享短视频脚本制作模板的知识,其中也会对短视频脚本制作流程进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、短视频脚本创作 2、短视频脚本范文 3、怎么写视频脚本 4、短视频脚本怎样写模板? 5、短视频脚本该如何撰写?求大神指导一下~...