检验自己一个月的学习成果，实现的是静态页面（小白学习一个月的成果）

欢迎各位大神参考和指点

PC端

目标效果：

 代码实现：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/style.css">
</head>
<body><!-- 头部导航栏 --><div id="header"><h1><img src="data:images/001.png" alt=""></h1><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">我们的服务</a></li><li><a href="#">客户案例</a></li><li><a href="#">联系我们</a></li></ul><img src="data:images/002.png" alt=""></div><!-- 轮播图 --><div id="banner"></div><!-- 业务服务 service --><div id="ser"><div class="ser-box1"><img src="data:images/004.png" alt=""><h3>创意网站建设</h3><p>企业网站建设<br>品牌网站建设<br>电子商务网站<br>Minisite活动站</p></div><div class="ser-box2"><img src="data:images/004.png" alt=""><h3>网络整合营销</h3><p>微信营销推广<br>企业社交管理<br>网络活动策划<br>搜索引擎优化</p></div><div class="ser-box3"><img src="data:images/004.png" alt=""><h3>移动APP开发</h3><p>iPhone应用开发<br>Android应用开发<br>APP界面设计<br>平板应用设计开发</p></div><div class="ser-box4"><img src="data:images/004.png" alt=""><h3>电商运营外包</h3><p>天猫旗舰店代运营<br>网店装修设计<br>网店策划&推广<br>电商平台入驻申请</p></div><div class="ser-box5"><img src="data:images/004.png" alt=""><h3>网站运营维护</h3><p>页面内容修改&添加<br>程序功能修改和维护<br>空间&服务器租用<br>企业邮箱&域名注册</p></div><div class="ser-box6"><img src="data:images/004.png" alt=""><h3>程序开发</h3><p>企业OA系统<br>CRP客户管理系统<br>人力资源管理系<br>ERP系统</p></div></div><!-- 案例Case --><div id="case"><h2>Case <span>案例</span></h2><div class="case-box1"><img src="data:images/005.png" alt=""><h3>富士通Fujitsu(中国)计算机</h3><p>Fujitsu(富士通)公司上世纪70年代进入中国，在计算机平台产品、软件与解决方案、通信、半导体以及高新技术的研究开发等领域...<span>MORE >></span></p></div><div class="case-box2"><img src="data:images/05-case_03.jpg" alt=""><h3>果朋网个性化APP推荐社区</h3><p>基于个人兴趣喜好的APP推荐社区，让用户更便捷、快速的找到自己喜欢和需要的APP应用，并和好友分享交流APP信息。果朋网的核心价...<span>MORE >></span></p></div><div class="case-box3"><img src="data:images/05-case3_05.jpg" alt=""><h3>SeeBond视邦眼镜</h3><p>上海视邦光学眼镜有限公司成立于2004年，是专业的品牌眼镜代理公司，一直致力于国际品牌眼镜的销售和推广，提供客户高端优质的...<span>MORE >></span></p></div><img style="margin-left: 10px" src="data:images/05-case4_03.jpg" alt=""></div><!-- 客户client --><div id="client"><h2>Client <span>客户</span></h2><div class="c-box1"><img src="data:images/006.png" alt=""></div><div class="c-box2"><img src="data:images/006.png" alt=""></div><div class="c-box3"><img src="data:images/006.png" alt=""></div><div class="c-box4"><img src="data:images/006.png" alt=""></div><div class="c-box5"><img src="data:images/006.png" alt=""></div><div class="about"><h4>关于我们</h4><h5>织梦58—专业的织梦模板下载站</h5><p>织梦58成立于2013年，是一家专注于高端网站建设和品牌传播的网络服务机构。多年的磨练，使我们在创意设计．营销推广到技术研发拥有了丰富经验，我们擅长倾听企业需求，挖掘品牌核心价值，整合高质量设计和最新技术，为您打造有价值的创意设计体验。</p><br><br><br><p>核心团队拥有超过8年行业经验的资深团队，涵盖创意，策略，技术等各领域专业人才，我们坚信每一个成功项目是良好团队合作的成果，为客户提供专业有效的网络解决方案。</p><span>了解更多>></span></div><div class="news"><h4>新闻动态</h4><li>浅谈设计的“基础”是什么<i>2014-07-27</i> </li><li>京东O20：跑马圈地要紧，别的日后再说<i>2014-07-27</i> </li><li>企业网络营销首先要重视网站建设<i>2014-07-27</i> </li><li>SEO博客文章是否都有存在的价值<i>2014-07-27</i> </li><li>农村互联网∶新一波浪潮下的“老”机会<i>2014-07-27</i> </li><span>了解更多>></span></div></div><!-- 底部 --><div id="footer"><div class="copy"><p>Copyright &copy; 2002-2011 DEDE58.织梦模板 版权所有</p></div><div class="cont-left"><img src="data:images/008.png" alt=""><p style="margin-top: 20px">业务咨询：</p><span>0898-6608888(9:30~18.30)</span><p>四川省成都市龙泉驿区阳光城</p><p>QQ:970003436</p></div><div class="cont-right"><ul>关于我们<li style="margin-top: 20px">了解我们</li><li>客户案例</li><li>发展历程</li><li>我们的观点</li><li>联系方式</li></ul><ul>我们的服务<li style="margin-top: 20px">网站建设</li><li>网络营销</li><li>移动APP开发</li><li>电商运营外包</li><li>网站运营维护</li><li>程序开发</li></ul><ul>新闻资讯<li style="margin-top: 20px">公司资讯</li><li>行业新闻</li></ul><ul>招募伙伴<li style="margin-top: 20px">资深网页设计师</li><li>实习网页设计师</li><li>项目经理</li></ul></div></div>
</body>
</html>

css部分：

style.css 文件主要是设置元素样式

/**************** 头部导航栏 **************/
#header{width: 1140px;height: 57px;margin: 0 auto;border: 1px solid #E83928;background: #E83928
}
#header h1{float: left;font-weight: normal;
}
#header h1 img{width: 132px;height: 19px;margin-top: 20px;margin-left: 70px;
}
#header ul{width: 480px;height: 22px;float: left;margin-top: 22px;margin-left: 90px;
}
#header li{height: 22px;float: left;
}
#header li a{font-size: 12px;color: white;padding-left: 42px;
}
#header li a:hover{border-bottom: 1px solid white;
}
#header img{width: 215px;height: 22px;float: right;margin-top: 20px;margin-right: 64px;
}/*   轮播图    */
#banner{width: 1140px;height: 520px;margin: 0 auto;background: url(../images/003.png) no-repeat center;
}/*      业务服务     */
#ser{width: 1139px;height: 229px; margin: 0 auto;border: 1px solid white;
}
.ser-box1{width: 177px;height: 183px;float: left;border-right: 1px dashed #D6D6D6;margin-top: 14px;margin-left: 26px;text-align: center;
}
#ser h3{color: #59595B;font-size: 16px;height: 24px;line-height: 24px;
}
#ser p{color: #7C7C7C;font-size: 12px;height: 22px;line-height: 22px;
}
.ser-box2,.ser-box3,.ser-box4,.ser-box5,.ser-box6{width: 177px;height: 183px;float: left;border-right: 1px dashed #D6D6D6;margin-top: 14px;text-align: center;
}/*    案例    */
#case{width: 1139px;height: 489px;margin: 0 auto;background: #EEEEEE;border: 1px solid white;
}
#case h2{margin-top: 40px;margin-left: 70px;height: 36px;line-height: 36px;font-size: 36px;color: #444347;
}
#case h2 span{font-size: 18px;font-weight: normal;
}
#case h3{width: 280px;height: 40px;margin: 0 auto;font-weight: normal;font-size: 14px;line-height: 40px;border-bottom: 1px solid #E3E3E3;
}
#case p{width: 280px;height: 90px;margin: 0 auto;font-size: 12px;color: #828483;line-height: 22px;position: relative;
}
#case p span{position: absolute;right: 0;bottom: 0;
}
.case-box1{width: 320px;height: 320px;float: left;margin-left: 70px;
}
.case-box2{width: 320px;height: 320px;float: left;margin: 0 20px;
}
.case-box3{width: 320px;height: 320px;float: left;
}/*    客户    */
#client{width: 1140px;height: 646px;margin: 0 auto;border: 1px solid white;
}
#client h2{margin-top: 40px;margin-left: 70px;height: 36px;line-height: 36px;font-size: 36px;color: #444347;
}
#client h2 span{font-size: 18px;font-weight: normal;
}
.c-box1{width: 193px;height: 104px;border: 1px solid #D4D4D4;float: left;margin-left: 60px;margin-top: 26px;text-align: center;padding-top: 46px;
}
.c-box2,.c-box3,.c-box4,.c-box5{width: 193px;height: 104px;border: 1px solid #D4D4D4;float: left;margin-left: 6px;margin-top: 26px;text-align: center;padding-top: 46px;
}
.about{width: 506px;height: 270px;float: left;margin-top: 46px;margin-left: 60px;border-right: 1px dashed #BABABA;position: relative;
}
.about h4{font-size: 20px;
}
.about h5{height: 48px;line-height: 48px;font-size: 14px;
}
.about p{width: 470px;height: 22px;line-height: 22px;font-size: 12px;color: #656565;
}
.about span{font-size: 12px;color: red;position: absolute;left: 0;bottom: 0;
}
.news{width: 506px;height: 270px;float: left;margin-top: 46px;position: relative;
}
.news h4{font-size: 20px;margin-left: 36px;
}
.news li{width: 460px;margin-left: 36px;list-style-image: url(../images/05-01_03.jpg);height: 38px;line-height: 38px;font-size: 12px;color: #656565;position: relative;
}
.news li i{position: absolute;right: 0;
}
.news span{font-size: 12px;color: red;position: absolute;left: 36px;bottom: 0;
}
/*   底部    */
#footer{width: 1140px;height: 250px;margin: 0 auto;background: #393939;}
.copy{width:1140px;height: 30px; background: #4F4F4F;
}
.copy p{height: 30px;line-height: 30px;margin-left: 780px;font-size: 12px;color: #C2C1BF;
}
.cont-left{width: 250px;height: 110px;margin-top: 36px;margin-left: 60px;float: left;
}
.cont-left p{height: 20px;line-height: 20px;font-size: 12px;color: #9E9E9C
}
.cont-left span{font-size: 14px;color: #9E9E9C
}
.cont-right{width: 486px;height: 200px;float: right;
}
.cont-right ul{width: 110px;height: 200px;float: left;margin-top: 36px;color: #99989D
}
.cont-right li{width: 110px;height: 20px;line-height: 20px;float: left;font-size: 10px;
}

reset.css 文件主要是清除浏览器和标签的默认样式


/* 清除浏览器的默认样式 */
*{margin: 0;padding: 0;
}
/* 清除加粗标签的默认样式 */
/* b,strong{font-weight: normal;
} */
/* 清除倾斜标签的默认样式 */
i,em{font-style: normal;
}
/* 清除标签的默认下划线 */
u,a{text-decoration: none;
}
/* 清除列表的默认样式 */
ul,ol,li{list-style: none;
}/* 万能清除法 */
.clear-fix::after{content:'';width:100%;height:0;display:block;overflow:hidden;clear:both;visibility:hidden;
}
/* 兼容 */
.clear-fix{zoom: 1 /* 兼容ie浏览器的高度塌陷 */
}

最终效果：

移动端

目标效果：

代码实现：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="http://at.alicdn.com/t/font_2703514_e3yqt3jeu28.css">
</head>
<body><!-- 头部 --><header><img src="data:images/17_03.jpg" alt=""><form action=""><input type="text" placeholder="长安福特 | 蒙迪欧 | 翼虎"></form><img src="data:images/171_06.png" alt=""><img src="data:images/173_03.png" alt=""></header><nav><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a><a href="">推荐</a></nav><div class="banner"></div><div class="advert"></div><div class="main-nav"><div><i class="iconfont icon-qiche"></i><span>新车特卖</span></div><div><i class="iconfont icon-qiche"></i><span>新车特卖</span></div><div><i class="iconfont icon-qiche"></i><span>新车特卖</span></div><div><i class="iconfont icon-qiche"></i><span>新车特卖</span></div><div><i class="iconfont icon-qiche"></i><span>新车特卖</span></div></div><main><div><div class="box1">先锋对话魏建军：与宝马合作知识一小步</div><div class="box2"><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""></div><div class="box3"><img src="data:images/news2_06.png" alt=""><p>666评论 &nbsp;汽车之家 耿源</p></div></div><div><div class="box1">先锋对话魏建军：与宝马合作知识一小步</div><div class="box2"><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""></div><div class="box3"><img src="data:images/news2_06.png" alt=""><p>666评论 &nbsp;汽车之家 耿源</p></div></div><div><div class="box1">先锋对话魏建军：与宝马合作知识一小步</div><div class="box2"><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""></div><div class="box3"><img src="data:images/news2_06.png" alt=""><p>666评论 &nbsp;汽车之家 耿源</p></div></div><div><div class="box1">先锋对话魏建军：与宝马合作知识一小步</div><div class="box2"><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""><img src="data:images/news_03.png" alt=""></div><div class="box3"><img src="data:images/news2_06.png" alt=""><p>666评论 &nbsp;汽车之家 耿源</p></div></div></main><footer><div><i class="iconfont icon-shouye"></i><span>首页</span></div><div><i class="iconfont icon-luntan"></i><span>论坛</span></div><div><i class="iconfont icon-qiche"></i><span>选车</span></div><div><i class="iconfont icon-qiche"></i><span>买车</span></div><div><i class="iconfont icon-wode"></i><span>我</span></div></footer>
</body>
</html>

css部分

style.css 文件实现元素样式

@charset "utf-8";
*{margin: 0;padding: 0;
}
html,body{height: 100%;
}
body{display: flex;flex-direction: column;
}
html{font-size: 0.2667vw;
}header{width: 100%;height: 44rem;display: flex;justify-content: space-around;align-items: center;position: relative;
}
header img:nth-of-type(1){width: 18rem;height: 16rem;
}
header img:nth-of-type(2){width: 21.5rem;height: 26rem;
}
header img:nth-of-type(3){width: 36rem;height: 36rem;position: absolute;top: 44rem;right: 0;
}
header form{width: 279rem;height: 28rem;
}
header form input{width: 100%;height: 100%;outline: none;border: none;border-radius: 8rem;font-size: 11rem;text-indent: 20rem;background: #F2F2F2 url(../images/172_03.png) no-repeat left center;
}
header form input::-webkit-input-placeholder{color: #9B999A;
}nav{width: 100%;height: 36rem;/*段落中文本不换行*/white-space: nowrap;/*设置横向滚动*/overflow-x: scroll;/*禁止纵向滚动*/overflow-y: hidden;/*文本平铺*/text-align: justify;
}
nav a{font-size: 15rem;line-height: 36rem;color: black;padding: 0 11rem;
}.banner{width: 100%;height: 188rem;background: url(../images/banner_02.png) no-repeat center;background-size: 100% 100%;border-bottom: 1px solid #B19D96;
}.advert{width: 345rem;height: 62rem;border-bottom: 1px solid #EFEFEF;margin: 0 auto;background: url(../images/advert_02.png) no-repeat center;background-size: 100% 100%;
}.main-nav{width: 345rem;height: 87rem;margin: 0 auto;display: flex;border-bottom: 1px solid #EFEFEF
}
.main-nav div{width: 20%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.main-nav div i{color: #2873FF;
}
.main-nav div span{font-size: 11rem;
}main{flex: 1;overflow: auto;
}
main>div{width: 345rem;height: 167rem;margin: 0 auto;border-bottom: 1px solid #EFEFEF;
}
main .box1{width: 345rem;height: 44rem;font-size: 15rem;line-height: 44rem;
}
main .box2{width: 345rem;height: 84.5rem;display: flex;justify-content: space-between;
}
main .box3{width: 100%;height: 39rem;display: flex;align-items: center;
}
main .box3 p{font-size: 11rem;line-height: 39rem;color: #999999;margin-left: 6rem;
}
main .box3 img{width: 31rem;height: 19rem;
}footer{width: 100%;height: 50rem;border-top: 1px solid #EFEFEF;display: flex;
}
footer div{width: 20%;display: flex;flex-direction: column;align-items: center;font-size: 9rem;
}
footer div:hover{color: #2775FB
}

reset.css 文件清除浏览器和标签的默认样式


/* 清除浏览器的默认样式 */
*{margin: 0;padding: 0;
}
/* 清除加粗标签的默认样式 */
/* b,strong{font-weight: normal;
} */
/* 清除倾斜标签的默认样式 */
i,em{font-style: normal;
}
/* 清除标签的默认下划线 */
u,a{text-decoration: none;
}
/* 清除列表的默认样式 */
ul,ol,li{list-style: none;
}
/* 万能清除法 */
.clear-fix::after{content:'';width:100%;height:0;display:block;overflow:hidden;clear:both;visibility:hidden;
}
/* 兼容 */
.clear-fix{zoom: 1 /* 兼容ie浏览器的高度塌陷 */
}
h1,h2,h3,h4,h5,h6{font-weight: normal;
}

最终效果：

总结：

1、语义化标签使用还不熟练

2、 部分功能没有完整实现

3、还存在部分bug

HTML+CSS的学习告一段落，作为小白，还有很多内容需要学习以及巩固，总之坚持学习！！！

之后将开始学习 JavaScript相关知识

欢迎各位大神指点

(day20)web前端实现静态页面相关推荐

  1. web前端的登陆页面制作

    web前端的登陆页面制作 登陆页面中有要登陆系统(网站)的名称,输入账号密码的输入框,以及登陆按钮这几个重要部分,其余的可以随便添加,但是页面布局要合理 标陆页面题 在页面输入框之前的图像是特殊的字体 ...

  2. web前端学习之——页面美妆师css3基础篇

    页面美妆师css3基础 结构(html)与样式(css)相分离 1.css基本语法规范 1.1 行内式(内联样式) 是通过标签的style属性来设置元素的样式 <标签名 style=" ...

  3. Web前端——移动端页面开发

    Web前端笔记 第五部分:移动端页面开发 1. 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大, 宽度可能是980px或者1024px,目的是为了显示 ...

  4. web前端简单静态网页制作

    那么Web页面制作基础,能让你掌握什么呢? 1.掌握Web基础知识. 2.掌握HTML5基础知识. 3.掌握CSS基础知识. 网页设计源代码: <!DOCTYPE html> <ht ...

  5. WEB前端开发 » WAP页面制作需要注意的几点

    1.遵循html页面的编写规则 2.新建的时候注意文档类型:xhtml-mobile10.dtd 3.特殊的meta标签 <meta name="viewport" id=& ...

  6. web服务器配置（静态页面）

    尝试利用win2008 server作为web服务器进行配置~~ 一.实验环境 操作系统:win2008 server 二.配置ip,安装IIS,DNS 三.添加网站 打开IIS,在网站列表中添加指定 ...

  7. WEB前端设置A4页面布局的轮子: paper-css

    先上官方repo: https://github.com/cognitom/paper-css paper.min.css @page{margin:0}body{margin:0}.sheet{ma ...

  8. Web前端 简单登陆页面设计 代码

    HTML部分 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" ...

  9. web前端技术分享：使用react实现简易路由

    众所周知,在web前端开发单页面使用路由目前有两种方式可以实现,一种是使用hash模式,另外一种就是history模式,今天小千就来给大家介绍一下这个history模式,喜欢的话记得收藏. histo ...

最新文章

  1. sun m5000 snapshot
  2. java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.LoopTag 错误
  3. 【MySQL】日期函数：仿trunc、当年、当月、当天
  4. 在java中使用JMH（Java Microbenchmark Harness）做性能测试
  5. c语言 中多一个分号,问什么C程序里总是提示缺少分号;,而明明有分号？
  6. Spring Boot之基于Redis实现MyBatis查询缓存解决方案
  7. 时间序列预测 预测时间段_应用时间序列预测：美国住宅
  8. 河流水质指标预测与不确定性分析：机器学习模型的比较研究--文献阅读
  9. 字符串反转python_Python实现字符串反转的几种方法
  10. 跳台阶游戏（洛谷P5613题题解，Java语言描述）
  11. 伯克利：serverless是下一代计算范式
  12. ssis 有条件拆分_SSIS条件拆分概述
  13. sql语句 case_使用SQL Case语句查询数据
  14. 惠普Teradici PCoIP 受OpenSSL 漏洞影响，波及1500万个端点
  15. 系统学习机器学习之神经网络（六） --GrossBerg网络
  16. 常用模板 UPD12/4
  17. 网络安全等级保护的过程
  18. 挂载阿里云盘到本地目录
  19. Apache POI
  20. Centos下增加swap空间

热门文章

  1. uiautomator_0
  2. 学校有个人邮箱可以用吗？个人申请电子邮箱注册
  3. D3.js的v5版本入门教程（第十四章）—— 力导向图
  4. uni-app、H5+ 仿IOS 实现 安卓手势拖拽右滑关闭当前页面并返回上级页面 + 阴影效果（侧滑返回）
  5. 论文解读：U-Net: Convolutional Networks for Biomedical Image Segmentation
  6. Angular2详解
  7. 19.MFA-Conformer: Multi-scale Feature Aggregation Conformer forAutomatic Speaker Verification
  8. ElasticSearch启动报错RollingFileManager (/xxx/xxx) java.io.FileNotFoundException
  9. Python 将矩阵保存为excel文件
  10. 广东省第三届强网杯Writeup