HTML网页设计制作——初音动漫(6页) dreamweaver作业静态HTML网页设计模板

最新推荐文章于 2024-10-27 15:48:27 发布

我是学长霸霸

最新推荐文章于 2024-10-27 15:48:27 发布

阅读量107

点赞数

分类专栏： dw静态网页文章标签： html dreamweaver 课程设计

本文链接：https://blog.csdn.net/qq_38512792/article/details/129941398

版权

本文提供了一个适合初学者的HTML网页设计实例，详细介绍了如何使用Dreamweaver创建一个静态HTML网页。内容包括网页简介、网页效果展示、HTML和CSS代码展示，以及个人学习总结。网页设计涉及Div+CSS、鼠标特效、表单等多种技术，并提供了完整源码供学习和修改。

摘要由CSDN通过智能技术生成

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
		<title>初樱动漫</title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/index_style.css" />
		<!-- 添加js轮播样式 -->
		<style>
			.addWrap{
      position:relative; width:100%;background:#fff;margin:0; padding:0;}
			.addWrap .swipe{
     overflow: hidden;visibility: hidden;position:relative;}
			.addWrap .swipe-wrap{
     overflow:hidden;position:relative;}
			.addWrap .swipe-wrap > div {
     float: left;width: 100%;position:relative;}
			
			#position{
      position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}
			#position li{
     width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}
			#position li.cur{
     background-color:#FF0000;}
			.img-responsive {
      display: block;}
		</style>
	<body>
		<div id="contain">
			<!-- 全局 -->
			<div id="top">
				<!-- 头部 -->
				<a>
					<div id="logo">
						<!-- logo图片 -->
						<!-- <a href="#"><img class="logo" src="img/logo.png"></a> -->
					</div>
				</a>
				<div id="search">
					<!-- 搜索框 -->
					<input type="search" id="search_width" class="search" required="" placeholder="Search">
					<input type="button" id="search_button" class="search" value="搜 索" />
				</div>
				<div id="login">
					<!-- 登录 -->
					<!-- 注册 -->
					<a href="login.html"><input type="button" class="login" value="登 录" /></a>&nbsp;&nbsp;
					<a href="register.html"><input type="button" class="login" value="注 册" /></a>
				</div>
			</div>
			<div id="links">
				<!-- 导航栏 -->
				<span><a href="index.html"><input type="button" class="links_button" value="首 页