检验自己一个月的学习成果，实现的是静态页面（小白学习一个月的成果）
欢迎各位大神参考和指点
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="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="images/002.png" alt="">
</div>
<!-- 轮播图 -->
<div id="banner"></div>
<!-- 业务服务 service -->
<div id="ser">
<div class="ser-box1">
<img src="images/004.png" alt="">
<h3>创意网站建设</h3>
<p>
企业网站建设<br>
品牌网站建设<br>
电子商务网站<br>
Minisite活动站
</p>
</div>
<div class="ser-box2">
<img src="images/004.png" alt="">
<h3>网络整合营销</h3>
<p>
微信营销推广<br>
企业社交管理<br>
网络活动策划<br>
搜索引擎优化
</p>
</div>
<div class="ser-box3">
<img src="images/004.png" alt="">
<h3>移动APP开发</h3>
<p>
iPhone应用开发<br>
Android应用开发<br>
APP界面设计<br>
平板应用设计开发
</p>
</div>
<div class="ser-box4">
<img src="images/004.png" alt="">
<h3>电商运营外包</h3>
<p>
天猫旗舰店代运营<br>
网店装修设计<br>
网店策划&推广<br>
电商平台入驻申请
</p>
</div>
<div class="ser-box5">
<img src="images/004.png" alt="">
<h3>网站运营维护</h3>
<p>
页面内容修改&添加<br>
程序功能修改和维护<br>
空间&服务器租用<br>
企业邮箱&域名注册
</p>
</div>
<div class="ser-box6">
<img src="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="images/005.png" alt="">
<h3>富士通Fujitsu(中国)计算机</h3>
<p>Fujitsu(富士通)公司上世纪70年代进入中国，在计算机平台产品、软件与解决方案、通信、半导体以及高新技术的研究开发等领域...<span>MORE >></span></p>
</div>
<div class="case-box2">
<img src="images/05-case_03.jpg" alt="">
<h3>果朋网个性化APP推荐社区</h3>
<p>基于个人兴趣喜好的APP推荐社区，让用户更便捷、快速的找到自己喜欢和需要的APP应用，并和好友分享交流APP信息。果朋网的核心价...<span>MORE >></span></p>
</div>
<div class="case-box3">
<img src="images/05-case3_05.jpg" alt="">
<h3>SeeBond视邦眼镜</h3>
<p>上海视邦光学眼镜有限公司成立于2004年，是专业的品牌眼镜代理公司，一直致力于国际品牌眼镜的销售和推广，提供客户高端优质的...<span>MORE >></span></p>
</div>
<img style="margin-left: 10px" src="images/05-case4_03.jpg" alt="">
</div>
<!-- 客户client -->
<div id="client">
<h2>Client <span>客户</span></h2>
<div class="c-box1"><img src="images/006.png" alt=""></div>
<div class="c-box2"><img src="images/006.png" alt=""></div>
<div class="c-box3"><img src="images/006.png" alt=""></div>
<div class="c-box4"><img src="images/006.png" alt=""></div>
<div class="c-box5"><img src="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 © 2002-2011 DEDE58.织梦模板 版权所有</p>
</div>
<div class="cont-left">
<img src="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="images/17_03.jpg" alt="">
<form action="">
<input type="text" placeholder="长安福特 | 蒙迪欧 | 翼虎">
</form>
<img src="images/171_06.png" alt="">
<img src="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="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
</div>
<div class="box3">
<img src="images/news2_06.png" alt="">
<p>666评论 汽车之家 耿源</p>
</div>
</div>
<div>
<div class="box1">
先锋对话魏建军：与宝马合作知识一小步
</div>
<div class="box2">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
</div>
<div class="box3">
<img src="images/news2_06.png" alt="">
<p>666评论 汽车之家 耿源</p>
</div>
</div>
<div>
<div class="box1">
先锋对话魏建军：与宝马合作知识一小步
</div>
<div class="box2">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
</div>
<div class="box3">
<img src="images/news2_06.png" alt="">
<p>666评论 汽车之家 耿源</p>
</div>
</div>
<div>
<div class="box1">
先锋对话魏建军：与宝马合作知识一小步
</div>
<div class="box2">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
<img src="images/news_03.png" alt="">
</div>
<div class="box3">
<img src="images/news2_06.png" alt="">
<p>666评论 汽车之家 耿源</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相关知识
欢迎各位大神指点
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
