所学时间:4个小时
代码:110
博客:1
知识点:
css和html搭建基础页面,实现搜索框的美化,首页菜单项目鼠标聚焦,浮动
HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>学成在线</title> 6 <link rel="stylesheet" href="../static/css/index.css"> 7 </head> 8 <body> 9 10 <!--头部--> 11 <div class="header wrapper"> 12 <div class="nav"> 13 <ul> 14 <li><a href="#">首页</a></li> 15 <li><a href="#">课程</a></li> 16 <li><a href="#">规划</a></li> 17 </ul> 18 </div> 19 20 <!-- 搜索 --> 21 <div class="search"> 22 <input type="text" placeholder="请输入关键字"> 23 <button></button> 24 </div> 25 </div> 26 </body> 27 </html>
CSS
1 /*去默认格式*/
2 *{
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6 }
7 li{
8 list-style: none;
9 }
10 a{
11 text-decoration: none;
12 }
13 .clearfix:before,.clearfix:after{
14 content: "";
15 display: table;
16 }
17 .clearfix:after{
18 clear: both;
19 }
20
21 body{
22 background-color: #f3f5f7;
23 }
24 .wrapper{
25 width: 1200px;
26 margin: 0 auto;
27 }
28 .header{
29 height: 42px;
30 /*background-color: pink;*/
31 margin: 30px auto;
32 }
33
34 /*前三个字*/
35 .nav{
36 float: left;
37 margin-left: 70px;
38 height: 42px;
39 }
40 .nav li{
41 float: left;
42 margin-right: 26px;
43 }
44 .nav li a{
45 display: block;
46 padding: 0 9px;
47 height: 42px;
48 line-height: 42px;
49 /*border-bottom: 2px solid #00a4ff;*/
50 font-size: 18px;
51 color: #050505;
52 }
53 /*鼠标移动效果*/
54 .nav li a:hover{
55 border-bottom: 2px solid #00a4ff;
56 }
57 /*搜索*/
58 .search{
59 float: left;
60 margin-left: 59px;
61 width: 412px;
62 height: 40px;
63 border: 1px solid #00a4ff;
64 }
65 .search input{
66 float: left;
67 padding-left: 20px;
68 width: 360px;
69 height: 38px;
70 border: 0;
71 }
72 /*控制关键字*/
73 .search input::placeholder{
74 font-size: 14px;
75 color: #bfbfbf;
76 }
77 .search button{
78 float: left;
79 width: 50px;
80 height: 40px;
81 background-image: url("../img/btn.png");
82 border: 0;
83 }
标签：总结,margin,每日,float,height,li,border,left From： https://www.cnblogs.com/fan-wang/p/17142487.html