实战：学成网案例

最终实现效果

（只是截了个图，没有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;
}

五、底部模块

实现比较丑，因为时间有点急了

简单的浮动就可以了，没什么问题。

整个过程就是这样了~

代码改变世界~