常见的网页设计作业主题包括个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、图书、婚庆服饰、游戏、节日、戒烟、电影、摄影、文化、故乡、鲜花、礼物、汽车、其他等网页设计题目,A+级作业,可以满足大学生网页设计任务的需要,并且可以满足您的需求。 原创HTML+CSS+JS页面设计,大学生网页设计作业源码,图片锐利,布局整齐,内容丰富,主题明确,非常适合初学者学习和使用。
文章目录
1. 网页介绍
1网页介绍:本作品主题为中学生个人主页网页设计,HTML+CSS布局制作,web后端期末作业,大学生网页设计作业源码,这是一篇不错的网页制作,图片灵动,代码简单 中学生水平,非常适合初学者学习和使用。
2.网页编辑:网页作品的代码简单,可以使用任何HTML编辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意HTML编辑软件来运行、修改和编辑等)。
3、知识应用:技术方面主要应用网页知识:Div+CSS、鼠标悬停效果、Table、导航栏效果、Banner、表单、二级五级页面等商城类网站源码,视频、音频元素、Flash、同时设计Logo所需的知识点(源文件)。
1、网页疗效
2.代码展示 1.HTML结构代码
代码如下(示例):以下仅展示部分代码供参考~
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!</title>
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您! </li>
<li>
<a href="#">请登录</a>
<a href="register.html" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的品优购</a>
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li><a href="#">品优购会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a> <i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
<div class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购">品优购</a>
</h1>
</div>
<div class="search">
<input type="text" class="text" value="请搜索内容...">
<button class="btn">搜索</button>
</div>
<div class="hotwrods">
<a href="#" class="style-red">优惠购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<div class="shopcar">
<i class="car"> </i>我的购物车 <i class="arrow"> </i>
<i class="count">80</i>
</div>
</div>
<div class="nav">
<div class="w">
<div class="dropdown fl">
<div class="dt"> 全部商品分类 </div>
<div class="dd">
<ul>
<li class="menu_item"><a href="#">家用电器</a> <i> </i> </li>
<li class="menu_item">
<a href="list.html">手机</a> 、
<a href="#">数码</a> 、
<a href="#">通信</a>
<i> </i>
</li>
<li class="menu_item"><a href="#">电脑、办公</a> <i> </i> </li>
<li class="menu_item"><a href="#">家居、家具、家装、厨具</a> <i> </i> </li>
<li class="menu_item"><a href="#">男装、女装、童装、内衣</a> <i> </i> </li>
<li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a> <i> </i> </li>
<li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a> <i> </i> </li>
<li class="menu_item"><a href="#">运动户外、钟表</a> <i> </i> </li>
<li class="menu_item"><a href="#">汽车、汽车用品</a> <i> </i> </li>
<li class="menu_item"><a href="#">母婴、玩具乐器</a> <i> </i> </li>
<li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a> <i> </i> </li>
<li class="menu_item"><a href="#">医药保健</a> <i> </i> </li>
<li class="menu_item"><a href="#">图书、音像、电子书</a> <i> </i> </li>
<li class="menu_item"><a href="#">彩票、旅行、充值、票务</a> <i> </i> </li>
<li class="menu_item"><a href="#">理财、众筹、白条、保险</a> <i> </i> </li>
</ul>
</div>
</div>
<div class="navitems fl">
<ul>
<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="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<div class="w">
<div class="main">
<div class="focus fl">
<a href="#" class="arrow-l"> < </a>
<a href="#" class="arrow-r"> </a>
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
</ul>
<ol class="circle">
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="newsflash fr">
<div class="news">
<div class="news-hd">
品优购快报
<a href="#">更多</a>
</div>
<div class="news-bd">
<ul>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】母亲节,健康好礼低至5折!</a></li>
<li><a href="#">【特惠】爆款耳机5折秒!</a></li>
<li><a href="#">【特惠】9.9元洗100张照片!</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
</ul>
</div>
</div>
<div class="lifeservice">
<ul>
<li>
<a href="#">
<i class="service_ico service_ico_huafei"></i>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
<span class="hot"></span>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="service_ico service_ico_feiji"></i>
<p>机票</p>
</a>
</li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargain.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="recommend w">
<div class="recom-hd fl">
<img src="img/clock.png" alt="">
<h3>今日推荐</h3>
</div>
<div class="recom-bd fl">
<ul>
<li>
<a href="#">
<img src="upload/pic.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="upload/pic.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="upload/pic.jpg" alt="">
</a>
</li>
<li class="last">
<a href="#">
<img src="upload/pic.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="center3">
<div class="gress">
<p class="p1">猜你喜欢</p>
<div>
<p class="p2">换一批</p>
<i class="fa fa-refresh"></i>
</div>
</div>
<div class="like">
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
<div class="likeblock">
<img src="img/like_01.png" alt="" />
<div class="zi zi1">
<p>阳光美包新款单肩包女</p>
<p>包时尚子母包四件套女</p>
<div class="price">
<p class="p3">¥</p>
<p>116.00</p>
</div>
</div>
</div>
</div>
</div>
<div class="center4">
<p class="title4">传智播客 · 有趣区</p>
<div class="interesting">
<div class="inblock1">
<img src="img/interest01.png" alt="" />
</div>
<div class="inblock2">
<div class="d2">
<p class="p4">好东西</p>
</div>
<img src="img/interest02.png" alt="" />
<img src="img/interest03.png" alt="" />
</div>
<div class="inblock3">
<div class="d3">
<p class="p4">品牌街</p>
</div>
<div>
<img src="img/interest04.png" alt="" />
</div>
<div class="d4">
<img src="img/interest05.png" alt="" />
<img src="img/interest06.png" alt="" />
</div>
</div>
<div class="inblock4">
<img src="img/图层-136.png" alt="" />
</div>
</div>
</div>
2.CSS样式代码
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \5B8B4F53, sans-serif;
/*取消轮廓线 蓝色的*/
outline: none;
}
body {
background-color: #fff;
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \5B8B4F53, sans-serif;
color: #666
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
三、个人总结
一套合格的网页应包括(具体可根据个人要求确定)
页面分为四个部分:页眉、菜单导航栏(最好下拉)、中间内容蓝筹股、页脚; 所有页面均设有超链接,可跳转至五级页面商城类网站源码,共5-10页; 页面风格style 统一布局显示正常,不乱,采用Div+Css技术; 菜单美观、醒目,二级菜单能正常弹出和跳转; 要有JS特效,比如定时切换、图片新闻自动切换等; 页面中有多媒体元素,如gif、视频、音乐、表单技术的运用; 页面清新、美观、大方,就是不一样。 网站后台程序除了能够呈现用户所要求的内容外,还必须满足布局良好、界面美观、色彩搭配优雅、表现形式多样的要求。 4. 更多干货
1.如果我的博客对您有帮助,如果您喜欢我的博客内容,请一键“点赞”、“评论”、“收藏”!
2.【跟我来| 获取更多源代码 | 优质文章】带你学习各类后端插件,3D炫丽效果,图片展示,文字效果,以及整站模板,大学生毕业HTML模板,期末作业模板等! “这里有很多前端开发者,一起讲解前端Node知识,互相学习”!
3.欢迎大家一起交流和研究以上内容相关的技术问题