42. Web前端网页案例——【可爱的三丽鸥萌宠礼品企业网页（ 7页）】大学生期末大作业 html5+css3

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考

一、网页概述

本实例应用html+css，👉温馨提示：这里所有的网页案例主要应用HTML、CSS、JS等关键技术知识，有静态网页，更有动态网页，所有网页案例都支持如DW、HBuilder、Vscode、Text 等任意HTML主流编辑软件进行编辑修改，亦支持包括IE、Chrome、Firefox、Safari主流浏览器浏览。

二、网页文件

本网页共包含7个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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="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>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0 auto;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 22px;
   color: #333;
   background: #e0ecfa;
}

div,p,input,li,h1,h2,h3,h4,h5 {
   height: auto;
   margin: 0;
   padding: 0px;
   vertical-align: middle;
}

li {
list-style: none;
}

a {
text-decoration: none;
color: #000;
}

img {
   border: 0;
   margin: 0;
   padding: 0;
}

.web {
   width: 1140px;
   height: auto;
   overflow: hidden;
   margin: 0 auto;
   background: #FFF;
   padding: 0px 30px;
}

.top {
height: 55px;
padding-top: 15px;
}

.logo {
   width: 116px;
   height: 39px;
   float: left;
   margin-right: 50px;
}

.nav {
   width: 720px;
   height: 39px;
   float: left;
}

.nav ul {
padding: 0px;
margin: 0;
}

.nav ul li {
   height: 39px;
   line-height: 39px;
   float: left;
   margin: 0px 20px;
}

.nav ul li a {
font-size: 18px;
color: #000;
}

.sous {
   width: 140px;
   height: 39px;
   float: right;
}

.inut {
   width: 110px;
   height: 39px;
   border: none;
   border-bottom: 1px solid #000;
   float: left;
}

.btn {
   width: 30px;
   height: 30px;
   background: url(../images/btn.jpg) no-repeat;
   border: none;
   margin-top: 10px;
}

.banner {
   width: 1140px;
   height: 400px;
   margin-bottom: 25px;
}

.tit {
   height: 60px;
   line-height: 60px;
   padding-left: 20px;
   font-size: 26px;
   color: #464543;
   text-align: center;
   width: 500px;
   margin: 0 auto;
   border-bottom: #5990b9 1px solid;
}

.tit2 {
   height: 30px;
   line-height: 30px;
   font-size: 14px;
   text-align: center;
   color: #333;
   margin-bottom: 20px;
}

...