Web基础之CSS实战

来源：互联网发布：淘宝和卖家联系编辑：程序博客网时间：2024/05/19 21:16

Web基础之CSS实战

一、前言：

好久没有更新我的博客了，最近实在太忙了；不过，再累也要坚持更新博客；最近会把没有更新的博客补上来，顺便复习和整理一下以前学的知识；

通过前面的学习，我们已经对HTML和CSS样式有了一定的了解；我们不能总是纸上谈兵，还是得真枪实弹的操练起来，尤其对我们这种特别需要动手能力的专业来说；

好吧，不说废话了；直接上项目：我们需要用我们前面学的知识完成下面的网页效果图：

不要看起来很简单，做起来就没你想的那么容易了；这里你会见识到DIV+CSS的厉害之处，可能刚学起来你会觉得好难调出这种效果；这时候你就需要有点耐心了，慢慢来；不会的地方可以去W3CSchool查一下API；

二、难点解析和注意事项：

这里需要用PS切图，把我们用到的图片切下来；首先我们的注意一下网页的整体布局；然后不要图简单，网页中有文字的地方就尽量自己把文字写上去；举个栗子，上图中微博微信下的文字，就是我们自己写上去的，而不是把整个图片截取下来放上去；这样做利于后面的维护，而且，很多网页的头部和底部基本是一样的，可以稍微修改下就能重用了；

三：项目框架图：

这里我们用的工具是HBuilder，当然有像SubText，WebStorm，DreamWave，EditPlus等等工具；个人觉得这款工具很好用，像Eclipse一样，有强大的提示功能；

四、项目源代码：

index.html

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>美迪官网</title><link rel="stylesheet" type="text/css" href="css/mainpage.css" /></head><body><!--顶部横线--><div class="top-line"></div><div class="top"><!--顶部LOGO--><div class="top-logo float-left"></div><!--顶部文字--><div class="top-content float-left">国家二级施工资质企业<br/> 湖湘唯一荣获全国200余项室内设计大奖企业<br/> 官方唯一指定《中国高级家装标准》实施单位<br/></div><!--微博和微信LOGO以及文字--><div class="float-left"><div class="weibo-logo float-left"> </div><div class="weibo-font">美迪官方微博</div></div><div class="float-left"><div class="weixin-logo float-left"></div><div class="weixin-font">美迪官方微信</div></div><!--联系电话--><div class="top-pnone-logon float-left"></div><div class="top-pnone1 float-left">0731-</div><div class="top-pnone2 float-left">82221078<br/> 82228608<br/></div></div><!--导航条--><div class="menu float-left"><div class="menu-center"><div class="menu-btn float-left">首     页     </div><div class="menu-btn float-left">走进美迪</div><div class="menu-btn float-left">新闻资讯</div><div class="menu-btn float-left">精品案例</div><div class="menu-btn float-left">顶级团队</div><div class="menu-btn float-left">博格工艺</div><div class="menu-btn float-left">视频欣赏</div><div class="menu-btn float-left">客户评价</div><div class="menu-btn float-left">小区团购</div><div class="menu-btn float-left" style="border-right: 0px solid rgb(23,56,131);">美迪大宅</div></div></div><div class="select"><div class="select-font">美迪简介><span style="color: rgb(23,56,131);" ;>董事长致辞</span> >获奖荣誉>美迪大事记>美迪文化>分支机构>人才招聘</div></div><hr/><div class="center-content"><div class="center-logo"></div></div></body></html>

mainpage.css

/*body里面的元素都居中显示*/body{text-align: center;}/*顶部横条样式*/.top-line{width: 100%;height: 5px;background-color: rgb(23,56,131);}/*底部布局*/.top{width: 942px;margin: 0 auto;}/*浮动样式*/.float-left{float: left;}/*底部LOGO样式*/.top-logo{margin-top: 25px;margin-right: 10px;width: 251px;height: 75px;background-image: url(../img/4_03.jpg);}/*顶部logo旁边字体样式*/.top-content{margin-top: 25px;margin-right: 10px;color: rgb(168,168,168);font-size: 12px;line-height:25px;text-align: left;font-family: "微软雅黑" "仿宋";}/*微博logo样式*/.weibo-logo{margin-top: 40px;margin-right: 30px;margin-left: 35px;width: 40px;height: 37px;background-image: url(../img/4_06.jpg);}/*微博文字样式*/.weibo-font{clear: left;width: 80px;height: 40px;margin-left: 10px;color: rgb(23,56,131);font-size: 10px;font-family: "微软雅黑" "仿宋";text-align: center;}/*微信logo样式*/.weixin-logo{margin-top: 40px;margin-right: 30px;margin-left: 20px;width: 42px;height: 37px;background-image: url(../img/4_08.jpg);}/*微信文字样式*/.weixin-font{clear: left;width: 80px;height: 40px;color: rgb(23,56,131);font-size: 10px;font-family: "微软雅黑" "仿宋";text-align: center;}/*底部电话logo样式*/.top-pnone-logon{margin-top: 40px;margin-left: 20px;width: 46px;height: 46px;background-image: url(../img/telephone.jpg);}/*0731电话号码样式*/.top-pnone1{margin-top: 55px;margin-left: 10px;margin-right: 5px;color: rgb(23,56,131);font-size: 10px;font-family: "微软雅黑" "仿宋";text-align: center;}/*电话号码样式*/.top-pnone2{margin-top: 35px;margin-left: 10px;margin-right: 5px;color: rgb(23,56,131);font-size: 20px;font-family: "微软雅黑" "仿宋";text-align: center;}/*导航条菜单样式*/.menu{margin-top: 20px;clear: left;width: 100%;height: 50px;background-color:rgb(23,56,131) ;}/*包裹菜单的DIV*/.menu-center{margin-left: auto;margin-right: auto;width: 942px;height: 50px;background-color:rgb(23,56,131) ;}/*每个菜单的样式*/.menu-btn{width: 9.8%;font-size: 15px;font-family: "微软雅黑" "仿宋";border-right: 2px solid white;height: 50px;line-height: 50px;color:white ;text-align: center;}/*文字样式*/.select{clear: left;width: 100%;height: 30px;background-color:rgb(255,255,255) ;}/*选中的文字样式*/.select-font{width: 920px;height: 30px;margin: 0 auto;line-height: 30px;font-family: "微软雅黑" "仿宋";font-size: 14px;text-align: left;}/*中间的内容面板*/.center-content{width:100%;height: 1000px;}/*中间面板的图片样式*/.center-logo{width:942px;height: 207px;background-image: url(../img/4_16.jpg);margin: 0 auto;}

五、项目效果演示：

六、实战总结：

通过这个小小的CSS实战，我见识到了DIV+CSS这个组合的厉害之处；我们能够看到，index文件中代码不是很多，而修饰展示效果的CSS代码却很多；这也说明的CSS样式的厉害；能够给我们的网页美容，让整个网页顿时高大上起来；同时，这个实战把前面学到的知识基本用上了；肯定会有很多小伙伴会很懵逼，传授一下经验，你不要着急，慢慢来，一步一步实现；我做这个也做了很久；

共勉！

0 0