网页效果图代码框架HTML代码!DOCTYPE html html head meta charsetutf-8 / title爱家居-首页/title link relstylesheet typetext/css hrefcss/style.css/ /head body !--导航与banner版块 begin-- div idheader !-- LOGO区 begin -- div classlogoimg srcimg/logo.png alt/div !-- LOGO区 end -- !-- 导航菜单区 begin -- div classnav ul lia href网站首页/a/li lia href床和床垫/a/li lia href卧室纺织品/a/li lia href灯具照明/a/li /ul /div !-- 导航菜单区 end -- !-- 搜索区 begin -- div classsearch form action input typetext namekeyword classkeyword placeholder输入商品名称 !-- input typesubmit value搜索 -- /form /div !-- 搜索区 end -- /div !--导航与banner版块 end-- !--热门推荐版块 begin-- div idnews !-- 标题区 begin -- div classtitleimg srcimg/dongtai.jpg alt/div !-- 标题区 end -- !-- 内容区 begin -- div classnews_cont clearfix !-- 推荐1 begin -- div classitem img srcimg/news1.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐1 end -- !-- 推荐2 begin -- div classitem img srcimg/news2.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐2 end -- !-- 推荐3 begin -- div classitem img srcimg/news3.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐3 end -- /div !-- 内容区 end -- /div !--热门推荐版块 end-- !-- 夏日生活板块仅保留图片删除所有文字 -- div idbusiness div classtitle img srcimg/shenghuo.png alt夏日生活 width636 height88 /div div classbusiness_cont clearfix !-- 仅保留图片删除h3/p/a/icon等文字/按钮元素 -- div classbusiness_item img srcimg/img1.jpg alt夏日生活图片1 /div div classbusiness_item img srcimg/img2.jpg alt夏日生活图片2 /div div classbusiness_item img srcimg/img3.jpg alt夏日生活图片3 /div /div /div !-- 底部版权版块 -- div idfooter div classfooter_cont p爱家居 版权所有 |2016-2026 京ICP备222222号网站备案号 京公网安备222222222/p /div /div /body /htmlcss代码*{ margin: 0; padding: 0; } body{ font-family: 微软雅黑; background-color: #fdfdfd; } a{ text-decoration: none; /*去掉下划线*/ } li{ list-style-type: none; /*取消默认的列表符号*/ } /*定义.clearfix样式用于解决父盒子高度塌陷问题*/ .clearfix:after{ content:; display:block; clear:both; } /*导航与banner版块*/ #header{ width:1200px; height: 627px; background: url(../img/bg.png) no-repeat; margin:0 auto; /*设置盒子左右margin为auto,使盒子居中显示*/ } .logo,.nav,.search{ float: left; } .logo{ width:129px; height: 47px; margin-left: 100px; } .nav{ width:600px; /* margin-top: 23px; */ } .nav li{ float: left; width: 150px; text-align: center; font-size: 16px; /* margin-top: 23px; */ padding-top:23px; } .nav li a{ color:#333; } .nav li a:hover{ color:#ffaa00; } .search{ width:200px; margin-top: 20px; margin-left:20px; } .search .keyword{/* 搜索框的样式 */ width:200px; height: 22px; /* background-color: #fff; background-image:url(../img/f.png); background-repeat: no-repeat; background-position: 6px center; */ background:#fff url(../img/f.png) no-repeat 6px center; border-radius: 20px; /* 圆角半径 */ border:none; /* 取消边框 */ text-indent: 23px; color: #999; /*padding-left: 23px; width:177px;*/ } /* 热门推荐版块 */ #news{ width:1200px; margin:0 auto; } #news .title{ width:636px; height: 88px; margin:3px auto 6px; } #news .news_cont{ } #news .news_cont .item{ width:300px; margin-left:80px; float: left; } #news .item h4{ font-size:16px; line-height: 36px; border-bottom: 1px solid #ccc; } #news .item .intro{ font-size:12px; color:#999; line-height: 25px; margin-top:5px; margin-bottom:10px; } #news .item .line{ height: 5px; background: url(../img/yinying.jpg) no-repeat; } /* 夏日生活板块样式 */ #business { width: 1200px; margin: 60px auto; padding: 30px 0; background-color: #e6edf3; border-radius: 10px; } #business .title { width: 636px; height: 88px; margin: 0 auto 20px; text-align: center; } #business .title img { display: block; max-width: 35%; /* 不超过容器宽度 */ height: auto; /* 高度自动按比例计算 */ margin: 0 auto; /* 让图片居中可选 */ } #business .business_cont { width: 100%; padding: 0 50px; } #business .business_item { width: 300px; /* 和效果图图片宽度匹配 */ float: left; margin: 0 40px; text-align: center; } #business .business_item img { width: 100%; height: auto; /* 保持图片比例 */ display: block; border: none; } /* 底部版权版块样式*/ #footer{ width: 1200px; height: 90px; background-color: #19388A; margin: 50px auto 0; /* 上下间距左右居中实现左右留空白 */ /* 关键为锯齿做定位准备 */ position: relative; overflow: hidden; } /* 伪元素实现顶部倒三角锯齿 */ #footer::before { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 15px; /* 锯齿高度可调整 */ /* 两个渐变组合出连续倒三角 */ background: linear-gradient(45deg, transparent 50%, #fdfdfd 50%), linear-gradient(135deg, #fdfdfd 50%, transparent 50%); background-size: 20px 15px; /* 每个锯齿的宽度(20px)和高度(15px) */ } #footer .footer_cont{ width:1200px; margin:0 auto; text-align: center; padding-top: 30px; } #footer .footer_cont p{ font-size: 12px; color: #ccc; line-height: 30px; } /* 通用补全图片自适应 超链接hover */ img{ display: block; /* 去掉图片默认空隙 */ } a:hover{ cursor: pointer; }素材库
网页设计案例（含完整代码）
网页效果图代码框架HTML代码!DOCTYPE html html head meta charsetutf-8 / title爱家居-首页/title link relstylesheet typetext/css hrefcss/style.css/ /head body !--导航与banner版块 begin-- div idheader !-- LOGO区 begin -- div classlogoimg srcimg/logo.png alt/div !-- LOGO区 end -- !-- 导航菜单区 begin -- div classnav ul lia href网站首页/a/li lia href床和床垫/a/li lia href卧室纺织品/a/li lia href灯具照明/a/li /ul /div !-- 导航菜单区 end -- !-- 搜索区 begin -- div classsearch form action input typetext namekeyword classkeyword placeholder输入商品名称 !-- input typesubmit value搜索 -- /form /div !-- 搜索区 end -- /div !--导航与banner版块 end-- !--热门推荐版块 begin-- div idnews !-- 标题区 begin -- div classtitleimg srcimg/dongtai.jpg alt/div !-- 标题区 end -- !-- 内容区 begin -- div classnews_cont clearfix !-- 推荐1 begin -- div classitem img srcimg/news1.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐1 end -- !-- 推荐2 begin -- div classitem img srcimg/news2.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐2 end -- !-- 推荐3 begin -- div classitem img srcimg/news3.jpg alt h4BEST贝达/h4 p classintro将杂乱无章的物品收纳到视线之外在玻璃柜门后展示自己的心爱之物/p p classline/p /div !-- 推荐3 end -- /div !-- 内容区 end -- /div !--热门推荐版块 end-- !-- 夏日生活板块仅保留图片删除所有文字 -- div idbusiness div classtitle img srcimg/shenghuo.png alt夏日生活 width636 height88 /div div classbusiness_cont clearfix !-- 仅保留图片删除h3/p/a/icon等文字/按钮元素 -- div classbusiness_item img srcimg/img1.jpg alt夏日生活图片1 /div div classbusiness_item img srcimg/img2.jpg alt夏日生活图片2 /div div classbusiness_item img srcimg/img3.jpg alt夏日生活图片3 /div /div /div !-- 底部版权版块 -- div idfooter div classfooter_cont p爱家居 版权所有 |2016-2026 京ICP备222222号网站备案号 京公网安备222222222/p /div /div /body /htmlcss代码*{ margin: 0; padding: 0; } body{ font-family: 微软雅黑; background-color: #fdfdfd; } a{ text-decoration: none; /*去掉下划线*/ } li{ list-style-type: none; /*取消默认的列表符号*/ } /*定义.clearfix样式用于解决父盒子高度塌陷问题*/ .clearfix:after{ content:; display:block; clear:both; } /*导航与banner版块*/ #header{ width:1200px; height: 627px; background: url(../img/bg.png) no-repeat; margin:0 auto; /*设置盒子左右margin为auto,使盒子居中显示*/ } .logo,.nav,.search{ float: left; } .logo{ width:129px; height: 47px; margin-left: 100px; } .nav{ width:600px; /* margin-top: 23px; */ } .nav li{ float: left; width: 150px; text-align: center; font-size: 16px; /* margin-top: 23px; */ padding-top:23px; } .nav li a{ color:#333; } .nav li a:hover{ color:#ffaa00; } .search{ width:200px; margin-top: 20px; margin-left:20px; } .search .keyword{/* 搜索框的样式 */ width:200px; height: 22px; /* background-color: #fff; background-image:url(../img/f.png); background-repeat: no-repeat; background-position: 6px center; */ background:#fff url(../img/f.png) no-repeat 6px center; border-radius: 20px; /* 圆角半径 */ border:none; /* 取消边框 */ text-indent: 23px; color: #999; /*padding-left: 23px; width:177px;*/ } /* 热门推荐版块 */ #news{ width:1200px; margin:0 auto; } #news .title{ width:636px; height: 88px; margin:3px auto 6px; } #news .news_cont{ } #news .news_cont .item{ width:300px; margin-left:80px; float: left; } #news .item h4{ font-size:16px; line-height: 36px; border-bottom: 1px solid #ccc; } #news .item .intro{ font-size:12px; color:#999; line-height: 25px; margin-top:5px; margin-bottom:10px; } #news .item .line{ height: 5px; background: url(../img/yinying.jpg) no-repeat; } /* 夏日生活板块样式 */ #business { width: 1200px; margin: 60px auto; padding: 30px 0; background-color: #e6edf3; border-radius: 10px; } #business .title { width: 636px; height: 88px; margin: 0 auto 20px; text-align: center; } #business .title img { display: block; max-width: 35%; /* 不超过容器宽度 */ height: auto; /* 高度自动按比例计算 */ margin: 0 auto; /* 让图片居中可选 */ } #business .business_cont { width: 100%; padding: 0 50px; } #business .business_item { width: 300px; /* 和效果图图片宽度匹配 */ float: left; margin: 0 40px; text-align: center; } #business .business_item img { width: 100%; height: auto; /* 保持图片比例 */ display: block; border: none; } /* 底部版权版块样式*/ #footer{ width: 1200px; height: 90px; background-color: #19388A; margin: 50px auto 0; /* 上下间距左右居中实现左右留空白 */ /* 关键为锯齿做定位准备 */ position: relative; overflow: hidden; } /* 伪元素实现顶部倒三角锯齿 */ #footer::before { content: ; position: absolute; top: 0; left: 0; width: 100%; height: 15px; /* 锯齿高度可调整 */ /* 两个渐变组合出连续倒三角 */ background: linear-gradient(45deg, transparent 50%, #fdfdfd 50%), linear-gradient(135deg, #fdfdfd 50%, transparent 50%); background-size: 20px 15px; /* 每个锯齿的宽度(20px)和高度(15px) */ } #footer .footer_cont{ width:1200px; margin:0 auto; text-align: center; padding-top: 30px; } #footer .footer_cont p{ font-size: 12px; color: #ccc; line-height: 30px; } /* 通用补全图片自适应 超链接hover */ img{ display: block; /* 去掉图片默认空隙 */ } a:hover{ cursor: pointer; }素材库
