day03--百度首頁【37】頭部界面；【38】頭部樣式；【39】表單（上）；【40】表單（下）；【41】列表（上）；【42】列表左邊；【43】列表右邊；【44】內容回顧

時間 2019-12-11

標籤 day03 day 百度首頁頭部界面樣式表單列表左邊右邊內容回顧欄目 HTML 简体版

原文原文鏈接

index.html：主頁面css

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>百度一下, 你就不知道</title>
  6     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  7     <link rel="stylesheet" href="css/index.css">
  8 </head>
  9 <body>
 10 <!--頭部-->
 11 <header id="header">
 12     <!--左邊-->
 13     <div class="header-left">
 14             <span>
 15                 <img src="images/weather.png" alt="" align="center">
 16             </span>
 17         <span class="msg-span">
 18                 <span>|</span>
 19                 <a href="#">換膚</a>
 20                 <a href="#">消息</a>
 21             </span>
 22     </div>
 23     <!--右邊-->
 24     <div class="header-right">
 25         <a href="">新聞</a>
 26         <a href="">hao123</a>
 27         <a href="">地圖</a>
 28         <a href="">學術</a>
 29         <a href="http://www.itlike.com">撩課學院</a>
 30         <a href="" class="more-product">更多產品</a>
 31     </div>
 32 </header>
 33 <!--搜索-->
 34 <section id="content">
 35     <!--logo-->
 36     <div class="logo">
 37         <img src="images/bd_logo.png" alt="百度logo">
 38     </div>
 39     <div class="search">
 40         <form action="http://www.itlike.com">
 41             <input name="content" type="text" class="search-input">
 42             <input name="btn" type="submit" class="search-submit" value="百度一下">
 43         </form>
 44     </div>
 45     <!--搜索-->
 46 </section>
 47 <!--列表-->
 48 <section id="list">
 49     <!--頭部-->
 50     <div class="list-head">
 51         <!--左邊-->
 52         <div class="list-head-left">
 53             <a href="">
 54                 <img src="images/person_icon.png" alt="">
 55                 <span>個人關注</span>
 56             </a>
 57             <a href="">
 58                 <span>推薦</span>
 59             </a>
 60             <a href="">
 61                 <span>導航</span>
 62             </a>
 63         </div>
 64         <!--右邊-->
 65         <div class="list-head-right">
 66             <a href="#">
 67                 <img src="images/setting_icon.png" alt="">
 68             </a>
 69         </div>
 70     </div>
 71     <!--內容-->
 72     <div class="list-content">
 73         <!--內容的左邊-->
 74         <div class="list-content-left">
 75             <!--1-->
 76             <div class="list-content-cell1">
 77                 <h3>大滿貫14冠！德約3-0完勝波特羅 美網三度封王</h3>
 78                 <img src="images/cell_img1.png" alt="">
 79                 <img src="images/cell_img2.png" alt="">
 80                 <img src="images/cell_img3.png" alt="">
 81                 <p>網易新聞 09-20 13:19</p>
 82             </div>
 83             <!--2-->
 84             <div class="list-content-cell2">
 85                 <div class="cell-img">
 86                     <img src="images/cell_img1.png" alt="">
 87                 </div>
 88                 <div class="cell-title">
 89                     <h3>大滿貫14冠！德約3-0完勝波特羅 美網三度封王</h3>
 90                     <p>網易新聞 09-10 13:19</p>
 91                 </div>
 92             </div>
 93             <!--3-->
 94             <div class="list-content-cell2">
 95                 <div class="cell-img">
 96                     <img src="images/cell_img2.png" alt="">
 97                 </div>
 98                 <div class="cell-title">
 99                     <h3>大滿貫14冠！德約3-0完勝波特羅 美網三度封王</h3>
100                     <p>網易新聞 09-10 13:19</p>
101                 </div>
102             </div>
103         </div>
104         <!--內容的右邊-->
105         <div class="list-content-right">
106             <div class="right-top">
107                 <h4>實時熱點</h4>
108                 <div>
109                     <img src="images/circle_icon.png" alt="">
110                     <span>換一換</span>
111                 </div>
112             </div>
113             <div class="right-body">
114                 <ul>
115                     <li>高曉鬆 丁香醫生</li>
116                     <li>中國參加俄軍演</li>
117                     <li>高曉鬆 丁香醫</li>
118                     <li>中國參加俄軍演</li>
119                     <li>高曉鬆 丁香醫生</li>
120                     <li>中國參加俄軍演</li>
121                     <li>高曉鬆 丁香醫</li>
122                     <li>中國參加俄軍演</li>
123                     <li>高曉鬆 丁香醫生</li>
124                     <li>中國參加俄軍演</li>
125                     <li>高曉鬆 丁香醫</li>
126                     <li>中國參加俄軍演</li>
127                 </ul>
128             </div>
129         </div>
130     </div>
131 </section>
132 </body>
133 </html>

一、拿進圖標：html

link：favicon--->tab鍵--->

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

二、引入index.css（樣式文件）spa

<link rel="stylesheet" href="css/index.css">

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 
  5     box-sizing: border-box;
  6 }
  7 
  8 body {
  9     /*margin-bottom: 200px;*/
 10 }
 11 
 12 /************************頭部-start**********************/
 13 #header {
 14     height: 33px;
 15     border-bottom: 1px solid #ebebeb;
 16 }
 17 
 18 #header a {
 19     color: #555555;
 20     font-size: 13px;
 21 }
 22 
 23 #header .header-left {
 24     width: 270px;
 25     height: 33px;
 26     float: left;
 27     line-height: 33px;
 28 }
 29 
 30 #header .header-left a {
 31     margin-left: 8px;
 32 }
 33 
 34 #header .header-right {
 35     width: 600px;
 36     height: 33px;
 37     float: right;
 38     text-align: right;
 39     line-height: 33px;
 40 }
 41 
 42 #header .header-right a {
 43     font-weight: bolder;
 44     margin-left: 15px;
 45 }
 46 
 47 #header .header-right a.more-product {
 48     background-color: #398bfb;
 49     /*行內 --> 行內-塊級*/
 50     display: inline-block;
 51     width: 86px;
 52     height: 33px;
 53     line-height: 33px;
 54     text-align: center;
 55     color: #fff;
 56     text-decoration: none;
 57 
 58     vertical-align: top;
 59 }
 60 
 61 /************************頭部-end**********************/
 62 
 63 /************************搜索-start**********************/
 64 #content {
 65     width: 641px;
 66     height: 189px;
 67     margin: 20px auto;
 68     /*background-color: green;*/
 69 }
 70 
 71 #content .logo {
 72     /*background-color: red;*/
 73     text-align: center;
 74     width: 641px;
 75     height: 112px;
 76 }
 77 
 78 #content .logo img {
 79     width: 270px;
 80     height: 112px;
 81 }
 82 
 83 #content .search {
 84     width: 100%;
 85     height: 77px;
 86     /*background-color: skyblue;*/
 87     padding-top: 10px;
 88 }
 89 
 90 #content .search form {
 91     width: 100%;
 92     height: 44px;
 93     /*background-color: purple;*/
 94 }
 95 
 96 #content .search form .search-input {
 97     width: 536px;
 98     height: 44px;
 99     padding-left: 8px;
100 
101     /*去除外邊框*/
102     outline: none;
103 
104     border: 1px solid #e0e0e0;
105 
106     float: left;
107 }
108 
109 #content .search form .search-input:focus {
110     border-color: #398bfb;
111 }
112 
113 #content .search-submit {
114     width: 105px;
115     height: 44px;
116     background-color: #398bfb;
117     border: none;
118     float: left;
119     color: #fff;
120     font-size: 16px;
121 
122     /*去除外邊框*/
123     outline: none;
124 }
125 
126 /************************搜索-end**********************/
127 
128 /************************列表-start**********************/
129 #list {
130     width: 893px;
131     height: 600px;
132     border: 1px solid #ebebeb;
133     margin: 0 auto;
134 }
135 
136 #list .list-head {
137     height: 40px;
138     line-height: 40px;
139     border-bottom: 1px solid #ebebeb;
140 }
141 
142 #list .list-head .list-head-left {
143     float: left;
144     /*解決空格留白的問題*/
145     font-size: 0;
146 }
147 
148 #list .list-head .list-head-left a {
149     display: inline-block;
150     height: 40px;
151     line-height: 40px;
152     /*background-color: red;*/
153 
154     font-size: 14px;
155     text-decoration: none;
156     padding: 0 10px;
157 
158     color: #555555;
159     vertical-align: top;
160 }
161 
162 #list .list-head .list-head-left a img,
163 #list .list-head .list-head-left a span {
164     vertical-align: middle;
165 }
166 
167 #list .list-head .list-head-left a:hover {
168     background-color: #cccccc;
169 }
170 
171 #list .list-head .list-head-right {
172     float: right;
173     margin-right: 10px;
174 }
175 
176 #list .list-head .list-head-right img {
177     vertical-align: middle;
178 }
179 
180 /*列表內容*/
181 #list .list-content {
182 
183 }
184 
185 #list .list-content .list-content-left {
186     width: 575px;
187     height: 600px;
188     /*background-color: red;*/
189     float: left;
190     padding: 10px 5px 5px 10px;
191 }
192 
193 #list .list-content .list-content-left .list-content-cell1 {
194     border-bottom: 1px solid #e0e0e0;
195     padding-bottom: 5px;
196 }
197 
198 #list .list-content .list-content-left .list-content-cell1 h3 {
199     margin-bottom: 10px;
200 }
201 
202 #list .list-content .list-content-left .list-content-cell1 p {
203     margin: 3px 0;
204     color: #555555;
205     font-size: 12px;
206 }
207 
208 #list .list-content .list-content-left .list-content-cell2 {
209     padding: 20px 0;
210     height: 160px;
211     border-bottom: 1px solid #e0e0e0;
212 }
213 
214 #list .list-content .list-content-left .list-content-cell2 .cell-img {
215     float: left;
216 }
217 
218 #list .list-content .list-content-left .list-content-cell2 .cell-title{
219     float: left;
220     width: 360px;
221     padding: 20px;
222 }
223 
224 #list .list-content .list-content-left .list-content-cell2 h3 {
225     margin-bottom: 10px;
226 }
227 
228 #list .list-content .list-content-left .list-content-cell2 p {
229     margin: 3px 0;
230     color: #555555;
231     font-size: 12px;
232 }
233 
234 #list .list-content .list-content-right{
235     width: 315px;
236     height: 600px;
237     /*background-color: red;*/
238     float: left;
239 }
240 
241 #list .list-content .list-content-right .right-top{
242     height: 60px;
243     width: 315px;
244     /*background-color: green;*/
245     padding: 20px;
246 }
247 
248 #list .list-content .list-content-right .right-top h4{
249     float: left;
250 }
251 
252 #list .list-content .list-content-right .right-top div{
253     float: right;
254 }
255 
256 #list .list-content .list-content-right .right-top div img,
257 #list .list-content .list-content-right .right-top div span{
258     vertical-align: middle;
259 }
260 
261 #list .list-content .list-content-right .right-body{
262     /*background-color: red;*/
263     padding: 0 20px;
264 }
265 
266 #list .list-content .list-content-right .right-body ul li{
267     list-style: none;
268     width: 130px;
269     height: 40px;
270     line-height: 40px;
271     float: left;
272 
273     color: #666666;
274     font-size: 14px;
275 }
276 
277 /************************列表-end**********************/

從邊框往裏面走，不會隨着後續動做致使邊框大小改變
* {
      margin: 0;
      padding: 0;
  
      box-sizing: border-box;
  }

三、a*2兩個a標籤：<a href=""></a><a href=""></a>code

四、orm

先複製新聞等文字，而後鼠標放到新聞處視頻

按下Alt鍵，鼠標往下拉：htm

而後輸入a:blog

最後tab鍵，完成ci

【視頻38】input

相關標籤/搜索

每日一句

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