最终实现效果
（只是截了个图，没有psd文件）
一、先做logo和navbar部分
1、截图网站进行了logo部分切图（使用的）
2、再做好整体的框架，一部分logo，一部分navbar，用来放置首页，课程，职业规划
代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 /*清除内外边距*/ 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 /*去掉列表样式小点*/ 13 ul { 14 list-style: none; 15 } 16 /*清除浮动*/ 17 .clearfix:before, .clearfix:after { 18 content: " "; 19 display: table; 20 } 21 22 .clearfix:after { 23 clear: both; 24 } 25 26 .clearfix:after { 27 *zoom: 1; 28 } 29 30 a { 31 color: #050505; 32 text-decoration: none; 33 } 34 35 /*页面头部高度*/ 36 header { 37 height: 100px; 38 /*background-color: pink;*/ 39 overflow: hidden; 40 } 41 42 nav { 43 width: 1366px; 44 height: 42px; 45 /*background-color: purple;*/ 46 margin: 26px auto; /*盒子水平居中对齐*/ 47 } 48 49 .logo { 50 float: left; 51 } 52 53 .navbar { 54 float: left; 55 height: 42px; 56 line-height: 42px; /*行高 继承性*/ 57 margin-left: 50px; 58 } 59 60 .navbar li { 61 float: left; /*让首页 课程 等一行显示*/ 62 } 63 64 .navbar li a { 65 padding: 0 8px; /*左右8像素*/ 66 display: block; /* a是行内元素，给高需要转换块级元素*/ 67 height: 42px; 68 } 69 70 .navbar li a:hover { 71 border-bottom: 2px solid #00a4ff; 72 } 73 </style> 74 </head> 75 <body> 76 <!--结构--> 77 <!--页面头部分--> 78 <header> 79 <nav> 80 <!--logo部分--> 81 <div class="logo"> 82 <img src="images/Study_logo_05.png" /> 83 </div> 84 <!--导航栏部分--> 85 <div class="navbar"> 86 <ul> 87 <li><a href="#">首页</a></li> 88 <li><a href="#">课程</a></li> 89 <li><a href="#">职业规划</a></li> 90 </ul> 91 </div> 92 </nav> 93 </header> 94 </body> 95 </html>
网页显示
这里忘记加
.navbar li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
鼠标点上去字体颜色也会跟着改变
块级元素和行内元素的相互转换巩固：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
常见的块状标签：
<div> <hr> <p> <ul> <li>等
块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
常见的行内标签：
<span> <a> <input>等
行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
二、做搜索框search部分
添加了一个整体背景颜色
1 body { 2 background-color: #f3f5f7; 3 }
css部分的代码
1 /*搜索框部分*/ 2 .search { 3 410px; /*左边搜索框360像素 右边按钮50像素*/ 4 height: 38px; 5 border: 1px solid #00a4ff; 6 float: left; 7 } 8 9 .search input[type=text] { /*属性选择器*/ 10 360px; 11 height: 38px; 12 float: left; 13 border-color: #00a4ff; 14 outline: none; 15 border: none; 16 } 17 18 .search input[type=submit] { 19 50px; 20 height: 38px; 21 float: left; 22 background-image: url('images/search_07.png'); 23 background-position: center center; 24 border: none; /*去除边框*/ 25 cursor: pointer; /*鼠标放上去的时候变成手形状 */ 26 }
html代码
1 <!--搜索框部分--> 2 <div class="search clearfix"> 3 <form> 4 <input type="text" /> 5 <input type="submit" value="" /> 6 </form> 7 </div>
注意：切图的时候一定要好好放大了切，我这个按钮没有切好，导致有了缝隙，当时还没有意识到，就一直调整位置，一直不对，后面才发现是切图没切好，多出来了白色缝隙....
网页效果
如果想给文本框加个提示，在文本框后面加个placehoder=" "就好了，还有不让文本框顶格写，可以加入在css里面加入padding-left
三、banner部分
整个页面实现到这里就是这样了，只是做个静态网页
遇到的问题：其中在右边小课堂的input标签点击了会有一个光标的出现，这个时候使用readOnly=“readOnly”属性，其实这个时候设置完了就没有小光标了，那可能其他浏览器再点击会有小光标出现，如果使用disabled属性在IE8以下的浏览器上，字体被默认弄成了屎灰色，input这个时候还有个unselectable=“on”
关于input文本框disabled，readonly，unselectable区分，点击input文本框disabled、readonly、unselectable区分类型和设置移除属性 - 小灯泡设计 (dpaoz.com)
这篇关于javascript实现聚焦光标消失 html的标签中 unselectable=on 属性的作用 - SophiaLiu - 博客园 (cnblogs.com)
中间的小圆点制作
代码如下
1 CSS部分 2 3 /*小圆点*/ 4 .circle { 5 180px; 6 height: 22px; 7 position: absolute; 8 bottom: 10px; 9 /*水平居中算法*/ 10 left: 50%; /*父级宽度的一半*/ 11 margin-left: -90px; 12 } 13 14 .circle li { 15 float: left; 16 12px; 17 height: 12px; 18 background: rgba(255, 255, 255, 0.4); 19 margin: 6px 8px; 20 /*小圆点*/ 21 border-radius: 50%; 22 } 23 24 .circle .current { 25 19px; 26 border-radius: 5px; 27 background-color: white; 28 } 29 30 31 html 32 <!--中间小圆点显示--> 33 <ul class="circle"> 34 <li class="current"></li> 35 <li></li> 36 <li></li> 37 <li></li> 38 <li></li> 39 <li></li> 40 </ul>
四、精品推荐模块
1 CSS 2 3 /*精品推荐模块*/ 4 .resommend { 5 height: 60px; 6 line-height: 60px; 7 background-color: #fff; 8 margin-top: 8px; 9 box-shadow: 0 2px 2px rgba(0,0,0,0.2); 10 /*盒子阴影 水平位置 垂直位置 模糊距离 影子颜色*/ 11 } 12 13 .resommend a { 14 padding: 0 30px; 15 border-right: 1px solid #ccc; 16 } 17 18 .resommend a:hover { 19 color: #00a4ff; 20 } 21 22 .resommend a:first-child { 23 color: #00a4ff; 24 } 25 26 .resommend a:last-child { 27 color: #00a4ff; 28 border: none; 29 font-size: 15px; 30 margin-left: 230px; 31 } 32 33 34 HTML 35 <!--精品推荐--> 36 <div class="resommend container"> 37 <a href="#">精品推荐</a> 38 <a href="#">Jquery</a> 39 <a href="#">Spart</a> 40 <a href="#">MySql</a> 41 <a href="#">JavaWeb</a> 42 <a href="#">MySql</a> 43 <a href="#">JavaWeb</a> 44 <a href="#">修改兴趣</a> 45 </div>
网页效果
主体部分
两个图片之间有间隙，使用的右外边距，最右边的图片会下来，这时候使用的是
/*第五个和第十个不需要外边距*/
.recom-bd ul li:nth-child(5n) {
margin-right: 0;
}
五、底部模块
实现比较丑，因为时间有点急了
简单的浮动就可以了，没什么问题。
整个过程就是这样了~