div+cssモードでhtml静的Webページを記述する例_webpage_html/css_WEB-ITnoseの後に作成します-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

div+cssモードでhtml静的Webページを記述する例_webpage_html/css_WEB-ITnoseの後に作成します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4     <meta charset="UTF-8">  5     <title></title>  6     <link rel="stylesheet" type="text/css" href="citizens.css">  7 </head>  8 <body>  9  10 <!--line1--> 11 <div class="line1"> 12     <div> 13         <img src="line1_logo.png"> 14     </div> 15     <div class="topsearch"> 16         <input type="text" name="search"><br/> 17         <ul> 18             <li><a href="#">辽宁朝阳&nbsp</a></li> 19             <li><a href="#">辽宁朝阳&nbsp</a></li> 20             <li><a href="#">辽宁朝阳&nbsp</a></li> 21             <li><a href="#">辽宁朝阳&nbsp</a></li> 22             <li><a href="#">辽宁朝阳&nbsp</a></li> 23         </ul> 24     </div> 25     <div class="topbutton"> 26         <ul > 27             <li><button class="button" datasrc="#">免费发布信息</button></li><!--应该怎么做？？？--> 28             <li><a href="#">修改/删除信息</a></li> 29         </ul> 30     </div> 31 </div> 32  33  34 <!--line2、3、4--> 35 <div class="line234"> 36     <!--特色类目--> 37     <div class="special"> 38         <!--标题图--> 39         <span><img src="line2_title1.png"/></span> 40         <!--6张图--> 41             <ul class="sixul"> 42                 <li> 43                     <img src="icon1.png"/><br/> 44                     <a href="#">闲置真心送</a> 45                 </li> 46                 <li> 47                     <img src="icon2.png"/><br/> 48                     <a href="#">拼车顺风车</a> 49                 </li> 50                 <li> 51                     <img src="icon3.png"/><br/> 52                     <a href="#">宠物赠送</a> 53                 </li> 54                 <li> 55                     <img src="icon4.png"/><br/> 56                     <a href="#">找人寻物</a> 57                 </li> 58                 <li> 59                     <img src="icon5.png"/><br/> 60                     <a href="#">技能交换</a> 61                 </li> 62                 <li> 63                     <img src="icon6.png"/><br/> 64                     <a href="#">找室友合租</a> 65                 </li> 66             </ul> 67         <!--三张图--> 68         <ul class="threepictures"> 69             <a href="#"><img src="pic_big_1.png"/></a> 70             <a href="#" id="righttop"><img src="pic_small_1.png"/></a> 71             <a href="#"><img src="pic_small_11.png"/></a> 72         </ul> 73     </div> 74     <!--二手市集--> 75     <div class="special"> 76         <!--标题图--> 77         <span><img src="line2_title2.png"/></span> 78     </div> 79     <!--二手车--> 80     <div class="special"> 81         <!--标题图--> 82         <span><img src="line2_title3.png"/></span> 83     </div> 84     <!--人才招聘--> 85     <div class="person"> 86         <!--标题图--> 87         <span><img src="line2_title4.png"/></span> 88         <table> 89             <!--一行--> 90             <tr> 91                 <td><a href="#">一表人才</a></td> 92                 <td><a href="#">一表人才</a></td> 93                 <td><a href="#">一表人才</a></td> 94                 <td><a href="#">一表人才</a></td> 95             </tr> 96             <!--一行--> 97             <tr> 98                 <td><a href="#">一表人才</a></td> 99                 <td><a href="#">一表人才</a></td>100                 <td><a href="#">一表人才</a></td>101                 <td><a href="#">一表人才</a></td>102             </tr>103             <!--一行-->104             <tr>105                 <td><a href="#">一表人才</a></td>106                 <td><a href="#">一表人才</a></td>107                 <td><a href="#">一表人才</a></td>108                 <td><a href="#">一表人才</a></td>109             </tr>110             <!--一行-->111             <tr>112                 <td><a href="#">一表人才</a></td>113                 <td><a href="#">一表人才</a></td>114                 <td><a href="#">一表人才</a></td>115                 <td><a href="#">一表人才</a></td>116             </tr>117             <!--一行-->118             <tr>119                 <td><a href="#">一表人才</a></td>120                 <td><a href="#">一表人才</a></td>121                 <td><a href="#">一表人才</a></td>122                 <td><a href="#">一表人才</a></td>123             </tr>124             <!--一行-->125             <tr>126                 <td><a href="#">一表人才</a></td>127                 <td><a href="#">一表人才</a></td>128                 <td><a href="#">一表人才</a></td>129                 <td><a href="#">一表人才</a></td>130             </tr>131             <!--一行-->132             <tr>133                 <td><a href="#">一表人才</a></td>134                 <td><a href="#">一表人才</a></td>135                 <td><a href="#">一表人才</a></td>136                 <td><a href="#">一表人才</a></td>137             </tr>138             <!--一行-->139             <tr>140                 <td><a href="#">一表人才</a></td>141                 <td><a href="#">一表人才</a></td>142                 <td><a href="#">一表人才</a></td>143                 <td><a href="#">一表人才</a></td>144             </tr>145             <!--一行-->146             <tr>147                 <td><a href="#">一表人才</a></td>148                 <td><a href="#">一表人才</a></td>149                 <td><a href="#">一表人才</a></td>150                 <td><a href="#">一表人才</a></td>151             </tr>152             <!--一行-->153             <tr>154                 <td><a href="#">一表人才</a></td>155                 <td><a href="#">一表人才</a></td>156                 <td><a href="#">一表人才</a></td>157                 <td><a href="#">一表人才</a></td>158             </tr>159             <!--一行-->160             <tr>161                 <td><a href="#">一表人才</a></td>162                 <td><a href="#">一表人才</a></td>163                 <td><a href="#">一表人才</a></td>164                 <td><a href="#">一表人才</a></td>165             </tr>166         </table>167     </div>168     <!--便民服务-->169     <div class="convenient"></div>170     <!--工具-->171      <div class="tool"></div>172     <!--百姓故事-->173     <div class="convenient"><a href="#"><img src="line4_1.png"/></a></div>174     <!--百姓网卧槽-->175     <div class="convenient"><a href="#"><img src="line4_2.png"/></a></div>176     <!--快速入职-->177     <div class="convenient"><a href="#"><img src="lin4_3.png"/></a></div>178     <!--微信-->179     <div class="wechat"><img src="lin4_wechat.png"></div>180 </div>181 182 183 <!--line5-->184 <div class="line5">185     <!--bottom-->186     <div class="botoom">187         <img src="line5_bottom.png"/>188     </div>189 </div>190 191 </body>192 </html>

ログイン後にコピー

  1 body{  2     margin: 0 auto;  3     border:1px solid gainsboro;  4     width: auto;  5 }  6   7 a:link{  8     text-decoration: none;  9     color: black; 10     font-size: 14px;/*为什么都是14px 表格里的比其他地方的字体小？？？*/ 11 }/*未放鼠标*//*要设置字体颜色去相应的地方设定 （在全局设为什么不管用？？？）*/ 12  13 a:hover{ 14     text-decoration: underline; 15     color: black; 16 }/*鼠标放在上面*/ 17 /*  a:link { text-decoration: none;color: blue} 18 　　 a:active { text-decoration:blink} 19 　　 a:hover { text-decoration:underline;color: red} 20 　　 a:visited { text-decoration: none;color: green} 21    其中： 22 　　a:link 指正常的未被访问过的链接； 23 　　a:active 指正在点的链接； 24 　　a:hover 指鼠标在链接上； 25 　　a:visited 指已经访问过的链接； 26 　　text-decoration是文字修饰效果的意思； 27 　　none参数表示超链接文字不显示下划线； 28 　　underline参数表示超链接的文字有下划线*/ 29  30 ul{ 31     list-style-type: none; 32 } 33  34 .line1{ 35     height: 115px; 36     background-color:#EEEFF1; 37     border: solid 2px #DEDEDE; 38 } 39  40 .line1 div{ 41     float: left; 42     height: 115px; 43 } 44  45 .topsearch{ 46     width: 553px; 47 } 48  49 .topsearch input{ 50     margin: 30px 50px 0px 150px; 51 } 52  53 .topsearch ul li{ 54     float: left; 55     border-right: solid 2px #999999; 56 } 57  58 .topbutton ul{ 59     margin: 30px; 60 } 61  62 .topbutton a{ 63     color: #999999; 64     text-align: center; 65 } 66  67 .button{ 68     height: 45px; 69     width: 180px; 70     background-color: #FF4466; 71     border: none; 72     color: white; 73 } 74  75 .line234{ 76     background-color: #EEEFF1; 77     height: 1090px; 78     padding: 26px 67px 55px 77px; 79 } 80  81 .special{ 82     background-color: white; 83     width: 223px; 84     height: 500px; 85     float: left; 86     margin: 0 21px 0 0; 87     /*border: solid 1px #DEDEDE;*//*为什么加border格子就乱了？？？？？*/ 88 } 89  90 .special span img{ 91     width: 223px; 92 } 93  94 .sixul{ 95     padding: 0 15px; 96 } 97  98 .sixul li{ 99     margin: 10px 0 0 0;100     float: left;101 }/*ul内边距为零 li外边距为0 可有效去除ul自带的左边距*/102 103 .sixul li img {104     width: 96px;105     height: 44px;106     margin-bottom:5px;107 }108 109 .sixul li a{110     text-align: end;/*???为什么不居中*/111     color: black;112 }113 114 115 .threepictures{116     padding: 0 15px 0 15px;117     position: relative;118     float: left;119 }120 121 .threepictures li{122     float: left;123 }124 125 #righttop{126   position: absolute;127     left: 146px;128     top: 0;129 }130 131 .person{132     background-color: white;133     width: 465px;134     height: 500px;135     float: left;136 }137 138 .person span img{139     width: 465px;140 }141 142 .person table{143     margin-left: 30px;144     align-items: center;/*为什么不管用????*/145     border: 1px red;/*为什么不管用？？？？*/146     width:436px;147     height:396px;148 }149 150 .person table a{151     color: black;152 }153 154 .convenient{155     background-color: chartreuse;156     width: 223px;157     height: 260px;158     float: left;159     margin: 24px 21px 0 0;160 }161 162 .convenient img{163     width: 223px;164     height: 260px;165 }166 167 .tool{168     background-color: black;169     width: 954px;170     height: 260px;171     float: left;172     margin: 24px 0 0 0;173 }174 175 .wechat{176     background-color: green;177     width: 470px;178     height: 260px;179     float: left;180     margin: 24px 0 0 0;181 }182 183 .wechat img{184     width: 470px;185     height: 260px;186 }187 188 .line5{189     background-color:#EEEFF1;190     height: 235px;191     border: solid 2px #DEDEDE;192     /*padding:85px 0 0 0;*/193 }194 195 .botoom{196     height: 150px;197     width: 1350px;198     float: left;199     margin-top: 86px;200 }201 /*???????202 给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，遇到此问题203 1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）204 2、为父元素添加overflow：hidden；样式即可（完美）205 3、为父元素或者子元素声明浮动（float：left；可用）206 4、为父元素添加border（border:1px solid transparent可用）207 5、为父元素或者子元素声明绝对定位208 */209 210 .botoom img{211     height: 150px;212     width: 1350px;213 }

ログイン後にコピー

div+css プログラミングモードを使用して HTML 静的 Web ページを作成するのは初めてです。時間の関係で完全に完了することはできませんでしたが、習得したテクニックや発見した疑問など、多くのことを得ることができました。

習得した技術は次の 2 点に要約できます: 1. Web ページのレイアウトのためのフローティング技術とボックスモデルの使用を予備的に習得します。 2. 親子セレクターなどのセレクターの使い方を事前にマスターします。

まだ回答されていない質問がたくさん見つかりました。そのほとんどはメモにマークされており、来週できるだけ早く解決される予定です。

質問の解決、提案、コミュニケーションにご協力いただける皆様を歓迎します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。