悦轩饼家-首页
网页设计[1]（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。...
·
网页设计[1]（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。
详情请参考：关于如何设计网站首页
在进行网站制作前，首先要进行网站页面的整体设计。一个网站是由若干个网页构成的，网页是用户访问网站的界面。因此，通常意义上的网站设计，即指的是网站中各个页面的设计。而网页设计中，最先提到的就是网页的布局。布局是否合理、美观，将直接影响到用户的阅读体验及访问时间。
效果图：
首页一般是有三大部分构成：页眉、主体、页脚（仅供参考!!!）
网页制作时应提前规划好布局，不可盲目的去写！！！
html部分：（仅供参考!!!）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="推广关键字" />
<meta name="description" content="网站介绍" />
<title>悦轩饼家</title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<!-- 页眉 -->
<nav class="container">
<a href="index.html">
<div class="nav-a"></div>
</a>
<div class="nav-b">
<span class="iconfont icon-weizhi"></span>
<div>
武汉市
</div>
<div>
切换城市
</div>
</div>
<!-- 导航栏 -->
<div class="nav-c">
<a href="index.html">
<div>
全部
</div>
</a>
<a href="dangao.html">
<div>
蛋糕
</div>
</a>
<a href="javascript:void(0);">
<div>
下午茶
</div>
</a>
<a href="javascript:void(0);">
<div>
手信
</div>
</a>
<a href="javascript:void(0);">
<div>
团购预约
</div>
</a>
<a href="gywom.html">
<div>
关于我们
</div>
</a>
</div>
<div class="nav-d">
<a href="javascript:void(0);">
<div>
<span class="iconfont icon-anquan"></span>
</div>
</a>
<a href="javascript:void(0);">
<div>
<span class="iconfont icon-sousuo1"></span>
</div>
</a>
<a href="car.html">
<div>
<span class="iconfont icon-goumaijilu"></span>
</div>
</a>
<a href="denglu.html">
<div>
<span class="iconfont icon-yonghu1"></span>
</div>
</a>
<div>
<span>联系我们</span>
</div>
</div>
</nav>
<!-- 主体 -->
<!-- banner -->
<div class="banner">
<div class="container" id="banners" style="box-sizing: border-box;">
<!-- <img src="img/banner.jpg"> -->
<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="bd">
<ul>
<li><a href="shangpinxiangqing.html" target="_blank"><img src="img/banner.jpg" /></a></li>
<li><a href="shangpinxiangqing.html" target="_blank"><img src="img/banner2.jpeg" /></a></li>
<li><a href="shangpinxiangqing.html" target="_blank"><img src="img/banner3.jpeg" /></a></li>
<li><a href="shangpinxiangqing.html" target="_blank"><img src="img/banner4.jpg" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
</div>
</div>
<!-- 产品类表 -->
<div class="chanpin">
<div class="container" id="tuwen">
<a href="">
<div class="tuwen-cc tuwen-cc-aa">
<img src="img/tea.png">
<p class="text-ss"><span>AFTERNOON TEA</span> 下午茶</p>
<p>"一杯咖啡，一份甜，一抹偷不走的时光"</p>
</div>
</a>
<a href="dangao.html">
<div class="tuwen-cc tuwen-cc-bb">
<img src="img/cake.png">
<p class="text-ss"><span>CAKE</span>蛋糕</p>
<p>"只有国王才有资格拥有的，享受众人给予的祝福"</p>
</div>
</a>
<a href="">
<div class="tuwen-cc tuwen-cc-aa">
<img src="img/souvenir.png">
<p class="text-ss"><span>SOUVENIR</span>手信</p>
<p>"不在于贵，一情义，一真诚"</p>
</div>
</a>
</div>
</div>
<!-- 图文混排 -->
<div class="container">
<h1>热卖商品</h1>
<ul>
<li>
<img src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
</ul>
<ul>
<li>
<img src="img/O1CN011qrPwE1xpNwgemFRW_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/O1CN01TEEVEV29nLbn0diKj_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/O1CN01VgtH0u1RaDAtjejCw_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
<li>
<img src="img/TB170zYIpXXXXaGaXXXXXXXXXXX_!!0-item_pic.jpg_468x468q75.jpg_.webp">
<p><span>￥198.00</span></p>
<p>悦轩饼家蛋糕/提来米苏</p>
<button type="button"><span>♡</span>收藏</button><a href="shangpinxiangqing.html"><button
type="button">加入购物车</button></a>
</li>
</ul>
</div>
<footer class="">
<div class="container" id="cc">
<div id="footer-aa">
<div id="footer-aa-a">
<p><a href="#">品牌动态</a></p><span>|</span>
<p><a href="#">生产经营资质</a></p><span>|</span>
<p><a href="#">企业合作</a></p><span>|</span>
<p><a href="#">发票申请</a></p><span>|</span>
<p><a href="#">平台规则</a></p><span>|</span>
<p><a href="#">帮助服务</a></p><span>|</span>
<p><a href="#">联系我们</a></p>
</div>
<div id="footer-aa-b">
<p>📞<a href="tel:4009996665">400-999-6665</a></p>
<p><a href="#">WEIBO</a></p>
<p><a href="#">WECHAT</a></p>
<p><a href="#">京东商城</a></p>
</div>
</div>
<div id="footer-bb">
<p>深圳市悦轩商城科技有限公司</p>
<p>粤ICP备1603939号-6</p>
<p>京公网安备440307020002399</p>
<p>公司地址：深圳市龙岗区坂田街道布龙399鸿生源工业园A座5楼</p>
</div>
</div>
</footer>
<!-- 引用jquery -->
<script src="js/jquery1.42.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.SuperSlide.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(".slideBox").slide({
mainCell: ".bd ul",
autoPlay: true
});
</script>
</body>
</html>
css部分：（仅供参考!!!）
* {
margin: 0;
padding: 0;
transition: all 0.5s;
}
::selection {
background-color: orange;
color: white;
}
.container {
overflow: auto;
width: 1200px;
margin: 0 auto;
/* min-width: 1200px; */
}
a {
color: white;
text-decoration: none;
}
nav {
width: 100%;
height: 60px;
padding: 15px 5px;
display: flex;
justify-content: space-around;
}
nav>div {
margin-top: 15px;
height: 30px;
line-height: 30px;
/* background-color: #3967FF; */
}
nav .nav-a {
width: 150px;
height: 60px;
margin-top: 0;
background-image: url(../img/logo.jpg);
background-repeat: no-repeat;
background-size: contain;
}
nav .nav-b {
width: 170px;
display: flex;
justify-content: space-between;
}
nav .nav-b span {
color: burlywood;
}
nav .nav-b div:nth-of-type(2) {
width: 80px;
text-align: center;
background-color: gainsboro;
color: white;
}
nav .nav-c {
width: 550px;
display: flex;
justify-content: space-around;
}
nav .nav-c a {
color: #333;
}
nav .nav-d {
width: 260px;
display: flex;
justify-content: space-between;
}
nav .nav-d a div {
width: 30px;
text-align: center;
border: 1px solid gray;
color: #333;
}
nav .nav-d a:nth-of-type(1) div {
color: pink;
border: 0px;
}
nav .nav-d a:nth-of-type(5) div {
width: 80px;
margin-right: 5px;
}
/* 主体样式 */
/* banner样式 */
.banner {
background-color: #DEB887;
}
.banner img {
width: 100%;
height: 100%;
}
.banner #banners {
box-sizing: border-box;
}
/* 产品类表样式 */
#tuwen {
display: flex;
justify-content: center;
}
#tuwen>a {
width: 33.33%;
}
.tuwen-cc {
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.tuwen-cc img {
width: 50%;
margin: 10% auto;
}
.tuwen-cc p {
text-align: center;
}
.tuwen-cc p:nth-of-type(2) {
margin-bottom: 50px;
}
.tuwen-cc-aa {
background-color: #EEE2C8;
}
.tuwen-cc-bb {
background-color: #DDC59D;
}
.tuwen-cc:hover {
opacity: 0.8;
}
/* 图文混排样式 */
h1 {
text-align: center;
margin-top: 30px;
font-family: '楷体';
color: orange;
}
h1:hover {
color: #333;
}
ul {
margin: 50px 0;
display: flex;
justify-content: space-between;
}
ul>li {
margin: 4px;
width: 270px;
list-style: none;
}
ul>li>img {
width: 270px;
border-radius: 5px;
}
ul>li>img:hover {
box-shadow: 1px 1px 3px 3px gainsboro;
}
ul>li>p>span {
color: red;
}
ul>li>p:nth-of-type(2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 10px 0;
color: #333333;
}
ul>li button {
width: 130px;
height: 30px;
margin: 0 2.5px;
background-color: white;
border: 1px solid gray;
border-radius: 5px;
}
ul>li>button>span {
margin: 0 10px;
color: red;
}
ul>li button:hover {
background-color: #ff6a00;
color: white;
border-color: #ff6a00;
}
ul>li>button:hover span {
color: white;
}
/* 页脚样式 */
footer,
footer a {
/* position: absolute;
bottom: 0px; */
background-color: #3e2d23;
color: white;
}
#cc {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
footer #footer-aa {
display: flex;
justify-content: space-around;
}
footer #footer-aa span {
color: gainsboro;
}
footer #footer-aa #footer-aa-a {
width: 60%;
display: flex;
justify-content: space-between;
}
footer #footer-aa #footer-aa-b {
width: 30%;
display: flex;
justify-content: space-between;
}
footer #footer-bb {
display: flex;
justify-content: space-around;
}
/* 轮播样式 */
/* css 重置 */
* {
margin: 0;
padding: 0;
list-style: none;
}
/* body {
background: #fff;
font: normal 12px/22px 宋体;
} */
img {
border: 0;
}
a {
text-decoration: none;
color: #333;
}
/* 本例子css */
.slideBox {
width: 1200px;
height: 540px;
overflow: hidden;
position: relative;
/* top: 0; */
border: 1px solid hidden;
}
.slideBox .hd {
height: 15px;
overflow: hidden;
position: absolute;
right: 5px;
bottom: 5px;
z-index: 1;
}
.slideBox .hd ul {
overflow: hidden;
zoom: 1;
float: left;
}
.slideBox .hd ul li {
float: left;
margin-right: 2px;
width: 15px;
height: 15px;
line-height: 14px;
text-align: center;
background: #fff;
cursor: pointer;
}
.slideBox .hd ul li.on {
background: #f00;
color: #fff;
}
.slideBox .bd {
position: relative;
height: 100%;
z-index: 0;
}
.slideBox .bd li {
zoom: 1;
vertical-align: middle;
margin: 0px;
}
.slideBox .bd img {
margin-top: -50px;
width: 1200px;
height: 540px;
display: block;
}
/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next {
position: absolute;
left: 3%;
top: 50%;
margin-top: -25px;
display: block;
width: 32px;
height: 40px;
background: url(../img/slider-arrow.png) -110px 5px no-repeat;
filter: alpha(opacity=50);
opacity: 0.5;
}
.slideBox .next {
left: auto;
right: 3%;
background-position: 8px 5px;
}
.slideBox .prev:hover,
.slideBox .next:hover {
filter: alpha(opacity=100);
opacity: 1;
}
.slideBox .prevStop {
display: none;
}
.slideBox .nextStop {
display: none;
}
喜欢的可以点赞♥支持一下！你的认可是我创作动力的源泉！！！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)