共计 5687 个字符，预计需要花费 15 分钟才能阅读完成。
常见网页设计作业题材有 个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+ 水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始 HTML+CSS+JS 页面设计, web 大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤【作者主页——🔥获取更多优质源码】
❤【web 前端期末大作业——🔥🔥毕设项目精品实战案例(1000 套)】
文章目录🌰
- 一、网页介绍📖
- 一、网页效果🌌
- 二、代码展示😈
-
- 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/boutiqueGroup.css" rel="stylesheet" type="text/css" />
link href="css/common.css" rel="stylesheet" type="text/css" />
link rel="shortcut icon" href="img/favicon.ico" />
script type="text/javascript" src="js/jquery-1.7.2.min.js">script>
script type="text/javascript" src="js/js.js">script>
head>
body>
div class="rightNav">
div class="rightNavIn">
div class="rnLoginIcon">
div class="userLogin">
img src="img/default_user_portrait.gif" width="30" height="30" />
p>未登录p>
div>
div class="loginWindow">
登录名br />
input type="text" />br />br />
登录密码 a href="javascript:;"> 忘记登录密码？a>br />
input type="text" />br />br />br />
input class="ok" type="submit" value="确认" />br />
a href="javascript:;" class="register">注册新用户a>
a href="javascript:;" class="x">Xa>
div>
div>
ul>
li>
a href="javascript:;">a>
i>聊天i>
li>
li>
a href="javascript:;">a>
i>购物车i>
li>
li>
a href="javascript:;">a>
i>客服i>
li>
li>
a href="javascript:;">a>
i>顶部i>
li>
ul>
div class="closeX">div>
div>
div class="hideBar">
div class="hbBg">div>
a href="javascript:;" class="plus">a>
div>
div>
div class="navImg">
img src="img/zcjs.png" width="143" height="378" />
button>关闭button>
div>
div class="header">
div class="headerIn">
div class="hiLeft">
span>您好，欢迎来到 span> a href="javascript:;"> 亲亲网a> a href="javascript:;">[登录]a> a href="javascript:;">[注册]a>
div>
div class="hiRight">
ul class="demo">
li id="li01">
a href="#">我的订单a>
ul id="ul01">
li>a href="#">待付款订单a>li>
li>a href="#">待确认收货a>li>
li>a href="#">待评价交易a>li>
ul>
li>
li id="li02">
a href="#"> 我的收藏a>
ul id="ul02">
li>a href="#">品牌收藏a>li>
li>a href="#">店铺收藏a>li>
ul>
li>
li id="li03">
a href="#">客户服务a>
ul id="ul03">
li>a href="#">帮助中心a>li>
li>a href="#">售后服务a>li>
li>a href="#">客服中心a>li>
ul>
li>
ul>
div>
div>
div>
div class="logo">
div class="logoIn">
div class="logoLeft">
h1>a href="index.html" title="亲亲网 ">img src="img/logo.png" width="186" height="60" /> 亲亲网a>h1>
div>
div class="logoCenter">
div class="lcTop">
input type="text" placeholder="请输入您要搜索的关键字" />
a href="#">搜索a>
div>
div class="lcBottom">
p>热门搜索：p>
ul>
li>a href="javascript:;">保湿a>li>
li>a href="javascript:;">面膜a>li>
li>a href="javascript:;">洁面a>li>
li>a href="javascript:;">补水a>li>
li>a href="javascript:;">香水a>li>
li>a href="javascript:;">眼霜a>li>
li>a href="javascript:;">唇膏a>li>
li>a href="javascript:;">BB 霜a>li>
ul>
div>
div>
div class="logoRight">
ul>
li>
a href="javasscript:;" class="myShangCheng">
span>span>
我的商城
i>i>
a>
div class="scIn">
span>a href="javascript:;">我的用户中心>a>span>
div class="ciLi">
ul>
li>a href="javascript:;">站内消息(0)a>li>
li>a href="javascript:;">资讯回复(0)a>li>
li>a href="javascript:;">代金券(0)a>li>
ul>
ul>
li>a href="javascript:;">我的订单 >>a>li>
li>a href="javascript:;">我的收藏 >>a>li>
li>a href="javascript:;">我的积分 >>a>li>
ul>
div>
div>
li>
li>
a href="javasscript:;" class="myGouWuChe">
span>span>
购物车结算
i>i>
a>
div class="gwcIn">
span>最新加入的商品span>
p>您的购物车中暂无商品，赶快选择心爱的商品吧！p>
div class="gwcGray">
div class="ggBtn">
a href="javascript:;">结算购物车中的商品a>
div>
div>
div>
li>
ul>
div>
div>
div>
div class="nav">
div class="navIn">
div class="niLeft">
h3>所有分类商品h3>
img src="img/arrow_down.png" />
div>
div class="niCenter">
a href="index.html">首页a>
a href="list-boutiqueGroup.html" class="current">精品团购a>
a href="list-brandSale.html">品牌特卖a>
a href="list-overseasDirectMail.html" id="ncIcon">海外直邮
img src="img/ico_hot.gif" width="21" height="13"/>
a>
div>
div class="niRight">
a href="javascript:;" class="nr_01">
i>i>
span>自营美妆 198 包邮span>
a>
a href="javascript:;" class="nr_02">
i>i>
span>30 天无理由退货span>
a>
a href="javascript:;" class="nr_03">
i>i>
span>100% 正品保证span>
a>
a href="javascript:;" class="nr_04">
i>i>
span>中华财险承保span>
a>
div>
div>
div>
div class="banner">
div class="bannerIn">
ul>
li>
div class="img01">div>
li>
li>
div class="img02">div>
li>
ul>
div>
div>
div class="con">
div class="conTop">
a href="javascript:;" class="special">b>全部b>a>
a href="javascript:;">b>护肤b>a>
a href="javascript:;">b>彩妆b>a>
a href="javascript:;">b>护肤b>a>
a href="javascript:;">b>服装b>a>
a href="javascript:;">b>鞋靴b>a>
a href="javascript:;">b>包包b>a>
a href="javascript:;">b>配饰b>a>
a href="javascript:;" class="a01">b class="ing">正在进行b>a>
a href="javascript:;" class="a01">b>即将开始b>a>
a href="javascript:;" class="a01">b>已经结束b>a>
div>
div class="conCenter">
dl>
dt>价格：dt>
dd class="select">a href="javascript:;">不限a>dd>
dd>a href="javascript:;">0-50 元a>dd>
dd>a href="javascript:;">50-100 元a>dd>
dd>a href="javascript:;">100-200 元a>dd>
dd>a href="javascript:;">200-300 元a>dd>
dd>a href="javascript:;">300 元以上a>dd>
dl>
dl class="sort">
dt>排序：dt>
dd class="select">a href="javascript:;">默认a>dd>
dd>a href="javascript:;">价格a>dd>
dd>a href="javascript:;">折扣a>dd>
dd>a href="javascript:;">销量a>dd>
dl>
div>
div class="conBottomT">
dl>
dt>a href="javascript:;">img src="img/boutque01_r2_c2.jpg" width="384" height="225" />a>dt>
dd>
span>
a href="javascript:;">
em>4.48 折 /em>Avon 雅芳小红裙套装（香体乳 150ml+ 沐浴露 150ml)
a>
span>
dd>
dd class="price">
em>¥43.00em>
del>¥96.00del>
i>销量：0 天 2 时 19 分 6 秒