Html5+Css3小试牛刀

来源：cnblogs　　作者：勿悲勿急，戒骄戒躁　　时间：2019/8/27 9:51:24　　对本文有异议

前因：

　　我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，UI无自由发挥，要求，尽量好看点。

一番交谈后，确认这是一个对外的网站，最好移动端也能正常显示（响应式）。

正文：

　　前端这一块我一直在想给自己提升一下，刚好有这个机会，于是就去看了一下Html 5和Css3 发现很多属性确实比以前方便，其中比如伸缩盒子flex; 里面的flex-direction，align-items，justify-content 属性布局确实大大方便了。

html 因为html5 的新标签header,footer,article,section，nav等等加入，布局不再全部依赖div

  1 <body>
  2     <header>
  3         <img src="Img/logo.png" class="logo" />
  4         <div class="F_Search">
  5             <input type="text" class="Search" id="Search" placeholder="Please enter what you want to find" />
  6             <button class="SearchBtn" onclick="Search('');"></button>
  7             <nav class="SearchText">
  8                 <ul>
  9                     <li><p onclick="Search('test');">test</p></li>
 10                     <li><p onclick="Search('t');">t</p></li>
 11                     <li><p onclick="Search('t');">t</p></li>
 12                     <li><p onclick="Search('t');">t</p></li>
 13                     <li><p onclick="Search('t');">t</p></li>
 14                     <li><p onclick="Search('t');">t</p></li>
 15                     <li><p onclick="Search('t');">t</p></li>
 16                     <li><p onclick="Search('t');">t</p></li>
 17                 </ul>
 18             </nav>
 19         </div>
 20         <div class="link">
 21             <img src="Img/link.png" />
 22             <div>
 23                 <h2>Call Us Now :</h2>
 24                 <span>-------</span>
 25             </div>
 26         </div>
 27     </header>
 28     <article>  
 51     </article>
 52     <footer>
 53         <p><img src="Img/logo.png" style="width:40px;height:40px;padding:10px;vertical-align:middle;" /></p>
 57     </footer>
122 </body>

CSS: 布局采用 flex弹性布局这里就展示头部样式，其他部分大同小异

 1 * {
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5     text-decoration: none;
 6 }
 7 /*顶部*/
 8 header {
 9     width: 100%;
10     display: -webkit-flex;
11     display: flex; /*IE必要元素*/
12     flex-direction: row;/*排成一行*/
13     align-items: center; /*上下居中*/
14     padding: 30px;
15     box-sizing: border-box;
16     justify-content: space-between; /*分散内部元素 中间有空白*/
17     border-bottom: 1px solid #e6e6e6;
18 }
19 
20     header .logo {
21         margin-bottom: 10px;
22         margin-right: 40px;
23         border-radius: 5px 5px;
24     }
25 
26     header .F_Search {
27         padding-left: 20px;
28         flex: 1;
29         font-size: 0px;
30     }
31 
32         header .F_Search .SearchText ul {
33             font-size: 12px;
34             display: flex; /*IE必要元素*/
35             flex-direction: row;
36         }
37 
38             header .F_Search .SearchText ul li {
39                 padding: 10px;
40                 padding-top: 5px;
41                 box-sizing: border-box;
42                 cursor: pointer;
43                 color: #A599B0;
44             }
45 
46     header .Search {
47         width: 80%;
48         height: 35px;
49         border-radius: 10px 0 0 10px;
50         border: 1px solid #F9C801;
51         vertical-align: middle;
52     }
53 
54     header .SearchBtn {
55         width: 20%;
56         vertical-align: middle;
57         border: 0px;
58         height: 37px;
59         width: 60px;
60         border-radius: 0 10px 10px 0;
61         background: url('../Img/search2.png') no-repeat center center;
62         background-color: #F9C801;
63         cursor: pointer;
64     }
65 
66     header .link {
67         display: -webkit-flex;
68         display: flex; /*IE必要元素*/
69         flex-direction: row;
70         align-items: center;
71     }
72 
73         header .link img {
74             padding-left: 20px;
75             padding-right: 20px;
76         }
77 
78             header .link img:hover {
79                 transform: rotate(360deg);
80                 transition: transform 2s;
81             }
82 
83         header .link h2 {
84             color: #596794;
85         }
86 
87         header .link span {
88             padding-left: 20px;
89             color: #596794;
90         }

@media only screen and (min-width: 320px) and (max-width: 1000px) {
header {
top: 0;
position: fixed;
padding: 0px;
width: 100%;
}
header .F_Search {
width:100%;
font-size: 0px;
}
header .logo,header .link,header .SearchText{
display: none;
}
}