Web网页基于html、CSS设计——“爱家居”素材

发布时间：2024-11-20 12:20

HTML/CSS是网页设计的基础 #生活知识# #科技生活# #编程学习#

Hello！大家好，今天给大家分享一下关于“爱家居”网页设计的整体思路和流程。

一、实现效果：

二、设计思路：

1、网页header设计：

2、网页content设计：

3、网页foot设计：

4、侧边栏sidebar设计：

三、代码集合：

四、素材源码：

一、实现效果：

二、设计思路：

整个页面的盒子模型。

以上就是本次项目整体的盒子模型。

网页头部盒子模型如上设计，header排版代码如下：

</div>

<ul>

<li><a href="">卧室纺织品</a></li>

</ul>

</div>

</div>

头部设计代码如上，具体的css代码将放在文章末。

2、网页content设计：

网页中心主体模块代码，具体代码块如下：

<dl>

<h4>BEST贝达</h4>

<dd><p>将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p></dd>

</dl>

</div>

<dl>

<h4>PONG波昂</h4>

<dd><p>当孩子能做大人做的事，他们会觉得自己很特别也很重要。这也是我们打造PONG波昂儿童扶手椅的原因。现在你们可以并排坐在一起尽情放松了。</p></dd>

</dl>

</div>

<dl>

<h4>GUNDE冈德尔</h4>

<dd><p>一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p></dd>

</dl>

</div>

</div>

</div>

按照整体的设计，中间的css是有公共的部分，其中photos、content可以当做公共的部分，来避免代码的冗余。在这里着重说一下box盒子，因为在网页的设计中小编在wrap中插入了背景图片，而让背景图片能呈现出来整体排版，在这里添加了空白的盒子box，目的是为了让背景图片呈现出来。

对于这一部分，小编直接使用foot一个整体大盒子，在大盒子中添加了<p>标签。

</div>

在这一部分有一个侧边栏，侧边栏的设计一张图片，小编根据position:fixed属性实现固定的效果。

</div>

#sidebar{

position: fixed;

bottom: 3%;

right: 0%;

float: right;

}

三、代码集合：

网页设计：

<!DOCTYPE html>

<head>

</head>

<body>

</div>

<ul>

<li><a href="">卧室纺织品</a></li>

</ul>

</div>

</div>

<dl>

<h4>BEST贝达</h4>

<dd><p>将杂乱无章的物品收纳到视线之外，在玻璃柜门后展示自己的心爱之物！</p></dd>

</dl>

</div>

<dl>

<h4>PONG波昂</h4>

</dl>

</div>

<dl>

<h4>GUNDE冈德尔</h4>

<dd><p>一把椅子蕴含多少亮点？这一款，就值得你多看几眼。它可以折叠，但也很安全。它可以承受100公斤的重量，但是本身却很轻盈。</p></dd>

</dl>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

CSS代码：

在CSS中，因为这个网页排版布局可以直接套用模板，所以我将css外部样式引入一个公共部分和私有部分。

CSS中comment.css部分：

margin: 0;

padding: 0;

}

body{

font-family: 楷体;

font-size: 30px;

margin: 0px auto;

padding: 0;

}

#wrap{

width: 1000px;

margin:0px auto;

}

#header{

height:100px;

}

#header .logo{

width: 300px;

height: 100px;

float: left;

}

#header .nav{

height: 100px;

width: 700px;

float: left;

}

#header .nav .left{

height: 50px;

width:510px;

float: left;

margin-left: 0px;

padding-top: 50px;

}

#header .nav ul{

list-style-type: none;

float: left;

line-height: 30px;

}

#header .nav ul li{

margin-left: 20px;

text-align: center;

display: inline-block;

color: black;

font-size: 18px;

}

#header .nav .right{

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-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{

color: blue;

}

#header .nav>ul>li>a:active{

text-decoration: underline;

color: blueviolet;

}

#foot{

width:1000px;

height: 130px;

}

#sidebar{

position: fixed;

bottom: 3%;

right: 0%;

float: right;

}

CSS中aijiju.css的部分：

margin: 0;

padding: 0;

}

#wrap{

background-size: contain;

background-repeat: no-repeat;

}

#header .logo img{

width: 200px;

margin: 20px 40px;

}

#box{

height: 420px;

}

#main{

height: 645px;

width: 1000px;

}

#main .photo{

background-position: center;

background-size: contain;

background-repeat: no-repeat;

height: 139px;

}

#main .content{

height: 480px;

width: 310px;

float:left;

margin-right: 23px;

}

#main .content dl dt{

height: 300px;

padding: 10px 5px 10px;

}

#main .content dl h4{

padding-left: 15px;

font-size: 25px;

margin: 10px 0;

}

#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{

background-color: hsla(204, 55%, 83%, 0.707);

width: 1000px;

height: 500px;

overflow: hidden;

}

#main_bottom .xia_photo{

padding:30px 400px 10px;

}

#main_bottom .photos{

width: 275px;

height: 305px;

float: left;

margin-left: 45px;

}

#foot{

background-repeat: repeat-x;

background-position:bottom ;

}

#foot p{

text-align: center;

padding: 80px 200px 30px;

font-size: 18px;

color: white;

}

以上就是本次项目的所有的代码集合，图片文字等素材将放在下面。

四、素材源码：

gitee：https://gitee.com/cheng1810/web-integrated-application.git

阿里云盘 : https://www.aliyundrive.com/s/pWPwA1ZPDKR 提取码: jb64

以上就是小编本次对“爱家居”素材的总结和思路，希望对你有帮助。如果有哪里不明白的地方，可以在下面给小编留言。如有不足和错误之处，请指出，谢谢。

小编整理不易，如果对你有帮助，那么给小编点个赞吧，你的点赞就是对小编最大的支持和肯定。

网址：Web网页基于html、CSS设计——“爱家居”素材 https://www.yuejiaxmz.com/news/view/153762

上一篇：生活太无聊？50个居家装饰DIY

下一篇：室内家居装饰学教程（完整版）

Web网页基于html、CSS设计——“爱家居”素材

一、实现效果：

二、设计思路：

三、代码集合：

四、素材源码：

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享