Hello! Hello everyone, today I would like to share with you the overall thinking and process of the web design of "Love Home".
Table of contents
1. Realize the effect:
2. Design idea:
The box model for the entire page.
The above is the overall box model of this project.
1. Web page header design:
The header box model of the web page is designed as above, and the header typesetting code is as follows:
<!-- 头部导航栏 -->
<div id="header">
<!-- 导航栏左半部分/logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航栏右半部分 -->
<div class="nav">
<!-- 导航条中左半部分 -->
<div class="left">
<ul>
<li><a href="">网页首页</a></li>
<li><a href="">床和床叠</a></li>
<li><a href="">卧室纺织品</a></li>
<li><a href="">灯具照明</a></li>
</ul>
</div>
<!-- 导航条中右半部分 -->
<div class="right">
<!-- 搜索框 -->
<div id="search">
<input type="text" value="" placeholder="请输入商品名称">
<div id="button">搜索</div>
</div>
</div>
</div>
</div>The header design code is as above, and the specific css code will be placed at the end of the article.
2. Web page content design:
The main module code of the webpage center, the specific code block is as follows:
<!-- 网页内容 -->
<div id="content">
<div id="box"></div>
<!-- 热门推荐 -->
<div id="main">
<div class="photo"></div>
<div class="content">
<dl>
<dt><img src="images/news1.jpg" alt=""></dt>
<h4>BEST贝达</h4>
<hr size="1px" color="grey" >
<dd><p>将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p></dd>
<div class="xian"><hr></div>
</dl>
</div>
<div class="content">
<dl>
<dt><img src="images/news2.jpg" alt=""></dt>
<h4>PONG波昂</h4>
<hr size="1px" color="grey" >
<dd><p>当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p></dd>
<div class="xian1"><hr></div>
</dl>
</div>
<div class="content">
<dl>
<dt><img src="images/news2.jpg" alt=""></dt>
<h4>GUNDE冈德尔</h4>
<hr size="1px" color="grey" >
<dd><p>一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p></dd>
<div class="xian1"><hr></div>
</dl>
</div>
</div>
<!-- 夏日生活 -->
<!-- main_bottom属性 -->
<div id="main_bottom">
<!-- 夏日生活的照片 -->
<div class="xia_photo">
<img src="images/shenghuo.png" alt="">
</div>
<!-- 图片展示 -->
<div class="photos"><img src="images/img1.jpg" alt=""></div>
<div class="photos"><img src="images/img2.jpg" alt=""></div>
<div class="photos"><img src="images/img3.jpg" alt=""></div>
</div>
</div>According to the overall design, the middle css has common parts, among which photos and content can be regarded as common parts to avoid code redundancy. Here I will focus on the box box, because in the design of the webpage, the editor inserted the background picture in the wrap, so that the background picture can be displayed as a whole typesetting, and a blank box box is added here, the purpose is to make the background picture appear come out.
3. Website foot design:
For this part, the editor directly uses the foot as a whole big box, and adds the <p> tag to the big box.
<!-- 网页页脚 -->
<div id="foot">
<p>爱家居版权所有2016-2026京ICP备2222222号 京公网安备22222222222</p>
</div>4. Sidebar design:
There is a sidebar in this part, and a picture is designed on the sidebar. The editor achieves a fixed effect according to the position: fixed attribute.
<div id="sidebar">
<img src="images/erweima.png" alt="">
</div>/* 侧边栏 */
#sidebar{
position: fixed;
bottom: 3%;
right: 0%;
float: right;
/* background-color: aqua; */
}3. Code collection:
Web Design:
<!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="css/comment.css">
<!-- 内部属性 -->
<link rel="stylesheet" href="css/aijiaju.css">
</head>
<body>
<!-- 网页外套-wrap -->
<div id="wrap">
<!-- 头部导航栏 -->
<div id="header">
<!-- 导航栏左半部分/logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航栏右半部分 -->
<div class="nav">
<!-- 导航条中左半部分 -->
<div class="left">
<ul>
<li><a href="">网页首页</a></li>
<li><a href="">床和床叠</a></li>
<li><a href="">卧室纺织品</a></li>
<li><a href="">灯具照明</a></li>
</ul>
</div>
<!-- 导航条中右半部分 -->
<div class="right">
<!-- 搜索框 -->
<div id="search">
<input type="text" value="" placeholder="请输入商品名称">
<div id="button">搜索</div>
</div>
</div>
</div>
</div>
<!-- 网页内容 -->
<div id="content">
<div id="box"></div>
<!-- 热门推荐 -->
<div id="main">
<div class="photo"></div>
<div class="content">
<dl>
<dt><img src="images/news1.jpg" alt=""></dt>
<h4>BEST贝达</h4>
<hr size="1px" color="grey" >
<dd><p>将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p></dd>
<div class="xian"><hr></div>
</dl>
</div>
<div class="content">
<dl>
<dt><img src="images/news2.jpg" alt=""></dt>
<h4>PONG波昂</h4>
<hr size="1px" color="grey" >
<dd><p>当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p></dd>
<div class="xian1"><hr></div>
</dl>
</div>
<div class="content">
<dl>
<dt><img src="images/news2.jpg" alt=""></dt>
<h4>GUNDE冈德尔</h4>
<hr size="1px" color="grey" >
<dd><p>一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p></dd>
<div class="xian1"><hr></div>
</dl>
</div>
</div>
<!-- 夏日生活 -->
<!-- main_bottom属性 -->
<div id="main_bottom">
<!-- 夏日生活的照片 -->
<div class="xia_photo">
<img src="images/shenghuo.png" alt="">
</div>
<!-- 图片展示 -->
<div class="photos"><img src="images/img1.jpg" alt=""></div>
<div class="photos"><img src="images/img2.jpg" alt=""></div>
<div class="photos"><img src="images/img3.jpg" alt=""></div>
</div>
</div>
<!-- 网页页脚 -->
<div id="foot">
<p>爱家居版权所有2016-2026京ICP备2222222号 京公网安备22222222222</p>
</div>
</div>
<div id="sidebar">
<img src="images/erweima.png" alt="">
</div>
</body>
</html> CSS code:
In CSS, because this web page layout can be directly applied to the template, I introduce the external css style into a public part and a private part.
The comment.css part of CSS:
*{
margin: 0;
padding: 0;
}
/* 设置页面body的属性 */
body{
/* background-color: pink; */
font-family: 楷体;
font-size: 30px;
margin: 0px auto;
padding: 0;
}
/* 网页外套 */
#wrap{
/* background-color: yellow; */
/* height: 1800px; */
width: 1000px;
margin:0px auto; /*水平垂直居中*/
}
/* 网页头部header属性 */
#header{
/* background-color: blue; */
height:100px;
/* width: 100%; */
}
/* 网页头部中logo属性 */
#header .logo{
/* background-color: aqua; */
width: 300px;
height: 100px;
float: left; /*左浮动*/
}
/* 网页头部nav的属性 */
#header .nav{
/* background-color: greenyellow; */
height: 100px;
width: 700px;
float: left;
}
/* nav中left的属性 */
#header .nav .left{
/* background-color: rgb(231, 21, 21); */
height: 50px;
width:510px;
float: left;
margin-left: 0px; /*距离盒子的距离*/
padding-top: 50px;
}
/* 导航栏中ul属性 */
#header .nav ul{
list-style-type: none; /*取消前面的点*/
float: left;
line-height: 30px;
}
#header .nav ul li{
/* background-color: #fff; */
/* float: left; */
margin-left: 20px;
text-align: center;
display: inline-block; /*展现方式——行内元素*/
color: black; /*字体颜色*/
font-size: 18px; /*字体字号*/
}
/* 导航栏中right的属性 */
#header .nav .right{
/* background-color: #fff; */
height: 100px;
width: 190px;
float: left;
}
#search{
position: relative;
padding-top:58px;
}
/* 搜索框输出 */
#search input{
width: 145px;
border: 2px solid #e2e2e2;
border-radius: 10px;
height: 20px;
float: left;
background-image: url(../images/search.jpg);
background-repeat: no-repeat;
background-size: contain;
color: #100c0c;
background-position:0px center;
padding:0 0 0 25px;
}
/* 搜索按钮 */
#button{
width: 40px;
height: 19px;
border-radius: 10px;
background: white;
color: black;
font-family: 楷体;
text-align: center;
line-height: 19px;
cursor: pointer;
font-size: 16px;
position: absolute;
right: 18px;
top:60px;
}
/* 超链接的属性 */
#header .nav ul li a{
text-decoration: none; /*下划线类型无*/
}
/* 未访问的链接颜色 */
#header .nav>ul>li>a:link{
color: yellow;
}
/* 鼠标移动到链接时的属性 */
#header .nav>ul>li>a:hover{
text-decoration: underline;
color: red;
}
/* 鼠标访问之后链接的属性 */
#header .nav>ul>li>a:visited{
/* text-decoration: none; */
color: blue;
}
/* 鼠标单击链接的属性 */
#header .nav>ul>li>a:active{
text-decoration: underline;
color: blueviolet;
}
#foot{
/* background-color: #fff; */
width:1000px;
height: 130px;
}
/* 侧边栏 */
#sidebar{
position: fixed;
bottom: 3%;
right: 0%;
float: right;
/* z-index:1; */
/* background-color: aqua; */
}Part of aijiju.css in CSS:
*{
margin: 0;
padding: 0;
}
#wrap{
background-image: url(../images/bg.png);
background-size: contain;
background-repeat: no-repeat;
}
#header .logo img{
width: 200px;
margin: 20px 40px;
}
/* 空盒子支撑背景照片 */
#box{
height: 420px;
}
/* main属性 */
#main{
/* background-color: rgba(206, 46, 46, 0.2); */
height: 645px;
width: 1000px;
}
/* 热门推荐的照片 */
#main .photo{
background-image: url(../images/dongtai.jpg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 139px;
}
/* content属性 */
#main .content{
/* background-color: rgb(248, 0, 0); */
height: 480px;
width: 310px;
float:left;
margin-right: 23px;
}
/* content中图片的属性 */
#main .content dl dt{
/* background-color: aqua; */
height: 300px;
padding: 10px 5px 10px;
}
/* content中标题的属性 */
#main .content dl h4{
padding-left: 15px;
font-size: 25px;
margin: 10px 0;
}
/* content中文字的属性 */
#main .content dl dd{
padding: 10px 15px 0px 15px;
font-size:16px;
line-height: 20px;
color: grey;
}
/* 渐变线*/
.xian>hr{
margin-top: 50px;
width: 100%;
border: 0;
height: 5px;
background-image: linear-gradient(to right, #9c9b9b 10%, #fffefe 45%, #9c9b9b 70%);
}
.xian1>hr{
width: 100%;
border: 0;
height: 5px;
margin-top: 10px;
background-image: linear-gradient(to right, #9c9b9b 10%, #fffefe 45%, #9c9b9b 70%);
}
/* main_bottom属性值 */
#main_bottom{
background-color: hsla(204, 55%, 83%, 0.707);
width: 1000px;
height: 500px;
overflow: hidden;
}
/* xia_photo属性 */
#main_bottom .xia_photo{
/* background-color: #4e1212; */
/* margin:20px 30px 0px 400px; */
padding:30px 400px 10px;
}
/* photos属性 */
#main_bottom .photos{
/* background-color: #fff; */
width: 275px;
height: 305px;
float: left;
margin-left: 45px;
}
/* 页脚设计 */
#foot{
background-image: url(../images/footer_bg.jpg);
background-repeat: repeat-x;
background-position:bottom ;
/* background-size: contain; */
}
#foot p{
text-align: center;
padding: 80px 200px 30px;
font-size: 18px;
color: white;
}The above is all the code collection of this project, and the materials such as pictures and texts will be placed below.
4. Material source code:
gitee：https://gitee.com/cheng1810/web-integrated-application.git
Aliyun drive: https://www.aliyundrive.com/s/pWPwA1ZPDKR Extraction code: jb64
The above is the summary and thoughts of the editor on the "Love Home" material this time, I hope it will be helpful to you. If there is something you don't understand, you can leave a message to the editor below. If there are deficiencies and mistakes, please point out, thank you.
It is not easy for the editor to sort out. If it is helpful to you, then give the editor a like. Your like is the greatest support and affirmation for the editor.