Html5+Css3小试牛刀
程序员文章站
2023-08-23 10:19:03
前因： 我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，UI无*发挥，要求，尽量好看点。 一番交谈后，确认这是一个对外的网站，最好移动端也能正常显示（响应式）。 正文： 前端这一块我一直在想给自己提升一下，刚好有这个机会，于是就去看了一下Ht ......
前因：
我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，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;
}
}
上一篇： 生产后坐月子可以吃燕窝吗