HTML學習次日

時間 2019-11-18

標籤 html 學習次日欄目 HTML 简体版

原文原文鏈接

學了兩天的HTML了，感受學習效率很低，跟着敲了個網頁，記錄一下css

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>123</title>
  5 
  6     <!--外部式引入-->
  7     <link rel="stylesheet" type="text/css" href="./css/style.css">
  8 </head>
  9 <body>
 10     <!--頭部（包含logo,菜單列表）-->
 11     <div class="herder">
 12         <!--相對路徑： ./表示當前目錄  ../表示上一級目錄 -->
 13         <img class="logo" src="./images/logo.jpg">
 14         <ul class="meun-ul">
 15             <li>首頁</li>
 16             <li>做品</li>
 17             <li>簡歷</li>
 18             <li>關於</li>
 19         </ul>
 20     </div>
 21     <!-- 內容部分1（包含背景、標題、文字） -->
 22     <div class="content" 
 23          style="width: 700px;
 24                 height: 300px;
 25                "
 26         >
 27         <h3>咱們的信念</h3>
 28         <hr>
 29         <p>
 30             身處在計算機領域的繁榮之下，咱們都在有意或無心地追逐。而 hg團隊恰恰回望當初，奔赴在返璞歸真的漫漫征途，自信並勇敢着，追尋於 原生態的書寫指令，試圖以最簡單的方式詮釋高效。
 31         </p>
 32       </div>
 33     <!-- 內容部分2 -->
 34       <div class="work">
 35           <h1 class="work-title">做品列表</h1>
 36           <div class="work-items">
 37               <div class="work-item">
 38                   <h1>01</h1>
 39                   <hr>
 40                   <h4>圖書館數據可視化</h4>
 41                   <p> 採用echarts圖表技術</p>
 42                   <a href="">查看詳情</a>
 43               </div>
 44               <div class="work-item">
 45                   <h1>01</h1>
 46                   <hr>
 47                   <h4>圖書館數據可視化</h4>
 48                   <p> 採用echarts圖表技術</p>
 49                   <a href="">查看詳情</a>
 50               </div>
 51                             <div class="work-item">
 52                   <h1>01</h1>
 53                   <hr>
 54                   <h4>圖書館數據可視化</h4>
 55                   <p> 採用echarts圖表技術</p>
 56                   <a href="">查看詳情</a>
 57               </div>
 58                             <div class="work-item">
 59                   <h1>01</h1>
 60                   <hr>
 61                   <h4>圖書館數據可視化</h4>
 62                   <p> 採用echarts圖表技術</p>
 63                   <a href="">查看詳情</a>
 64               </div>
 65 
 66       <div class="work-items">
 67         <div class="work-item">
 68           <h1>01</h1>
 69           <hr>
 70           <h4>圖書館數據可視化</h4>
 71           <p> 採用echarts圖表技術</p>
 72           <a href="">查看詳情</a>
 73         </div>
 74 
 75         <div class="work-item">
 76           <h1>01</h1>
 77           <hr>
 78           <h4>圖書館數據可視化</h4>
 79           <p> 採用echarts圖表技術</p>
 80           <a href="">查看詳情</a>
 81         </div>
 82                 <div class="work-item">
 83           <h1>01</h1>
 84           <hr>
 85           <h4>圖書館數據可視化</h4>
 86           <p> 採用echarts圖表技術</p>
 87           <a href="">查看詳情</a>
 88         </div>
 89                 <div class="work-item">
 90           <h1>01</h1>
 91           <hr>
 92           <h4>圖書館數據可視化</h4>
 93           <p> 採用echarts圖表技術</p>
 94           <a href="">查看詳情</a>
 95         </div>
 96 
 97           </div>
 98       </div>
 99 
100 
101 </body>
102 </html>
103     
104   <!-- 尾部 -->
105   <div class="footer">
106     <p>E-MAIL:1253574367@qq.com</p>
107     <p>TEL:+86 187-7119-5812</p>
108     <p>湖北民族大學 hg軟件開發項目組</p>
109   </div>
110 
111 </body>
112 </html>

hg.html

  1 /*.herder{
  2     border: 1px solid red;
  3     */
  4 }
  5 #herder{
  6 
  7 }
  8 body{
  9     margin: 0;
 10 }
 11 .herder{
 12     min-width: 1200px;
 13 }
 14 .logo{
 15     height: 100px;
 16     margin-left:50px;
 17 }
 18 .meun-ul{
 19     float: right;
 20     margin: 0;
 21     margin-right: 150px;
 22     margin-top: 40px;
 23 }
 24 .meun-ul,.meun-ul li{
 25     display: inline;
 26     height: 100px;
 27     margin-left:100px;
 28 }
 29 .meun-ul li{
 30     margin:0 20px 0 20px;/*上 右 下 左*/
 31 }
 32 
 33 .content{
 34     height: 600px;
 35     background-image: url("../images/gy_banner.jpg");
 36     background-size: 110% 100%;
 37     padding: 175px 647px 150px 170px;
 38     color: #fff;
 39 }
 40 
 41 .content h3{
 42     font-size: 36px;
 43 }
 44 .content hr{
 45     display: inline-block;
 46     width: 600px;
 47 }
 48 .content p{
 49     width: 600px;
 50     font-size: 18px;
 51 }
 52 
 53 /*做品列表樣式*/
 54 .work{
 55     text-align: center;
 56     background-repeat: #f2f2f2;
 57     padding-bottom: 50px;
 58 }
 59 .work-title{
 60     text-align: center;
 61     margin: 0px;
 62     padding: 50px 0 20px 0;
 63 }
 64 .work-items{
 65     display: inline-block;
 66     width: 1200px;
 67     min-width: 1200px;
 68     margin: 20px auto;
 69 }
 70 .work-item{
 71     display: inline-block;
 72     width: 275px;
 73     height: 300px;
 74     text-align: center;
 75     background-color: #c1c1c1;
 76     margin: 0 8px;
 77     padding: 20px 0px;
 78 }
 79 .work-item hr{
 80     height: 3px;
 81     background: #000;
 82     width: 75px;
 83     margin: 0 auto;
 84 }
 85 .work-item p{
 86     padding: 0 20px;
 87 }
 88 .work-item a{
 89     text-decoration: none;
 90     color: #000;
 91     border: 1px solid #000;
 92     padding: 5px 10px;
 93     margin-top: 10px;
 94     display: inline-block;
 95 }
 96 .footer{
 97     background: #000;
 98     padding: 20px 0px;
 99 }
100 .footer p{
101     text-align: center;
102     margin: 5px 0;
103     color: #fff;
104 }