大学生网页设计制作作业 (个人博客网页设计模板) html+div+css

最新推荐文章于 2024-04-15 23:17:21 发布

初一简设

最新推荐文章于 2024-04-15 23:17:21 发布

阅读量608

点赞数

文章标签： html css 前端

本文链接： https://blog.csdn.net/shanrenmeimiaoji/article/details/132683566

版权

网页设计作业成品采用div+css布局制作，主要内容包括首页日志作品关于联系我共5个页面，学生HTML静态网页基础水平制作，页面排版干净简洁。网页技术方面应用包括网页背景图片、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点，不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

重要知识点：网页主要采用div，用css完成页面的文字及图片设置，通过设置背景图片，导航条，背景音乐，dw模板、二层结构等相关网页知识点，满足最基础的网页设计要求

部分代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<div class="fullhead">
			<img src="img/beijing.jpg" >
			<div class="fullnav">
				<a href="javascript:void(0);">主页</a>
				<a href="javascript:void(0);">作品</a>
				<a href="javascript:void(0);">关于</a>
				<a href="javascript:void(0);">联系</a>
			</div>
		</div>
		<div class="about">
			<img class="zhaopian" src="img/renxiang.jpg" >
			<div class="jianjie">
				<h3>关于我/ABOUT ME</h3>
				<p>我爱好广泛喜欢唱歌，打篮球，游泳，平时组织一些朋友间的小活动，并乐在其中，相信将来我会不断学习，不断提高自身修养，在注重知识学习的同时我还注意培养自己高尚的道德情操，自觉遵纪守法，遵守社会公德，没有不良嗜好和行为，做一名优秀的企业员工。</p>
			</div>
		</div>

.fullhead{
	width: 100%;
	height: 480px;
	overflow: hidden;
	position: relative;
}
.fullhead img{
	display: block;
	width: 100%;
	height: auto;
}
.fullnav{
	height: 50px;
	position: absolute;
	background-color: rgba(0,0,0,0.3);
	text-align: center;
	width: 100%;
	bottom: 0;
	left: 0;
}
.fullnav a{
	color: rgba(255,255,255,0.8);
	font-size: 18px;
	line-height: 50px;
	margin: 0 50px;
}

.about{
	width: 980px;
	height: 400px;
	margin: 30px auto 0;
	box-sizing: border-box;
	padding: 0 40px;
}

初一简设

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
大学生网页设计制作作业 (个人博客网页设计模板) html+div+css

网页技术方面应用包括网页背景图片、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点，不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。重要知识点：网页主要采用div，用css完成页面的文字及图片设置，通过设置背景图片，导航条，背景音乐，dw模板、二层结构等相关网页知识点，满足最基础的网页设计要求。
复制链接

扫一扫