网上花店网页代码 html静态花店网页设计制作 dw静态鲜花网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
最新推荐文章于 2024-02-01 09:53:35 发布
网页设计吧
最新推荐文章于 2024-02-01 09:53:35 发布
阅读量782
收藏
6
点赞数
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, 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>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<!--条件注释语句,当满足if语句时则执行-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8"><!--编码格式-->
<title>如意花店-首页</title>
<!--引用js文件-->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/ddsmoothmenu.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.elastislide.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.accordion.js"></script>
<script src="js/light_box.js"></script>
<script type="text/javascript">$(document).ready(function(){
$(".inline").colorbox({
inline:true, width:"50%"});});</script>
<!--end js-->
<!-- 适配于手机浏览 ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================导入外部样式表================================== -->
<!--可以在<head>部分通过<style>标签定义内部样式表；
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，就可以通过更改一个文件来改变整个站点的外观-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/orange.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<script src="js/html5.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="mainContainer big container"><!--主要内容区-->
<!--Header Block-->
<div class="header-wrapper">
<header class="container">
<div class="head-right">
<ul class="top-nav">
<li class=""><a href="#">我的账户</a></li>
<li class="my-wishlist"><a href="#">收藏</a></li>
<li class="checkout"><a href="#" >结算</a></li>
<li class="log-in"><a href="account_login.html" >登录</a></li>
</ul>
<section class="header-bottom"><!--搜索和购物车-->
<!--section新标签，与div类似，语义化-->
<div class="cart-block"><!--购物车-->
<ul>
<li>(2)</li>
<li><a href="#" title="购物车"><img title="购物车" alt="购物车" src="images/item_icon.png" /></a></li>
<li>购物车</li>
</ul>
<div id="minicart" class="remain_cart" style="display: none;">
<p class="empty">您的购物车共有2件商品</p>
<ol>
<li>
<div class="img-block"><img src="images/small_img1.png" title="" alt="" /></div>
<div class="detail-block">
<h4><a href="#" title="玫瑰">玫瑰</a></h4>
<p>
<strong>1</strong> x ￥99.00
<!--strong用于文本加粗，强调作用-->
</p>
<a href="#" title="Details">细节展示</a>
</div>
<div class="edit-delete-block">
<a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a>
<!--<img>中“alt”当浏览器无法加载图片时显示替代文本的属性-->
<a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a>
</div>
</li>
<li>
<div class="img-block"><img src="images/small_img.png" title="" alt="" /></div>
<div class="detail-block">
<h4><a href="#" title="玫瑰">玫瑰</a></h4>
<p>
<strong>1</strong> x ￥99.00
</p>
<a href="#" title="Details">细节展示</a>
</div>
<div class="edit-delete-block">
<a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a>
<a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a>
</div>
</li>
<li>
<div class="total-block">共计:<span>￥198.00</span></div>
<a href="index.html" title="结算" class="orange-btn">结算</a>
<!--<div class="clear"></div>-->
</li>
</ol>
</div>
</div>
<!--搜索框-->
<div class="search-block">
<input type="text" value="搜索" />
<!--定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
并不是所有的主流浏览器都支持新的input类型。-->
<input type="submit" value="submit"/>
<!--submit定义提交按钮。提交按钮会把表单数据发送到服务器-->
</div>
</section>
</div>
<!--LOGO-->
<h1 class="logo">
<img title="Logo" alt="Logo" src="images/logo.png" /></h1>
<nav id="smoothmenu1" class="ddsmoothmenu mainMenu"
最低0.47元/天 解锁文章
445
暂无认证
到【灌水乐园】发言
Rtkmas: 能给全部源码，和图片素材吗
m0_74841309: 有配套资源吗
CSDN-Ada助手: 恭喜你，获得了 2023 博客之星评选的入围资格，请看这个帖子 （https://bbs.csdn.net/topics/615728360?utm_source=blogger_star_comment）。 请在这里提供反馈： https://blogdev.blog.csdn.net/article/details/129986459?utm_source=blogger_star_comment。
-落日归山海: 求源文件
苦练鲁班: 有全部吗？