hello! Hello everyone. Today, I would like to share with you the thoughts and process of designing the "Speaking of Tourism" webpage. In this process, I added some small designs and ideas of my own.
Table of contents
1. Realize the effect:
2. Design idea:
Below I design the box model of the overall web page. Because I mainly want to practice the attributes of div and class tags at the beginning, I mostly prefer the box model. Of course, the specific details inside can also be used with some other tags to make the overall code more concise.
According to the UI design of the web page, it is divided into three parts. This box model is also a common template for web page layout.
1. Web page header design:
The head design of the web page uses this model for typesetting design.
<!-- 头部 -->
<div id="header">
<!-- logo -->
<span class="logo"><img src="images/logo.png" alt="" width="130px"></span>
<!-- 搜索框 -->
<div id="search">
<input type="text" value="请输入你想去的地方">
<div id="button">搜索</div>
</div>
<!-- 导航栏nav -->
<span class="nav">
<a href="">旅游首页 |</a>
<a href="">登录 |</a>
<a href="">注册</a>
</span>
</div>The design and layout code is as above, and the specific css code will be placed at the end of the article.
2. Web page main design:
I embed three small boxes inside the main box, and each small box will be analyzed below.
(1) Design of content1:
<!-- 第一部分 -->
<div id="content1">
<!-- 第一部分的左侧 -->
<div id="content1_left">
<img src="images/banner1.jpg" alt="">
</div>
<!-- 第一部分的右侧 -->
<div id="content1_right">
<!-- 标题 -->
<div id="title">
<span>说</span>
<span class="font">旅</span>
<span>游</span>
</div>
<!-- 文本内容 -->
<div id="text1">
<p> 伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁(Noonu Atoll)中,它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在,美丽而遗世独立。</p>
<p> 最佳旅游时间：<br>
<span class="mother">1月-12月</span>,热带海洋气候，全年皆适合旅游。<span class="mother">12月至次年4月</span>可避开高峰。
</p>
<p> 伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框<span class="detailed">……[详细]</span></p>
</div>
</div>
</div>(2) Design of content2:
<div id="content2">
<!-- 标题：马尔代夫伊露岛 -->
<div id="subtitle">
<h2>马尔代夫伊露岛：“伊露”上有你真好</h2>
<span class="date"> 2015.04.21 来源：一日游驴友群-老牛</span>
<hr size="2px" color="grey" width="100%">
</div>
<div id="text2">
<p> 伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框架，朴实的外边里面却十分的豪华，从卧室转到后面有一个很大的半露天花园，里面有只超大的按摩浴缸和露天的沐浴台，洗好澡穿上睡袍躺在这里拿本书，心情彻底放松。</p>
</div>
<div id="photo">
<img src="images/banner2.jpg" alt="">
</div>(3) Design of content3:
According to the UI design layout, the content layout application of the third part is the same, so we can design a template, and then others can share one.
<!-- 第三部分:评论 -->
<div id="content3">
<!-- icon图标 -->
<div id="icon">
<img src="images/icon.gif" alt="" height="35px">
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第一个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person1.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>HXZ9_IT</h4><span class="time">2015-4-2 15:38:37</span><br>
<p>第一次用途牛，太让我们惊喜了！真的很不错，行程安排的也很好！幸运的是，往返的飞机都没有延误！伊露岛的美，让我们的蜜月越发美满！<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第二个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person2.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>外星人</h4><span class="time">2015-3-2 15:38:37</span><br>
<p>岛还可以，就是沙屋有虫子，不太让人满意，水屋确实挺棒的。饭嘛，国外基本都那样吧，海鲜还行。<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第三个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person3.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>so_cool</h4><span class="time">2015-2-2 15:38:37</span><br>
<p>行程安排挺好的，挺喜欢伊露岛，岛上的人很热情，手机丢了小黑给找回来了，都很热情，会主动跟你招呼！<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
</div>The above is the design of the second part. Most of my code uses embedded boxes to achieve the desired visual effect. Of course you can use tags directly to achieve certain effects. It depends on individual circumstances.
3. Website footer design:
For this part, the editor directly uses the footer as a whole big box, and does not embed a small box.
<!-- 底部 -->
<div id="footer">
一日游网友意见留言板 <font color="black">电话：000-00000000</font> 欢迎批评指正<br>
公司简介|About YIRIYOU|广告服务|联系我们|招聘信息|网站律师|YIRIYOU English|注册|产品答疑|<br>
<font color="black">Copyright © 1996 - 2016 YIRIYOU.coright All Rights Reserved</font><br>
一日游公司 版权所有
</div>3. Code collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>说旅游</title>
<!-- 网页整体设计 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 网页外套 -->
<div id="wrap">
<!-- 头部 -->
<div id="header">
<!-- logo -->
<span class="logo"><img src="images/logo.png" alt="" width="130px"></span>
<!-- 搜索框 -->
<div id="search">
<input type="text" value="请输入你想去的地方">
<div id="button">搜索</div>
</div>
<!-- 导航栏nav -->
<span class="nav">
<a href="">旅游首页 </a>|
<a href="">登录 </a>|
<a href="">注册</a>
</span>
</div>
<!-- 分割线 -->
<br><hr size="3px" color="grey"><br>
<!-- 主要内容 -->
<div id="main">
<!-- 第一部分 -->
<div id="content1">
<!-- 第一部分的左侧 -->
<div id="content1_left">
<img src="images/banner1.jpg" alt="">
</div>
<!-- 第一部分的右侧 -->
<div id="content1_right">
<!-- 标题 -->
<div id="title">
<span>说</span>
<span class="font">旅</span>
<span>游</span>
</div>
<!-- 文本内容 -->
<div id="text1">
<p> 伊露岛（Iru Fushi）位于马尔代夫北部环礁——诺鲁环礁(Noonu Atoll)中,它是一座拥有醉人景色和浪漫气氛的小岛。晶莹的海水、绵白的沙滩、明媚的阳光、温馨的海边小屋、浪漫的海上落日。所有的一切似乎都为浪漫而存在,美丽而遗世独立。</p>
<p> 最佳旅游时间：<br>
<span class="mother">1月-12月</span>,热带海洋气候，全年皆适合旅游。<span class="mother">12月至次年4月</span>可避开高峰。
</p>
<p> 伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框<span class="detailed">……[详细]</span></p>
</div>
</div>
</div>
<!-- 第二部分 -->
<div id="content2">
<!-- 标题：马尔代夫伊露岛 -->
<div id="subtitle">
<h2>马尔代夫伊露岛：“伊露”上有你真好</h2>
<span class="date"> 2015.04.21 来源：一日游驴友群-老牛</span>
<hr size="2px" color="grey" width="100%">
</div>
<div id="text2">
<p> 伊露岛沙滩屋的构造很独特，彻底的南亚风情——雪白的圆形房子，尖尖的茅草屋顶，木质的框架，朴实的外边里面却十分的豪华，从卧室转到后面有一个很大的半露天花园，里面有只超大的按摩浴缸和露天的沐浴台，洗好澡穿上睡袍躺在这里拿本书，心情彻底放松。</p>
</div>
<div id="photo">
<img src="images/banner2.jpg" alt="">
</div>
</div>
<!-- 第三部分:评论 -->
<div id="content3">
<!-- icon图标 -->
<div id="icon">
<img src="images/icon.gif" alt="" height="35px">
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第一个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person1.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>HXZ9_IT</h4><span class="time">2015-4-2 15:38:37</span><br>
<p>第一次用途牛，太让我们惊喜了！真的很不错，行程安排的也很好！幸运的是，往返的飞机都没有延误！伊露岛的美，让我们的蜜月越发美满！<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第二个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person2.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>外星人</h4><span class="time">2015-3-2 15:38:37</span><br>
<p>岛还可以，就是沙屋有虫子，不太让人满意，水屋确实挺棒的。饭嘛，国外基本都那样吧，海鲜还行。<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
<!-- 第三个评论者 -->
<div id="comment">
<div id="person">
<img src="images/person3.jpg" alt="" height="150px">
</div>
<div id="comment_right">
<h4>so_cool</h4><span class="time">2015-2-2 15:38:37</span><br>
<p>行程安排挺好的，挺喜欢伊露岛，岛上的人很热情，手机丢了小黑给找回来了，都很热情，会主动跟你招呼！<br><br>
<font color="#F60">来自：一日游驴友www.yiriyou.com</font></p>
</div>
</div>
<hr size="2px" color="grey" width="100%">
</div>
</div>
<!-- 底部 -->
<div id="footer">
一日游网友意见留言板 <font color="black">电话：000-00000000</font> 欢迎批评指正<br>
公司简介|About YIRIYOU|广告服务|联系我们|招聘信息|网站律师|YIRIYOU English|注册|产品答疑|<br>
<font color="black">Copyright © 1996 - 2016 YIRIYOU.coright All Rights Reserved</font><br>
一日游公司 版权所有
</div>
</div>
</body>
</html>CSS code :
body{
background-color: rgba(147, 145, 145, 0.177);
margin: auto;
}
#wrap{
background-color: white;
margin: 0 auto;
height: fit-content;
width:1000px
}
/* 头部 */
#header{
width: 1000px;
/* background-color: rgba(13, 137, 231, 0.147); */
height: 70px;
}
.logo{
margin-top: 10px;
margin-left: 20px;
/* background: rgba(238, 2, 65, 0.718); */
position: absolute;
}
/* 搜索框 */
#search{
position: absolute;
width: 380px;
/* background-color: blueviolet; */
margin-left: 300px;
margin-top: 20px;
}
/* 搜索框输出 */
#search input{
width: 240px;
border: 2px solid #e2e2e2;
height: 36px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
color: #e2e2e2;
background-position:5px center;
padding:0 0 0 40px;
}
/* 搜索按钮 */
#button{
width: 96px;
height: 39px;
float: right;
background: rgb(0, 0, 0);
color: white;
font-family: 楷体;
text-align: center;
line-height: 35px;
cursor: pointer;
}
/* 右侧导航栏 */
.nav{
float: right;
font-family: 微软雅黑;
line-height: 15px;
margin: 30px 10px;
font-size: larger;
}
.nav a{
text-decoration: none;
color: black;
}
/* 主要内容 */
#main{
width: 1000px;
height:1000px;
/* background-color: aqua; */
}
/* 板块 */
#content1{
/* background-color: orange; */
height: 450px;
}
/* 第一部分左侧样式 */
#content1_left{
width:695px;
height:450px;
float:left;
margin-left: 5px;
}
/* 第一部分右侧样式 */
#content1_right{
width:300px;
float:right;
height:450px;
/* background-color: rgba(229, 16, 16, 0.934); */
}
/* “说旅游”标题样式 */
#title{
color: orange;
/* background-color: rgb(197, 127, 255); */
font-family: 微软雅黑;
font-size:xx-large;
font-weight: bold;
text-align: center;
width: 303px;
height:60px;
}
/* “旅”字样式 */
.font{
font-size: 50px;
}
/* 段落样式 */
#text1{
/* background-color: aqua; */
height: 370px;
margin-left: 10px;
margin-right: 10px;
font-family: 微软雅黑;
font-size: 16px;
line-height: 26px;
}
/* 段落文字样式 */
.mother{
font-weight: bolder;
font-style: italic;
color: green;
text-decoration: underline;
}
.detailed{
font-style: italic;
text-decoration: underline;
font-weight: bold;
color: orange;
}
/* 第二部分content */
#content2{
/* background-color: blue; */
height: 650px;
margin-top: 5px;
}
/* 内容标题 */
#subtitle{
height: 80px;
/* background-color: bisque; */
}
/* 日期 */
.date{
font-style: italic;
color: grey;
}
/* 内容 */
#text2{
/* background-color:azure; */
height: 60px;
margin-left: 10px;
margin-right: 10px;
font-family: 微软雅黑;
font-size: 16px;
line-height: 26px;
}
/* 照片盒子样式 */
#photo{
/* background-color: aquamarine; */
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
/* 第三部分:评论 */
#content3{
/* background-color: aquamarine; */
height: 590px;
margin-top: 10px;
}
/* 图片盒子样式 */
#icon{
height: 35px;
/* background-color: #fff; */
width: 200px;
}
/* 一个整体框架 */
#comment{
/* background-color: aliceblue; */
height: 160px;
}
/* 头像样式 */
#person{
/* background-color: antiquewhite; */
height: 150px;
float: left;
margin-left: 5px;
width: 150px;
}
/* 右侧介绍 */
#comment_right{
/* background-color: aqua; */
width:840px;
float: left;
height: 150px;
margin-left: 5px;
}
#comment_right h4{
float: left;
width: 70px;
/* background-color: rgb(255, 0, 0); */
color: orange;
}
.time{
/* background-color: black; */
float: left;
margin-top: 23px;
color:grey;
margin-left: 10px;
font-size: 14px;
}
#comment_right p{
margin-top: 43px;
line-height: 25px;
font-family: 微软雅黑;
font-size: 16px;
}
/* 网页底部 */
#footer{
/* background-color: rgb(255, 127, 146); */
height: 120px;
margin-top: 730px;
text-align: center;
color: rgba(6, 26, 248, 0.732);
font-size: 14px;
font-family:微软雅黑;
line-height: 28px;
font-size: 14px;
}4. Material source code
gitee：https://gitee.com/cheng1810/web-integrated-application.git
Alibaba cloud disk: Alibaba cloud disk share extraction code: 30ak
As I write this, the editor is about to say goodbye to you. For this project, there is no need to use css styles, and the design of the web page can be directly realized. You can also add the visual effects and designs you want to achieve based on this article.
The editor uses this platform to record the daily life of typing codes. If there are any mistakes and deficiencies, please point them out, thank you.