HTML网页制作——用DIV+CSS技术设计的动漫网站——网页设计实例企业网站制作-程序员宅基地

技术标签： css 网页设计作业前端 html网页设计作业 html web大学生个人网站作业模课程设计 javascript

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

精彩专栏推荐

【作者主页——获取更多优质源码】

【学习资料/简历模板/面试资料/ 网站设计与制作】

【web前端期末大作业——毕设项目精品实战案例】

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码结构
- 2.CSS样式代码
三、个人总结
四、更多干货

一、网页介绍

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web">
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="nav">
<ul>
<li><a href="index.html">网站首页</a></li>
<li><a href="renwu.html">热门人物</a></li>
<li><a href="tuijian.html">热门推荐</a></li>
<li><a href="denglu.html">会员登陆</a></li>
<li><a href="zhuce.html">会员注册</a></li>
</ul>
</div>
<div class="sous">
<form>
<input class="inut" />
<button class="btn"></button>
</form>
</div>
</div>

<div class="banner">
<img src="images/banner.jpg" />
</div>
<div class="box1">
<div class="bx">
<img src="images/img1.jpg" />
<p>热门连载</p>
</div>
<div class="bx">
<img src="images/img2.jpg" />
<p>最新更新</p>
</div>
<div class="bx">
<img src="images/img3.jpg" />
<p>新番动漫</p>
</div>
<div class="bx">
<img src="images/img4.jpg" />
<p>经典完结</p>
</div>
</div>
<div class="tit">热门动漫人物</div>
<div class="box2">
<div class="bx2">
<img src="images/img5.jpg" />
哆唻A梦
</div>
<div class="bx2">
<img src="images/img6.jpg" />
漩涡鸣人
</div>
<div class="bx2">
<img src="images/img7.jpg" />
江户川柯南
</div>
<div class="bx2">
<img src="images/img8.jpg" />
宇智波佐助
</div>
<div class="bx2">
<img src="images/img9.jpg" />
野比大雄
</div>
</div>
<div class="tit">经典动漫</div>
<div class="box3">
<div class="bx3">
<img src="images/img10.jpg" />
<p>哆啦A梦</p>
<p>ドラえもん</p>
</div>
<div class="bx3">
<img src="images/img11.jpg" />
<p>火影忍者</p>
<p>NARUTO -ナルト-</p>
</div>
<div class="bx3">
<img src="images/img12.jpg" />
<p>名侦探柯南</p>
<p>名探偵コナン</p>
</div>
</div>
<div class="tit">最新更新</div>
<div class="box4">
<div class="bx4">
<img src="images/img13.jpg" />
</div>
<div class="bx4">
<img src="images/img14.jpg" />
</div>
<div class="bx4">
<img src="images/img15.jpg" />
</div>
</div>
<div class="foot">
<p>Copyright&copy;经典动漫网版权所有Rights Reserved.</p>
</div>
</div>
</body>
</html>

2.CSS样式代码


body {
    
	margin: 0 auto;
	font-size: 12px;
	font-family: "微软雅黑",arial;
	line-height: 22px;
	background: #e0ecfa;
}

div,p,input,li,h1,h2,h3,h4,h5 {
    
	height: auto;
	margin: 0;
	padding: 0px;
	vertical-align: middle;
}

li {
    
	list-style: none;
}

a {
    
	text-decoration: none;
	color: #000;
}

img {
    
	border: 0;
	margin: 0;
	padding: 0;
}

.web {
    
	width: 1140px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	background: #FFF;
	padding: 0px 30px;
}

.top {
    
	height: 55px;
	padding-top: 15px;
}

.logo {
    
	width: 116px;
	height: 39px;
	float: left;
	margin-right: 50px;
}

.nav {
    
	width: 720px;
	height: 39px;
	float: left;
}

.nav ul {
    
	padding: 0px;
	margin: 0;
}

.nav ul li {
    
	height: 39px;
	line-height: 39px;
	float: left;
	margin: 0px 20px;
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “️评论” “收藏” 一键三连哦！

2.️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题欢迎一起交流学习

本文链接：https://blog.csdn.net/qq_524614081/article/details/135435827

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

计算机基础——操作系统-程序员宅基地

文章浏览阅读8.5k次，点赞28次，收藏38次。本章将会讲解计算机的操作系统。操作系统（Operating System,OS）就好比一个计算机内部的管理者，是管理和控制计算机硬件与软件资源的计算机程序，直接运行在“裸机”上的最基本的系统软件，任何其他应用软件都必须在操作系统的支持下才能运行，操作系统是用户和计算机的接口，同时也是计算机硬件和其他软件的接口。操作系统的功能包括管理计算机系统的硬件，软件及数据资源，控制程序运行，为其他应用软件提供支持等。_操作系统

Python之pip download 命令用法-下载指定平台和python版本的依赖包-程序员宅基地

文章浏览阅读1.9w次，点赞7次，收藏27次。pip download 和 pip install 有着相同的解析和下载过程，不同的是，pip install 会安装依赖项，而 pip download 会把所有已下载的依赖项保存到指定的目录 ( 默认是当前目录 )，此目录稍后可以作为值传递给 pip install --find-links 以便离线或锁定下载包安装_pip download

centos7设置密码策略_CentOS7 设置密码复杂度-程序员宅基地

文章浏览阅读3.4k次。在CentOS下设置密码复杂度分为两步(1)修改/etc/login.defs文件vim /etc/login.defsPASS_MAX_DAYS90　　 # 密码最长过期天数PASS_MIN_DAYS80　　　 # 密码最小过期天数PASS_MIN_LEN10　　　　# 密码最小长度PASS_WARN_AGE7　　　 # 密码过期警告天数(2)..._echo 'mypassword' | openssl passwd -6 -stdin centos7

王斌老师的博客_王斌 github-程序员宅基地

文章浏览阅读480次。http://blog.sina.com.cn/s/blog_736d0b9101018cgc.html_王斌 github

ACM OJ Collection_htt//acm.wydtang.top/-程序员宅基地

文章浏览阅读737次。原文来自：http://blog.csdn.net/hncqp/article/details/4455263 ACM OJ Collection（排名不分先后）：中国：浙江大学（ZJU）：http://acm.zju.edu.cn/北京大学（PKU）：htt_htt//acm.wydtang.top/

ios 自己服务器苹果支付_修复苹果IOS支付-程序员宅基地

文章浏览阅读467次。更新记录1.0.0(2019-07-01)插件简介专门用来修复苹果IOS支付时出现"您已购买此App内购买项目。此项目将免费恢复"。问题描述首先在IOS平台里面创建“APP内购买项目”，选择的是“消耗型项目”，然后用uni-app官方的支付api进行支付，多支付几次，有时候就会出现提示“您已购买此App内购买项目。此项目将免费恢复”,特别是在沙盒测试里面支付很大几率出现,我明明选的是消耗型项目，应..._ios开发苹果支付恢复权益

随便推点

郁金香2021年游戏辅助技术中级班（七）_squad辅助科技-程序员宅基地

文章浏览阅读379次。郁金香2021年游戏辅助技术中级班（七）058-C,C++写代码HOOK分析封包数据格式A059-C,C++写代码HOOK分析封包数据格式B-detours劫持060-C,C++写代码HOOK分析封包数据格式C-过滤和格式化061-C,C++写代码HOOK分析封包数据格式D-写入配置文件062-C,C++写代码HOOK分析封包数据格式D-读取配置文件058-C,C++写代码HOOK分析封包数据格式A_squad辅助科技

ssh登录qemu虚拟机里的linux系统_qemu ssh连接-程序员宅基地

文章浏览阅读350次。上面的命令启动了一个带有NAT网络的QEMU虚拟机，并设置了端口转发，将主机的2222端口映射到虚拟机的22端口（SSH端口）。1、安装openssh，如果是根文件系统用buildroot构建，打开 BR2_PACKAGE_OPENSSH 开关。2、在qemu的启动脚本里增加。3、在虚拟机里增加一个新用户。4、向虚拟机里发送文件。_qemu ssh连接

用netty实现zcool_Netty框架入门-程序员宅基地

文章浏览阅读63次。一、概述Netty是由JBOSS提供的一个java开源框架。Netty提供异步的、事件驱动的网络应用程序框架和工具，用以快速开发高性能、高可靠性的网络服务器和客户端程序。二、体系结构图三、Netty的核心结构Netty是典型的Reactor模型结构，在实现上，Netty中的Boss类充当mainReactor，NioWorker类充当subReactor(默认NioWorker的个数是当前服务器的..._channelconnected

SpringBoot 过滤器 filter 3种方法_spring boot filter 配置-程序员宅基地

文章浏览阅读4.7k次。最近Spring Boot项目做单点登录对接的时候，在配置过滤器的时候，找了几种方法，记录一下。欢迎评论补充沟通~由于之前JAVA Web项目最开始都有web.xml配置，随着框架慢慢的进化，从Spring Boot开始，已经没有了web.xml配置文件。那原来在web.xml里，配置的filter过滤器，在Spring Boot中怎么配置呢？注意，这个自定义类，也不能加@Component或@Configuration注解，加了就会初始化Filter了，过滤全部的路径了。_spring boot filter 配置

Ubuntu下，Python源码制作deb包_unmet build dependencies: debhelper (>= 11)-程序员宅基地

文章浏览阅读1k次。背景：自己写了一个Python的qt客户端，然后需要制作deb包1.先贴上代码的目录结构x@hostv6:~/mywork/my-client$ tree.├── 1├── debian│ ├── changelog│ ├── compat│ ├── control│ ├── copyright│ ├── README.Debian│ ├── rules│ ├── source│ │ ├── format│ │ └── loc..._unmet build dependencies: debhelper (>= 11)

13. PyQt5实现多页面切换之QTabWidget_pyqt5 tabwidget-程序员宅基地

文章浏览阅读2.8w次，点赞19次，收藏96次。QTabWidget 类，是一个实现多页面切换的类，该类已经实现了多页面切换的部分功能，只需再对其进行少量的设计(主要是要设计页面中的内容)便可实现多页面切换了。因此，使用该类实现多页面切换时，就不需要再使用 QStackedLayout 布局把页面与选项卡相关联，也不需要使用类似 QVBoxLayout 的布局把选项卡和页面放置在一起。与 QStackedLayout 布局原理相同，只有当前页面(即可见页面)是可见的，所有其他页面都不可见，用户可通过选择不同的选项卡来显示其对应的其他页面。_pyqt5 tabwidget