Hello！大家好。今天小编给大家分享一下关于“彼岸の花”网站设计时的思路和过程。
目录
一、实现效果：
二、设计思路：
这个网页的设计架构也是很简单，小编就不再画盒子模型了，直接放源码了。
html样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网上花店</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 网页外套 -->
<div id="wrap">
<!-- 网页头部 -->
<div id="header">
<!-- 彼岸の花 -->
<div class="title">
彼岸の花
</div>
<!-- 偏安一隅，静静生活 -->
<div class="subtitle">偏安一隅，静静生活</div>
</div>
<!-- 分割线 -->
<hr size="4px" color="gray" >
<!-- 主要内容 -->
<div id="main">
<!-- 商品分类 -->
<span class="fenlei">
商品分类 >
</span>
<div class="photo1">
<img src="images/banner.jpg" alt="">
</div>
<!-- 美文 -->
<div class="text">
<!-- 我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳 -->
<div class="text1">
我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳...
</div>
<!-- I love flowers, quietly open, never quiet. Little flowers, with the same fragrance... -->
<div class="text2">
I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...
</div>
</div>
<!-- 新品照片 -->
<div class="content">
<img src="images/bestseller1.png" alt="">
<img src="images/bestseller2.jpg" alt="">
<div class="content1">
多肉植物是指植物营养器官肥大的高等植物，通常具根、茎、叶三种营养器官和花、果实、种子三种繁殖器官。在园艺上，又称肉质植物或多肉花卉，但以多肉植物这个名称最为常用。
</div>
<div class="content1">
<span class="text3">全世界共有多肉植物一万余种，</span>它们绝大部分属于高等植物（绝大多数是被子植物）。植物上隶属几十个科，个别专家认为有67个科中含有多肉植物，但大多数专家认为只有50余科。
</div>
</div>
<!-- 分割线 -->
<hr size="4px" color="grey" width="600px">
<!-- 底部 -->
<div class="foot">
<div class="foot_left">
<img src="images/tuxiang.gif" alt="">
</div>
<div class="foot_right">
品质保障 | 七天无理由退换货 | 特色服务体验 | 帮助中心
<br><span class="dianzhu">店主：Michael_唐僧</span>
<p><em>飞舞的花儿像一首诗，写着秋天的心事。带着相思，轻轻，轻轻，飘向大地！<br>
也许这只是秋季里的一场游戏。</em></p>
</div>
</div>
</div>
</div>
</body>
</html>css样式：
#wrap{
background-color: rgb(201, 201, 201);
width: 1200px;
height: 1540px;
padding-top: 0px;
margin: 0px auto;
color: gray;
font-family: "楷体";
}
#header{
/* background-color: aqua; */
height: 70px;
font-family: "楷体";
color:gray;
}
#header .title{
/* background-color: blue; */
padding: 15px 0px;
float: left;
width: 50%;
font-size: 40px;
text-align: end;
}
#header .subtitle{
/* background-color:brown; */
float: right;
width: 50%;
font-size: 30px;
margin-top: 25px;
}
#main{
/* background-color:burlywood; */
height: 1320px;
}
#main .fenlei{
font-size: 20px;
font-family: "黑体";
font-weight: bolder;
}
#main .photo1{
/* background-color: rgb(108, 51, 51); */
height: 550px;
}
#main .photo1 img{
padding: 10px 0px;
width: 1200px;
}
#main .text{
/* background-color: rgb(44, 125, 139); */
height: 90px;
margin-top: 10px;
text-align: center;
font-size: 25px;
}
#main .text .text1{
width:850px;
height:30px;
/* background-color: aliceblue; */
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
line-height: 40px;
/* display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertica; */
/* white-space: nowrap;强制文本在一行出现 */
}
#main .text .text2{
line-height: 40px;
margin-top: 10px;
}
#main .content{
height:650px;
/* background-color: rgb(221, 15, 15); */
}
.content img{
margin:0px auto;
padding: 5px 300px 5px 300px;
}
.content .content1{
padding: 5px 300px 5px 300px;
line-height: 22px;
text-indent: 2em;
}
.content .content1 .text3{
text-decoration: underline;
}
.foot{
height: 100px;
/* background-color: rgb(35, 187, 65); */
}
.foot .foot_left{
margin-left:300px;
padding:0px 10px;
/* background-color: rgb(25, 10, 230); */
width: 100px;
float: left;
}
.foot_left img{
height:100px
}
.foot .foot_right{
float: left;
}
.foot_right .dianzhu{
line-height: 25px;
font-family: "宋体";
font-weight: bolder;
}
.foot_right p{
margin-top: 5px;
line-height: 25px;
}三、素材源码：
gitee网站：https://gitee.com/cheng1810/web-integrated-application.git；
阿里云盘：阿里云盘分享 提取码：09rn
以上就是小编对本次素材的总结和敲码日常，如果对你有帮助，那么给小编点个赞吧。
如果有错误和不足之处，请指出，谢谢。