018 盒子實戰

時間 2019-12-07

標籤盒子實戰欄目 CSS 简体版

原文原文鏈接

一：PScss

1.標尺html

　　ctrl+r：展現標尺web

　　而後右鍵，選擇像素。工具

　　按住空格進行拖拽url

　　使用吸管吸收顏色spa

　　使用矩形邊框工具，在選擇中，能夠知道選區的大小設計

　　使用ctrl+d，能夠取消選區code

　　使用移動工具，能夠劃線，做爲輔助線，計算版心htm

　　使用切片工具，切出logo，以下2所示。blog

2.使用切片工具

　　注意使用的工具爲切片。

　　切片以後，存儲爲web全部的格式。

　　能夠使用視圖菜單那裏，使用清除切片，主要用於特別多的切片的時候

二：案例

1.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/index.css" />
 7 </head>
 8 <body>
 9     <!-- header部分 -->
10     <div class="header">
11         <div class="inner">
12             <div class="logo">
13                 <!-- 在logo上加一個鏈接 -->
14                 <a href="#"><img src="image/logo.png" height="63px" alt="logo"></a>
15             </div>
16             <div class="nav">
17                 <!-- nav連接 -->
18                 <ul>
19                     <li><a href="#">首頁</a></li>
20                     <li><a href="#">商城</a></li>
21                     <li><a href="#">門店</a></li>
22                     <li><a href="#">平臺</a></li>
23                     <li><a href="#">聯盟</a></li>
24                     <li><a href="#">關於雲道</a></li>
25                 </ul>
26             </div>        
27         </div>
28     </div>
29     <!-- banner部分 -->
30     <div class="banner">
31             <!-- 使用背景-->
32     </div>
33     <!-- 服務塊 -->
34     <div class="service">
35         <div class="service-hd">
36             <h3>
37                 <img src="image/produce.jpg" alt="">
38             </h3>
39             <p>平臺上諸多優秀設計師開設我的公衆號，分享設計知識、設計經驗及行業資訊等內容。爲整合更多優質內容，同時也爲平臺用戶帶來更好的閱讀體驗，UI中國推出設計公衆號聯盟。UI中國願與優秀設計師們，共同打造良好的設計知識生態圈。</p>
40         </div>
41     
42     </div>
43 </body>
44 </html>

2.css

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     background-color: #fafafa;
 7 }
 8 .nav li {
 9     list-style: none;
10     float: left;
11     margin: 0 20px;
12 }
13 
14 /* 頂部導航欄*/
15 .header {
16     height: 63px;
17     background-color: #fff;
18 }
19 .inner {
20     height: 63px;
21     width: 1157px;
22     margin: 0 auto;
23     /*background-color: #e5c5f6;*/
24     line-height: 63px; /*行高會繼承，因此li會獲得*/
25 }
26 .logo {
27     height: 63px;
28     float: left;
29 }
30 .nav {
31     height: 63px;
32     float: right;
33 }
34 
35 .nav li a {
36     color: #333;
37     text-decoration: none;
38 }
39 .nav li a:hover {
40     color: #207adf;
41 }
42 
43 .banner {
44     height: 350px;
45     background: url(../image/banner.jpg) no-repeat top center;
46 }
47 .service {
48     /*margin-top: 75px;*/
49     width: 1157px;
50     height: 500px;
51     margin: 25px auto 0;
52     /*background-color: pink;*/
53 }
54 .service-hd {
55     border-top: 1px dashed black;
56     margin: 0 25px; 
57 }
58 .service-hd h3 {
59     width: 103px;
60     height: 20px;
61     margin: 0 auto;
62     margin-top: -8px;
63 }
64 .service-hd p {
65     font-size: 16px;
66     color: #666;
67     line-height: 26px;
68     text-align: center;
69     width: 900px;
70     margin: 15px auto 0;
71 }

3.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。