🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
I25JP-三丽鸥带表单（7页）
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE HTML>
<html>
<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="about.html">三丽鸥简介</a></li>
<li><a href="scenery.html">三丽鸥家族</a></li>
<li><a href="specialty.html">三丽鸥资讯</a></li>
<li><a href="message.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="tit">三丽鸥简介</div>
<div class="tit2">A Brief Introduction To Sanrio</div>
<div class="bx01">
<div class="bx01-left"><img src="images/img01.jpg"></div>
<div class="bx01-right">
<p>三丽鸥公司成立于1960年，是全球著名的造型人物品牌发行商。本着礼物传递真情的经营理念，三丽鸥致力于丰富人际交流的伟大事业。三丽鸥英文的翻译是Sanrio，旗下有五百多个肖像明星。本着礼物传递真情的经营理念，三丽鸥致力于丰富人际交流的伟大事业，赋予礼品全新的意义 - 礼物不仅是用来表达对他人的尊重，信任，友爱，也可以成为与自己内心世界沟通的桥梁。在帮助人们追求幸福，互求相互理解，彼此建立良好友谊的同时，三丽鸥也为人们提供精神上的休闲与满足。</p>
<p>创办人认为人类文明都是从河流开始发源，例如底格里斯河、尼罗河与黄河，而这些河流孕育出世界上三个最古老文明。西班牙文中｢San｣是神圣之意， ｢Rio｣则指河流，因此创办人以神圣的河流为名，表达对人类文明的敬意，进而发展出以「Social Communication」为企业宗旨的三丽鸥公司。「Social Communication」，也就是在特别的时间、节日，透过精美但却不会让收受者觉得有负担的小礼物来表情意，建立维系彼此的友谊。因而三丽鸥设计的肖像明星，已经超越了单纯的设计本身的价值，成为"传达心意，培养友情"的使者。</p>
</div>
</div>
<div class="tit">三丽鸥家族</div>
<div class="tit2">The SANRIO family</div>
<div class="bx02">
<div class="bx02-ner">
<div class="left">
<p>三丽鸥的造型人物都有其特有的背景故事以及鲜明的个性特征。</p>
<img src="images/box01.jpg">
</div>
<div class="right">
<img src="images/box02.jpg">
<img class="mar20" src="images/box03.jpg">
</div>
</div>
</div>
<div class="foot">
<p>Copyright@2021 三丽鸥网站</p>
<p>Sanrio Is my Favorite</p>
</div>
</div>
</html>
🏠CSS样式代码
.tit2 {
height: 30px;
line-height: 30px;
font-size: 14px;
text-align: center;
color: #333;
margin-bottom: 20px;
}
.bx01 {
width: 100%;
height: 354px;
margin-bottom: 20px;
}
.bx01-left {
width: 400px;
height: 354px;
float: left;
margin-right: 20px;
}
.bx01-right {
width: 720px;
height: 354px;
float: left;
}
.bx01-right p {
line-height: 30px;
font-size: 16px;
color: #221e1f;
text-indent: 2em;
margin: 0px;
}
.bx02 {
width: 1140px;
height: 470px;
}
.bx02-ner {
width: 1140px;
height: 420px;
margin: 0 auto;
}
.llbx2 .wenzi p {
font-size: 16px;
line-height: 30px;
text-indent: 2em;
}
.neir {
width: 1140px;
height: auto;
overflow: hidden;
margin-bottom: 30px;
}
.neir img {
float: right;
margin-left: 20px;
}
.neir p {
text-indent: 2em;
line-height: 30px;
margin-bottom: 20px;
font-size: 16px;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
