静态网页设计用什么软件-基于HTML+CSS+JavaScript模仿的简单个人静态HTML网页设计作品 | 吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计

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

❤【Web前端期末作业-毕业设计精品实践案例（1000套）】

文章目录

1. 网页介绍

1网页介绍：本作品是学生个人主页网页设计主题，HTML+CSS布局制作，网页前端期末作业，大学生网页设计作业源码。这是一个很好的网页制作，图形灵巧，代码简单，适合学生，非常适合初学者学习和使用。

2.网页编辑：网页工作的代码简单，可以使用任何HTML编辑软件（如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等HTML编辑软件）运行、修改和编辑。

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

1.网页效果

二、代码展示 1、HTML结构代码

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

<html>
<head>
	<meta charset="utf-8">
	<title>小米首页</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/media_index.css">
	<link rel="stylesheet" type="text/css" href="css/mod.css">
</head>
<body>
	<section>
		
		<nav id="nav" class="site-topbar">
			<div class="wraper">
				<ul class="nav-left">
					<li><a href="#">小米商城</a></li>
					<li><a href="#">MUI</a></li>
					<li><a href="#">米聊</a></li>
					<li><a href="#">游戏</a></li>
					<li><a href="#">多看阅读</a></li>
					<li><a href="#">云服务</a></li>
					<li><a href="#">小米移动版</a></li>
					<li><a href="#">问题反馈</a></li>
					<li><a href="#">Select Region</a></li>
				</ul>
				<ul class="nav-right">
					<li><a href="./login.html">登录</a></li>
					<li><a href="./reg.html">注册</a></li>
					<li class="buyCar">
						<a class="i_car" href="登录">购物车（0）</a>
						<div class="content"></div>
					</li>
				</ul>
			</div>
		</nav>
		
		
		<header id="header" class="site-header">
			<div class="wraper">
				<hgroup class="header-left">
					<h1>小米</h1>
					<h2></h2>
				</hgroup>
				<ul class="header-middle header-menu">
					<li>
						<a href="#">小米手机</a>
						<div class="content">
							<ul class="goods-list">
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_prod1.jpg">
									</div>
									<p class="name">小米Max</p>
									<span class="price">1299元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_prod1.jpg">
									</div>
									<p class="name">小米Max</p>
									<span class="price">1299元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_prod1.jpg">
									</div>
									<p class="name">小米Max</p>
									<span class="price">1299元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_prod1.jpg">
									</div>
									<p class="name">小米Max</p>
									<span class="price">1299元起</span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">红米</a>
						<div class="content">
							<ul class="goods-list">
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_red1.jpg">
									</div>
									<p class="name">红米Note 3</p>
									<span class="price">899元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_red1.jpg">
									</div>
									<p class="name">红米Note 3</p>
									<span class="price">899元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_red1.jpg">
									</div>
									<p class="name">红米Note 3</p>
									<span class="price">899元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_red1.jpg">
									</div>
									<p class="name">红米Note 3</p>
									<span class="price">899元起</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_red1.jpg">
									</div>
									<p class="name">红米Note 3</p>
									<span class="price">899元起</span>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">平板 笔记本</a>
						<div class="content">
							<ul class="goods-list">
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_pad1.jpg">
									</div>
									<p class="name">小米平板2 64GB</p>
									<span class="price">1299元</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_pad1.jpg">
									</div>
									<p class="name">小米平板2 64GB</p>
									<span class="price">1299元</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_pad1.jpg">
									</div>
									<p class="name">小米平板2 64GB</p>
									<span class="price">1299元</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_pad1.jpg">
									</div>
									<p class="name">小米平板2 64GB</p>
									<span class="price">1299元</span>
								</li>
								<li class="item">
									<div class="prod-img">
										<img src="./images/index_drop_pad1.jpg">
									</div>
									<p class="name">小米平板2 64GB</p>
									<span class="price">1299元</span>
								</li>
							</ul>
						</div>
					</li>
					   </div>
</html>

2.CSS样式代码


/*ç½‘æ ¼æ¨¡å—*/
.m-box{font-size:0px;}
.m-hd{font-size:20px;line-height: 20px;margin:42px 0px 20px 0;}
.m-hd::after{content:'';display: block;clear: both;}
.m-hdL{float:left;}
.m-hdR{float:right;font-size: 20px;}
.m-hd{}
.m-bd{}
.m-hdR .btns2 .active{color:#999;}
.m-hdR .btns2 a{display:block;float:left;width:36px;height:24px;border:solid #ccc 1px;text-align: center;line-height:24px;color:#ccc;}
.m-hdR .btns2 a:hover{color:#F87300;}
.m-box .span4,.m-box .span16{font-size:14px;display:inline-block;height:100%;vertical-align: top;}
.m-box .main-pic{height:100%;padding-bottom:0px;}	
.m-box .main-pic img{width:100%;height:100%;}	
.m-box .span4{width:19.1525%;} 
.m-box .span16{width: 80.8475%;}
.m-box .span20{width: 100%;}
.m-box .m-cols{font-size:0px;}
.m-box .m-cols::after{content:'';display: block;overflow: hidden;}
.m-box .m-cols .col{float:left;font-size:14px;}
.m-box .m-col-3 .col{margin-left:1.6%;width:31.733333%;height:100%;}
.m-box .m-col-4 .col{margin-left:1.3333333%;width:24%;height:100%;}
.m-box .m-col-4 .col:first-child{margin-left:0;}
.span4 + .span16 .m-col-4{padding-left:1.33333%;}
.m-box .m-col-5 .col{margin-left:1.1613%;width:19.0709%;height:100%;}
.m-box .m-col-5 .col:first-child{margin-left:0;}
	/*å¹»ç¯ç‰‡æ¨¡å—*/
.m-slide{width:100%;}
.m-slide-contain{font-size:0px;height:100%; text-align: center;}
.m-slide-contain.m-s1{width:100%;}
.m-slide-contain.m-s2{width:200%;}
.m-slide-contain.m-s4{width:400%;}
.m-slide-contain.m-s5{width:500%;}
.m-slide-contain.m-s10{width:1000%;}
.m-slide-contain .m-slide-item{display: inline-block;vertical-align: top; font-size:12px;}
.m-slide-contain.m-s1 .m-slide-item{width:100%;}
.m-slide-contain.m-s2 .m-slide-item{width:50%;}
.m-slide-contain.m-s4 .m-slide-item{width:25%;}
.m-slide-contain.m-s5 .m-slide-item{width:20%;}
.m-slide-contain.m-s10 .m-slide-item{width:10%;}

三、个人总结

一套合格的网页应包括（具体可根据个人要求确定）

页面分为四个部分：页眉、菜单导航栏（最好是下拉）、中间内容部分、页脚；所有页面之间都有超链接，可以转到三级页面吉祥物设计，由5-10页组成；页面风格统一，布局显示正常表情包设计，不杂乱，采用Div+Css技术；菜单美观、醒目，二级菜单能正常弹出和跳转；必须有JS特效，比如定时切换、手动切换图片新闻；页面上有多媒体元素，如gif、视频、音乐静态网页设计用什么软件，以及表单技术的使用；页面清爽、美观、大方、与众不同。网站前端程序不仅要能够呈现用户所需的内容，还要满足布局良好、界面美观、色彩搭配优雅、表现形式多样等要求。 4．更多有用信息

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

2.❤️【关注我| 获取更多源代码 | 优质文章】带你学习各种前端插件，3D炫酷效果静态网页设计用什么软件，图片展示，文字效果，以及整站模板，大学生毕业HTML模板，期末作业模板等！ “这里有很多前端开发人员，我们一起讨论前端Node知识，互相学习”！

3、欢迎大家就以上内容相关的技术问题共同交流学习。

本文固定链接: https://wen.nuanque.com/wangye/13521.html
转载请注明: nuanquewen 2023年09月20日于吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计发表
文章或作品为作者独立观点不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。本文之内容为用户主动投稿和用户分享产生，如发现内容涉嫌抄袭侵权，请联系在线客服举报，一经查实，本站将立刻删除。本站转载之内容为资源共享、学习交流之目的，请勿使用于商业用途。

最后编辑：2023-09-20

作者：nuanquewen

吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计

站内专栏站点

您可能还会对这些文章感兴趣！