【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.

最新推荐文章于 2024-07-25 08:14:42 发布

Cui Xiaochun2019

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量8.5k

点赞数 22

分类专栏：学习笔记/整理文章标签： css html html5 css3

本文链接：https://blog.csdn.net/cuizhihong2019/article/details/105704856

版权

学习笔记/整理专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多问题,先记录总结一下.

ps:因为没有老师带,看的网课和W3C以及相关书籍,以下内容肯定有操作错误或描述不当的地方,希望各位看到这篇文章的同学和前辈们能指出错误或者骂我,本人脸皮很厚,会接受并表示感谢.

展示效果

复仇者联盟4

一首歌

乡愁

后妈茶话会

首页

真爱至上

网页说明

创作初衷

突发奇想的想要弄一个英文经典分享的网页,假设我是用户我打开后可以观看视频,收听音频以及查看相应的字幕,是以一个可行的并能巩固所学HTML和CSS理论知识且有趣前提下所进行的.

网页元素

背景图片
音频
视频
超链接
logo以及一些字.

网页布局

在制作过程中我感觉最难的就是网页布局了,我用的是三行三列布局,但在写代码过程中网页布局是出问题最多的地方,例如三列的浮动问题,文本的对齐问题,以及像素问题.

下面是创作网页时的一个小草稿
网页草稿

非常简单,我也是参考W3C和相关课本进行制作但问题该出还是出.

相关代码

以下是相关的代码,因为是个人敲的非常简单,肯定会有纰漏问题和行业规范问题希望大家能提出来我会认真改正,因为有一些课本上没有的知识如果不问我是永远不会知道的.

html代码

<!--经典分享2_首页-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>经典分享</title>
	<link rel="stylesheet" type="text/css" href="../../css/经典分享2/经典分享2.css">
</head>
<body background="../../image/background/粉色.jpg">
	<div id="header" class="">
		<a href="经典分享2_首页.html">
		<img src="../../image/logo/双A.jpg"  width="8%" height="60px" alt="">
		<hr size="3px" width="100%" color="#FF7FED" ></a>

	</div>
	<div id="main" class="" >
		<div class="main_left">
			<div class="main_left_div" ><a href="经典分享2_首页.html" class="a">首页</a></div>
			<div class="main_left_div"><a href="经典分享2_后妈茶话会.html" class="a">后妈茶话会</a></div>
			<div class="main_left_div"><a href="经典分享2_真爱至上.html" class="a">真爱至上</a>
			</div>
			<div class="main_left_div"><a href="经典分享2_老爸老妈浪漫史.html" class="a">老爸老妈浪漫史</a></div>
			<div class="main_left_div"><a href="经典分享2_楚门的世界.html" class="a">楚门的世界</a></div>
			<div class="main_left_div"><a href="经典分享2_复仇者联盟4.html" class="a">复仇者联盟4</a></div>
			<div class="main_left_div"><a href="经典分享2_乡愁.html" class="a">乡愁</a></div>
			<div class="main_left_div" style="border-bottom: double;border-color: #FF7FED" ><a href="经典分享2_一首歌.html" class="a">一首歌</a></div>
			

		</div>
		<div class="main_middle">
			<video width="80%" height="95%" controls="controls">
				<source src="../../视频/MP4/see you again.mp4" type="video/mp4">
			</video>
		</div>
		<div class="main_right">
			<div class="main_right_up">
				<h1 class="header_h1"> 广告位招租 </h1>
				
			</div>
			<hr size="3px" width="100%" color="#FF7FED" >
			<div class="main_right_down">
				<p class="p" ">欢迎来到经典英语片段分享</p>

				<p class="p">这是一个非常简短的网站,左侧导航栏有8个小片段可以观看</p>
				<p class="p">文字的上面是音频文件,如果想听的话可以点播放按钮</p>
				<p class="p">当然还有相关的字幕</p>
				<p class="p">ps:视频和音频并不一致,因为我找不到相关的视频 :( 
				 </p>
				 <p class="p">首页歌不用说了吧,本来想放Believer的 可是跟氛围有点不搭</p>
				<a href="mailto:1254038128@qq.com?subject=Hello%20again"> 联系我 </a>
			</div>

			<hr size="3px" width="100%" color="#FF7FED" >
		</div>
	</div>

	<div id="footer" class="">
		<h1 class="header_h1" style="font-size: 100%"> 版权所有 </h1>
	</div>
</body>
</html>

CSS代码


#header{
	width: 100%;
	height: 80px;
	
}
#main{

	width: 100%;
	height: 500px;
	
}
#footer{
	width: 100%;
	height: 20px;
	
}
.header_h1{
	font-size: 200%;
	font-family: 黑体;
	font-weight: bold;;
	text-align: center;
	vertical-align: top;
}
.main_left{
	width: 10%;
	height: 100%;
	
	float: left;

}
.main_left_div{
	width: 100%;
	height: 11%;
	text-align: center;
	border-style: groove;
	border-color: #FF7FED;
	border-bottom: none;

	margin: 1px 2px 1px 1px;
}
.main_middle{
	width: 80%;
	height: 100%;
	text-align: center;
	margin-left: 20px 20px 20px 20px;

}
.main_right{
	width: 20%;
	height: 100%;

	position: relative;
	float: right;
	top: -100%;
	 
}
.main_right_up{
	width: 100%;
	height: 15%;

}
.main_right_down{
	width: 100%;
	height: 340px;
	overflow: auto;

}
.p{
	font-weight: bold;
	text-align: center;
}
.a{
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	font-size: 150%;
	font-family: 楷体;
	font-weight: bold;
	color: hsl(207, 95%, 50%);

}

关于收获

这个制作虽然很简单且花费时间并不长,如果做的话半天就可以做一个大概,但其中的收获还是有很多的.读万卷书,也要行万里路. 下面来进行总结一下.

HTML

① 关于布局问题,在三列中我发现中间一列和优劣并没有想象中的一次从左到右排列,而是自上而下的排列,我改变了float也是不行,这件事在两列中并没有发生,在两列中一个向左浮动一个向右浮动就可以解决,于是我上W3C和CSDN论坛发现了解决办法.
有一个top属性和相对位置,绝对位置的概念,虽然这些我从课本中了解过但我并不能深刻理解它们的作用,现在有一些懂了.
② 关于背景图片问题,在我找的素材中,很多像素不合设的图片在整个网页中不会进行拉伸而是进行类似于填充效果和div有关,所有我不得不找了个纯色背景.
③ 超链接问题,这个网页中运用的超链接有文本超链接和图片超链接和电子邮件超链接,点击左侧导航栏以及logo和"联系我"都是超链接,在这里我设置了去掉下划线这一属性和更改了文本的颜色,但这些知识点在我的课下书和W3C并没有详细的提到这些问题,或许我没有仔细阅读W3C,这些知识是在mooc和CSDN论坛上找到了答案.

④div的border和margin问题,这些我初次实践了一些并设置了相应的效果.

⑤ HTML5中的音频和视频相关的标签,这些我是结合课本和W3C进行的也算是加深学习到了.
⑥ 字体格式,对齐方式,大小,等等,以前了解图片的浮动框但在设置字母时就想了想如何设置文本的浮动框,这次也算温故而知新了

CSS

这次CSS中我用到了class和id,说真的我看课本是感觉很懵,感觉不出来它们的很大区别,但在这次中我稍微理解了一些,还有我感觉我写的代码格式是不是有些问题.

Sublime

这次我用的编辑软件是Sublime相关插件在安装时就已经安装好了,这次是已经初步掌握了使用方法吧,比如说高亮,颜色以及快捷键啥的.

素材方面

不开玩笑,我找素材的实践一点都不短,视频是我从B站下载,还有logo是从其它地方下载,还有背景图片我也找了好久,并不是找不到好的素材而是好的素材都要相关的money或者会员.但那些图片是真的好好看!

还有logo和b站的视频,如果相关作者看见了如果觉得不妥请立马联系我我去马上删掉!并对您说对不起.

关于问题

问题有太多太多了!
我先把我想到的问题说一说,希望大家能给我些意见!
①关于HTML和CSS格式的问题
②关于网页布局的问题,如何充分利用px或者%
③文本对齐时的垂直布局vertical-align概念理解
④div的边框边界等的概念的理解
⑤超链接电子邮件的理解
⑥如何快速的找到相关的素材,前端类型的,有没有网站推荐
⑦大家是如何实践小项目来进行练习的
⑧表单和按钮等CSS我并没有运用因为我觉得这个网页类型是分享经典不能让用户还要进行登录操作以及我懒.

下一次目标

接下来我想进行Javascript的学习(已经在学了虽然进度很慢!)并且了解一下微信小程序的概念以及继续学习HTML和css来进行加深理解,大家有没有好的意见呢.

Cui Xiaochun2019

关注

22
点赞
踩
170

收藏

觉得还不错? 一键收藏
3
评论
【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.

前言最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多问题,先记录总结一下.ps:因为没有老师带,看的网课和W3C以及相关书籍,以下内容肯定有操作错误或描述不当的地方,希望各位看到这篇文章的同学和前辈们能指出错误或者骂我,本人脸皮很厚,会接受并表示感谢...
复制链接

扫一扫