每日总结(2)

所学时间: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 }

 

posted @ 2023-02-21 21:13  旺旺大菠萝  阅读(11)  评论(0)  编辑  收藏  举报