位置: IT常识 - 正文

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

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

推荐整理分享Web网页基于html、CSS设计——“爱家居”素材(html基础网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:基于html的网页设计,基于html的网站,html在web网页设计中的作用,用于web网页的html文件属于什么文件,html网页范例,基于web的网页设计,web页面采用html书写而成,基于html的网站,内容如对您有帮助,希望把文章链接给更多的朋友!

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

目录

一、实现效果:

二、设计思路:

1、网页header设计:

2、网页content设计:

3、网页foot设计:

4、侧边栏sidebar设计:

三、代码集合:

四、素材源码:


一、实现效果:

 

二、设计思路:

整个页面的盒子模型。

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

1、网页header设计:

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

<!-- 头部导航栏 --> <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>

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

2、网页content设计:Web网页基于html、CSS设计——“爱家居”素材(html基础网页)

    

 网页中心主体模块代码,具体代码块如下:

<!-- 网页内容 --> <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>

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

3、网页foot设计:

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

<!-- 网页页脚 --> <div id="foot"> <p>爱家居版权所有2016-2026京ICP备2222222号 京公网安备22222222222</p> </div>4、侧边栏sidebar设计:

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

<div id="sidebar"> <img src="images/erweima.png" alt=""> </div>/* 侧边栏 */#sidebar{ position: fixed; bottom: 3%; right: 0%; float: right; /* background-color: aqua; */}三、代码集合:

网页设计:

<!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代码:

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

CSS中comment.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; */}

CSS中aijiju.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;}

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

四、素材源码:

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

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

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/299344.html 转载请保留说明!

上一篇:一觉醒后ChatGPT 被淘汰了(一觉醒后浑身酸痛)

下一篇:vue实现文件上传(vue实现文件上传和下载)

  • 苹果xs max 屏幕太暗的原因(苹果xs max为啥屏幕一会亮一会暗)

    苹果xs max 屏幕太暗的原因(苹果xs max为啥屏幕一会亮一会暗)

  • 知乎评论怎么匿名(知乎评论的时候怎么匿名)

    知乎评论怎么匿名(知乎评论的时候怎么匿名)

  • 为什么快手推广作品还是没人看(为什么快手推广都是假人)

    为什么快手推广作品还是没人看(为什么快手推广都是假人)

  •  苹果手机调静音闹钟会叫的吗(苹果手机调静音微信视频会有铃声吗)

    苹果手机调静音闹钟会叫的吗(苹果手机调静音微信视频会有铃声吗)

  • 微信视频超过27M怎么发(微信视频超过多大发不了)

    微信视频超过27M怎么发(微信视频超过多大发不了)

  • 手机放洗衣机洗了怎么办(手机放洗衣机洗了有救吗)

    手机放洗衣机洗了怎么办(手机放洗衣机洗了有救吗)

  • 手机耳机孔进水了显示耳机模式(手机耳机孔进水坏了会自己恢复吗)

    手机耳机孔进水了显示耳机模式(手机耳机孔进水坏了会自己恢复吗)

  • 苹果手机此时无法下载app(苹果手机此时无法删除备份怎么回事)

    苹果手机此时无法下载app(苹果手机此时无法删除备份怎么回事)

  • 核验码是什么意思(核验码有效期多久)

    核验码是什么意思(核验码有效期多久)

  • 电脑连不上internet怎么回事(电脑连不上internet开不了机怎么办)

    电脑连不上internet怎么回事(电脑连不上internet开不了机怎么办)

  • wps文档怎么发送到qq群文件(wps文档怎么发送到企业微信)

    wps文档怎么发送到qq群文件(wps文档怎么发送到企业微信)

  • 苹果8手写输入法怎么设置(苹果8手写输入法怎么设置失灵)

    苹果8手写输入法怎么设置(苹果8手写输入法怎么设置失灵)

  • oppo闪充是插头还是线(oppo闪充插头和数据线必须配套)

    oppo闪充是插头还是线(oppo闪充插头和数据线必须配套)

  • 七天无理由退货是哪七天(七天无理由退货退款规则)

    七天无理由退货是哪七天(七天无理由退货退款规则)

  • 步步高家教机可以下载爱奇艺吗(步步高家教机可以恢复出厂设置吗)

    步步高家教机可以下载爱奇艺吗(步步高家教机可以恢复出厂设置吗)

  • 爱奇艺手机被别人绑定(爱奇艺手机别的人怎么登)

    爱奇艺手机被别人绑定(爱奇艺手机别的人怎么登)

  • 三星note10分辨率设置多少合适(三星note10分辨率要调多高)

    三星note10分辨率设置多少合适(三星note10分辨率要调多高)

  • 淘宝退回的红包在哪里(淘宝退回的红包怎么使用)

    淘宝退回的红包在哪里(淘宝退回的红包怎么使用)

  • 苹果可以隐藏app吗(苹果可以隐藏app的软件)

    苹果可以隐藏app吗(苹果可以隐藏app的软件)

  • 红米note7pro和红米note7外观一模一样吗(红米note7Pro和红米9哪个好)

    红米note7pro和红米note7外观一模一样吗(红米note7Pro和红米9哪个好)

  • 夏普电视无线投屏在哪打开(夏普电视无线投屏怎么用)

    夏普电视无线投屏在哪打开(夏普电视无线投屏怎么用)

  • 主板驱动需要更新吗(主板驱动需要更新吗,如何更新?)

    主板驱动需要更新吗(主板驱动需要更新吗,如何更新?)

  • 应用程序无法正常启动0xc000007bwin7解决方法(应用程序无法正常启动0xc000012d)

    应用程序无法正常启动0xc000007bwin7解决方法(应用程序无法正常启动0xc000012d)

  • 四川成都熊猫基地的小熊猫 (© Biosphoto/Alamy)(四川成都熊猫基地介绍)

    四川成都熊猫基地的小熊猫 (© Biosphoto/Alamy)(四川成都熊猫基地介绍)

  • 公转私做账麻烦吗
  • 交车险代收的车船费怎么做的科目呀?
  • 对公账户发工资怎么操作
  • 电子税务局怎么注册
  • 应付余额是负数怎么理解
  • 税控盘未清卡怎么办
  • 视同销售计入销售费用能税前扣除吗
  • 长期待摊费用税前扣除
  • 预缴增值税是否要预缴印花税
  • 厂家给经销商的授权书
  • 固定资产贷款利率
  • 领用包装物会计处理
  • 工资表不给看
  • 纳税调整后所得怎么算
  • 企业所得税税前扣除异常
  • 增值税普票销售方无开户行账号是否可以
  • 资产负债一并转让增值税
  • 1697510840
  • 办税员可以增加办税员吗
  • 个体户能给自己交五险吗
  • 飞机票开电子发票是电子行程单吗
  • 工程施工预付账款会计分录
  • 预缴税款怎么做账务处理
  • 公众号采集文章手机操作
  • php创建表单
  • 苹果7旧换新
  • 专项用途财政性资金纳税调整明细表
  • 销售旧设备如何开票
  • electron静默打印
  • 我老公有外遇了,我很爱他,我该怎么办
  • Sa-Token v.1.31.0 新增拦截器 SaInterceptor 功能说明,以及旧代码迁移示例
  • 二手车过户需要带什么资料
  • 公司偷税漏税有哪些表现形式
  • yii2 resetful 授权验证详解
  • 医疗知识科普图片
  • 企业所得税申报表A类
  • 应付职工薪酬是负数是什么意思
  • 微信开发怎么实现
  • 小说《从零开始》
  • 开具负数发票的流程
  • python怎么安装lxml库
  • php curl_init
  • discuz安装使用教程
  • 记账凭证的主要作用有
  • 残疾人保证金的滞纳金怎么计算
  • 购买汽车相关费用标准
  • vue整合electron
  • 海关进口增值税专用缴款书如何抵扣
  • 公司pos机使用规范
  • 商品发生报废如何处罚
  • 会计科目累计摊销
  • 个人独资企业应税生产经营所得可以扣除税金支付
  • 事业单位取暖费2023
  • 电子设备折旧残值率
  • 其他应收款科目核算哪些业务
  • sql server使用的是什么逻辑模型
  • 数据库中经常用的函数
  • solaris更改文件权限
  • windows软件删除
  • win7桌面图标无法拖到任务栏
  • win10总是弹窗广告
  • 优麒麟 apk
  • win7关闭操作中心图标
  • win10蓝屏故障
  • windows8兼容性
  • 惠普笔记本的BIOS键
  • ubuntu 编译ffmpeg
  • perl正则表达式匹配 \w \s
  • cocos2dx小游戏
  • [置顶]公主大人接下来是拷问时间31
  • 通过Tabs方法基于easyUI+bootstrap制作工作站
  • django documentation
  • unity提高渲染画质
  • unityui渲染顺序
  • 可分割项目
  • 燃气号如何查询
  • 如何开具税收缴纳证明
  • 秀屿区国税局服务电话
  • 润泽一词出自哪里
  • 税收优惠政策有经营和居民住宅出租
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设