终于做完了网页(很简略!!!),但是也花了我不少时间,这篇文章决定详细的讲解,顺便也当做是复习巩固了,因为自己做的时候真的踩了很多坑...
首先先来看看我们要做的网页首页是怎样的.
先整理一下整体的结构和思路才方便制作,所以我们可以将整个首页分为以下几个部分:
头部header:
logo部分:
导航栏部分nav:
搜索框部分search:
搜索框中的input:
搜索框中的button:
用户user部分:
banner部分:
banner版心部分:
侧边栏subnav:
课程表course:
精品推荐区goods:
核心的box区:
又分为box-hd(head)和box-bd(body)上下两个区域:
box-hd:
box-bd:
最后就是底部的footer区域:
左边的为版权copyright部分,右边为links链接部分.
现在我们可以开始做了,由于html的代码很多,我们需要使用外部链接法:
重点:只要是首页的html文件都取名为index.html,CSS的取名为style.css即可.
首先先在html文件的title下link一下外部CSS样式:
linkrel="stylesheet"href="./style1.css"/
如图:
下面就可以开始写啦!
最最最首先的一步是在CSS文件里清除网页自带的边距:
CSS*{margin:0;padding:0;}
由于网页自带背景颜色,我们不妨给body设置一个背景色:
CSSbody{background-color:#f3f5f7;将高度设置为px方便滑动滚动条浏览.height:px;}
同时,消除所有a链接自带的下划线和li列表前面的小圆点:
CSSli{list-style:none;}a{text-decoration:none;}
header部分
合理使用注释,以减少错误的产生,也方便自己看.(虽然还是产生很多错误...)
HTML
!--头部区域开始--header部分是有宽度的,所以类名为wdivclass="headerw"!--logo部分--divclass="logo"使用ps切图截取logo图片imgsrc="./image/logo.png"alt=""//div!--logo部分结束--!--导航部分开始--divclass="nav"网页里的a链接都用ullia的形式ulliahref="#"首页/a/liliahref="#"课程/a/liliahref="#"职业规划/a/li/ul/div!--导航部分结束--!--搜索框开始--divclass="search"inputtype="text"placeholder="输入关键字"/button/button/div!--搜索框结束--以下是user用户区域:divclass="user"imgsrc="./image/user.png"alt=""/qq-leishui/div/div!--头部区域结束--
CSS
我们发现整个首页是有一个px的宽度的,且在网页中居中显示,包括头部,所以我们可以直接在CSS里定义一个w类,并把所有宽度设置为px,然后给宽度为px的部分取名为w就可以了.
CSS.w{width:px;margin:0auto;}
头部是有一个高度的,且距离网页上下有一个30px的距离
.header{height:42px;margin:30pxauto;}
我们的logo在头部的左侧,所以要使用浮动:
.logo{float:left;}
接下来是nav导航部分,记住一个原则:一浮全浮,因为logo部分加了浮动,所以这里也要加浮动,nav距离左边有60px的距离.
.nav{float:left;margin-left:60px;}
nav中的每一个li也要添加浮动,否则会竖着显示,text-align:center使文字水平居中,line-height=盒子的高度height可以使得文字垂直居中显示,且每个li之间也是有距离的.
.navulli{float:left;margin:px;text-align:center;line-height:42px;}
接下来设置a的属性,要先将a转换成块元素!!!因为a是行内元素,不转换是会有显示问题的,padding也是没有效果的,最后设置文字大小和颜色.
.navullia{display:block;padding:px;font-size:18px;color:#;}
由于鼠标移动到a链接时会出现一个蓝色的下边框,所以我们要设置伪元素hover:
.navullia:hover{border-bottom:2pxsolid#00a4ff;}
现在到了search部分,首先设置浮动!后面就是宽度和高度,距离左边也有一个距离,没什么难点
.search{float:left;width:px;height:42px;margin-left:70px;}
然后就是input,浮动!!设置宽度,同时我们能看到这个搜索框是没有右边框的,所以我们要把他去掉,再把点击输入框时的外边框去掉.
.searchinput{float:left;width:px;height:40px;border:1pxsolid#00a4ff;border-right:0;outline:none;padding-left:20px;font-size:14px;color:#bfbfbf;}
button部分:浮动,注意按钮的宽度和输入框的宽度加起来要等于search的宽度(px),否则button会掉下来.
.searchbutton{float:left;width:50px;height:42px;background-image:url(./image/btn.png);border:0;}
user部分:很简单,不做解释,唯一要注意的还是加浮动.
.user{float:left;height:42px;margin-left:32px;line-height:42px;font-size:14px;color:#;}
banner部分
HTML
divclass="banner"banner中有一个px宽度的版心divclass="w"!--侧边导航栏--divclass="subnav"ulligt;是一个""符号.由于实在太懒所以就没一个一个打.ahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/liliahref="#"前端开发spangt;/span/a/li/ul/div!--侧边栏结束--!--课程表开始--divclass="course"h3我的课程表/h3ullih4继续学习程序语言设计/h4p正在学习-使用对象/p/lilih4继续学习程序语言设计/h4p正在学习-使用对象/p/lilih4继续学习程序语言设计/h4p正在学习-使用对象/p/li/ulahref="#"class="more"课程表/a!--课程表结束--/div/div/div!--banner部分结束--
CSS
banner部分:整个banner是没有宽度的,但是有一个高度和背景颜色,且距离顶部有一个距离:
.banner{height:px;margin-top:20px;background-color:#1bb;}
banner版心部分:
.banner.w{height:px;/*注意取消背景重复不然下面会多出一些颜色*/background:url(./image/banner2.png)no-repeat;}
侧边栏subnav部分:不要忘记浮动,可以看到这个侧边栏是可以看到后面的背景的,所以是一个半透明背景,要用到rbga.
.subnav{float:left;width:px;height:px;background-color:rgba(0,0,0,0.3);}
li部分:让文字水平居中,且左右设置边距.
.subnavulli{height:45px;line-height:45px;padding:px;}
每个a链接的属性:
.subnavullia{color:#fff;font-size:14px;}
我们看到在每个a链接的后面还有一个的小角标:使其浮动,就可以显示在最右边,他不会靠在每个subnav的最右侧是因为li设置了左右padding值,他只会顶到li的最右侧,距离subnav的最右侧有20px的距离.
.subnavulliaspan{float:right;}
鼠标经过每个a链接会改变颜色,所以要设置伪元素hover属性.
.subnavullia:hover{color:#00b4ff;}
课程表course部分:在右侧浮动,距离上面有一部分距离.
.course{float:right;width:px;height:px;background-color:#fff;margin-top:15px;}
course的标题部分,很简单不解释.
.courseh3{width:px;height:48px;background-color:#9bceea;font-size:18px;color:#ffffff;line-height:48px;text-align:center;}
ul部分:
.courseul{padding:px;}
li部分:上下有个padding值,如果使用的是margin,那么边框显示的位置是不对的,会紧贴着文字下方,而设置内边距padding才能使文字和边框之间有距离.
.courseulli{padding:14px0;border-bottom:1pxsolid#efefef;}
下方的文字部分:也很简单,知识设置文字大小和文字的颜色.
.courseullih4{font-size:16px;color:#4e4e4e;}.courseullip{font-size:12px;color:#a5a5a5;}
more部分:由于是a链接,所以一定要转换元素!!!才能设置宽度和高度.
.course.more{display:block;height:38px;width:px;border:1pxsolid#00a4ff;margin:6px14px12px14px;line-height:38px;text-align:center;font-size:16px;color:#00a4ff;font-weight:;}
精品推荐部分
HTML
!--精品推荐开始--goods有宽度divclass="goodsw"h3精品推荐/h3ulliahref="#"JQuery/a/liliahref="#"JQuery/a/liliahref="#"JQuery/a/liliahref="#"JQuery/a/liliahref="#"JQuery/a/liliahref="#"JQuery/a/li/ulahref="#"class="mod"修改兴趣/a/div!--精品推荐结束--
CSS
goods部分:注意盒子的边缘是有阴影的.
.goods{height:60px;margin-top:8px;line-height:60px;background-color:#fff;box-shadow:02px3pxrgba(0,0,0,0.1);}
文字和链接部分:盒子里的内容需要加浮动,给a链接加padding值而不是li,原因是可以增加a链接的点击范围,可以提高用户的使用体验.
.goodsh3{float:left;padding:px;font-size:16px;color:#00a4ff;}.goodsulli{float:left;}.goodsullia{padding:px;border-left:1pxsolid#bfbfbf;font-size:16px;color:#;}
mod部分:在右侧浮动,在右侧加一个浮动即可.
.mod{float:right;margin-right:28px;font-size:14px;color:#00a4ff;}
核心box区域
HTML
!--核心区域开始--divclass="boxw"!--核心头部开始--divclass="box-hd"h2精品推荐/h2ahref="#"class="all"查看全部/a/div!--核心头部结束--!--核心中心部分--divclass="box-bd"注意清除浮动!!!由于ul是不给高度的(不适合给高度),里面的li标签都是浮动的,ul的高度会变成0,所以这里的ul需要清除浮动,否则下面footer盒子会跑到这里的li盒子下面.为什么其他的不用清除呢?由于上面的goods之类的盒子都设置了固定的高度,所以并不会影响文档流.ulclass="clearfix"liahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/liliahref="#"imgsrc="./image/图层.png"alt=""h4ThinkPHP5.0博客系统实战项目演练/h4pspan高级/span?人在学习/p/a/li/ul/div/div!--核心区域结束--
box和box-hd部分:不是很难不解释.
.box{margin-top:36px;}.box-hd{height:45px;}.box-hdh2{float:left;font-size:20px;font-weight:;color:#;}.box-hd.all{float:right;line-height:42px;font-size:12px;color:#a5a5a5;margin-right:30px;}
box-bd部分:这里将width设置为px的原因是每个li都有一个右边距margin值,这样加起来一行显然会超出px((px+15px)*5=px),这样一排就只能显示4个li盒子,有一个会掉下去,但是首页的一排是有5个的,所以索性将宽度加大,覆盖掉原来的px,这样盒子就不会掉下去,且不会影响浏览器的使用体验.
图片得宽度需要设置为宽度的%,否则是会大于盒子的大小的.
.box-bdul{width:px;}.box-bdulli{float:left;width:px;height:px;margin-right:15px;margin-bottom:15px;background-color:#fff;}.box-bdimg{width:%;}.box-bdulliah4{padding:20px20px15px25px;font-weight:;font-size:14px;color:#;}.box-bdullip{margin-left:25px;font-size:12px;color:#;}.box-bdullipspan{font-size:12px;color:#ff7c2d;}
footer部分
HTML
!--footer区域开始--divclass="footerw"divclass="copyright"imgsrc="./image/logo.png"alt=""p学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。br?年XTCGInc.保留所有权利。-沪ICP备号/pahref="#"class="app"下载App/a/divdivclass="links"dldtahref="#"关于学成网/a/dtddahref="#"关于/a/ddddahref="#"管理团队/a/ddddahref="#"工作机会/a/ddddahref="#"客户服务/a/ddddahref="#"帮助/a/dd/dldldtahref="#"关于学成网/a/dtddahref="#"关于/a/ddddahref="#"管理团队/a/ddddahref="#"工作机会/a/ddddahref="#"客户服务/a/ddddahref="#"帮助/a/dd/dldldtahref="#"关于学成网/a/dtddahref="#"关于/a/ddddahref="#"管理团队/a/ddddahref="#"工作机会/a/ddddahref="#"客户服务/a/ddddahref="#"帮助/a/dd/dl/div/div!--footer区域结束--
CSS
footer部分:
.footer{margin-top:23px;height:px;background-color:#fff;}
copyright部分:
.copyright{float:left;padding-top:35px;}.copyrightimg{margin-left:20px;}.copyrightp{margin-top:24px;margin-left:20px;font-size:12px;color:#;}.copyrighta{注意a标签一定要转换成块元素,否则margin和padding都不会生效.display:block;margin-left:20px;margin-top:18px;width:px;height:35px;border:1pxsolid#00a4ff;text-align:center;line-height:35px;font-size:16px;color:#00a4ff;}
links部分:到最后一部分啦!这里运用了自定义列表dl的知识.
.links{padding-top:35px;margin-right:35px;}.linksdl{float:right;margin-left:px;}.linksdldta{font-size:16px;color:#;}.linksdldda{/*注意此处的选择器没有dt因为dt和dd是同级的!!!*/font-size:12px;color:#;}
差不多到这里就结束啦,其实收获还是很大的,跳进了很多坑,中途写到很多次都卡住了,有因为类名写错的,父子级别写错的,忘记加浮动的,但是好在最后都靠自己解决了,跟着老师学习也学到了很多新的知识!真的很喜欢这种自己发现问题,解决问题的感觉,每一个问题可以是绊脚石,但是解决了也可以铺成一条路,助我越走越远.
完整的代码在下一章发布.
预览时标签不可点收录于话题#个上一篇下一篇