今日はhtml+cssを使って最もシンプルなページを作ります。レンダリングは次のとおりです。
注: ここでの韓国語の単語は中国語に置き換えることができます。
1. レンダリングを取得したら、まずページ レイアウトを分析します
画像は 5 つの大きな DIV に分割された垂直構造です。
作成したページの幅は 1024px で、5 つの DIV の外側に大きなフレームが追加されます。 all という名前のクラス。幅を1024pxに設定し、中央揃えにします。
通常、ページは順番に実行されます。これは個人の習慣によって異なります。 1ページだけなので、CSSとHTMLは同じページ内に記述します。
2. まず最初の div を記述し、top というクラス名を付けます。
CSS スタイルは次のとおりです:
効果は次のとおりです:
最初の div が準備できました。
3. 以下のメニューとロゴを作成します
レンダリング:
4. メニューのサブメニューを次のように作成します
一般的に二次向けメニュー ここでは js を使用せず、css を直接使用して第 1 レベルのメニューと第 2 レベルのメニューを配置し、スタイル (図の長方形のボックス内の CSS) を使用しました。第 2 レベルのメニューの非表示と表示を制御します。この方法で書くことの欠点は、IE6 と互換性がないことです。 Google、Firefox、IE の上位バージョンなど、他の主流ブラウザーと互換性があります。
5. バナーを使用するのが最善です。写真を直接配置することも、背景を設定することもできます。ここでは省略
6. メインコンテンツの4番目のDIVを分析します
このDIVは2つのレイヤーに分かれており、最初のレイヤーにはニュースリスト、会社概要と製品センターが表示され、2番目のレイヤーにはロゴ+著作権の説明とドロップが表示されます。 -down box
最初のレイヤーの内容を並べて表示するため、これら 3 つの DIV は左フローティングのように設定されます。
左から右の順序で、最初にニュースセクションを作成します
スタイル:
7. 画像を左に直接フローティングさせます。左右の構造が出てきます。この書き方でまだ問題に遭遇したことはありません。
プロダクトセンターはjsで作ったシャッターエフェクトにする必要がありますが、ここでは今のところのスタイルです。エフェクトは後ほど追加します。製品センターと下部のロゴの間に下部のロゴとその他の div を追加すると、自動的に下に表示されます。
コードは以下に添付されています:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>html+css基本页面</title><style type="text/css">*{ margin:0; padding:0; font-size:12px; color:#464646;}a{ text-decoration:none;}ul li{ list-style:none;}.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}/*.clear样式的作用是清除浮动*/.all{ width:1024px; margin:0 auto;}.top{ background:#404040; display:table; width:100%;}.top ul{ float:right; margin-right:30px;}.top ul li{ float: left; margin:0px 10px;}.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}.header{ background:url(images/menu_bg.jpg) repeat-x;}.logo img{ display:block; margin:0px auto; padding-top:20px;}.menu{ display:table; margin:0 auto;}.menu ul li{ float:left; position:relative;}.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}.menu ul li:hover ul{ display:table;}.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}.menu ul li ul li{ float:left;}.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}.menu ul li ul li a:hover{ background:none; color:#246477;}.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}.news{ float:left; width:220px; margin:0px 20px;}.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}.news ul li{ line-height:22px;}.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;} .about{ width:305px; display:table; margin:0px 20px; float:left;}.about img{ float:left; margin:20px;}.about img.view{ margin:5px 0px 0px 0px;}.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px; }.about span{ line-height:20px; display:block;}.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}.pro ul{ float:left;}.pro ul.pro_ulview{ width:254px;}.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}.pro ul img.view{ margin-top:40px; }.pro ul img{ float:none; display:block;}.pro ul strong{ display:table; line-height:30px; margin-left:20px;}.pro ul span.view{ width:140px; display:block; margin-left:20px;}.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}.footer_logo{ float:left; margin:20px;}.footer_menu{ float:left; margin:5px 0px 0px 70px;}.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}.footer_menu ul.bq{ margin-left:38px;}.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}.select{ float:right; margin-top:20px;}</style></head><body><div class="all"> <div class="top"> <ul> <li><a href="#" class="a_hover">头部示例1</a></li> <li><a href="#">头部示例2</a></li> <li><a href="#">头部示例3</a></li> <li><a href="#">头部示例4</a></li> </ul> </div> <div class="clear"></div> <div class="header"> <div class="logo"> <img src="images/logo.png" alt="logo" /> </div> <div class="menu"> <ul> <li class="li_line"></li> <li> <a href="#" class="menua_hover">菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">二级菜单1</a></li> <li><a href="#">二级菜单2</a></li> <li><a href="#">二级菜单3</a></li> <li><a href="#">二级菜单4</a></li> </ul> </li> <li class="li_line"></li> <li><a href="#">菜单3</a></li> <li class="li_line"></li> <li><a href="#">菜单4</a></li> <li class="li_line"></li> <li><a href="#">菜单5</a></li> <li class="li_line"></li> <li><a href="#">菜单6</a></li> <li class="li_line"></li> </ul> </div> </div> <div class="clear"></div> <div> <img src="images/banner.jpg" alt="banner" /> </div> <div class="clear"></div> <div class="main"> <div class="news"> <dl> <dd>NEWS</dd> <dt>more</dt> </dl> <div class="clear"></div> <ul> <li><a href="#">新闻示例1新闻示例1新闻示例1新闻示例1</a></li> <li><a href="#">新闻示例2新闻示例2新闻示例2新闻示例</a></li> <li><a href="#">新闻示例3新闻示例3新闻示例3新闻示例</a></li> <li><a href="#">新闻示例4新闻示例4新闻示例4新闻示例</a></li> </ul> </div> <div class="about"> <img src="images/about.png" alt="about" /> <h3>ABOUT</h3> <span>关于我们关于我们关于我们关于我们关于我们关于我们</span> <a href="#"><img src="images/about_view.png" alt="view" class="view"/></a> </div> <div class="pro"> <ul class="pro_ulview"> <li> <strong>产品<span>案例1</span></strong> <span class="view">产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介</span> <a href="#" class="more"><img src="images/about_view.png" alt="view"/></a> </li> <img src="images/pro_img.png" alt="pro" class="view"/> </ul> <ul> <li></li> </ul> <ul> <li></li> </ul> </div> <div class="clear"></div> <div class="footer_logo"><img src="images/footer_logo.png" alt="footer_logo" /></div> <div class="footer_menu"> <ul> <li><a href="#">首页</a></li> <li class="fli_line"></li> <li><a href="#">关于我们</a></li> <li class="fli_line"></li> <li><a href="#">产品中心</a></li> </ul> <div class="clear"></div> <ul class="bq"><span>版权所有@某某网站</span><span>联系电话:01234567890</span></ul> </div> <div class="select"><img src="images/select.jpg" alt="select" /></div> </div> </div></body></html>ログイン後にコピー
写真に関しては、レンダリングから切り出すだけです。
このようにまとめたのは初めてなので至らない点はご容赦ください。皆さんとコミュニケーションをとりながら、一緒に前進していけたらと思っています。
ページは通常、特殊効果ページと通常ページに分かれています。
レイアウトは通常、メニュー + ロゴ、メインコンテンツ、最後の著作権ステートメントに分かれています。
特撮ページのレイアウトは不確かで、通常ページのレイアウトは上中下に分かれており、真ん中は上下構造か左右構造に分かれています。まずは大枠を作ってから少しずつ埋めていくと楽です。
最後に、参考 Web サイトを紹介します: http://www.w3school.com.cn/ ここには、基本的にフロントエンドに必要なものがすべて揃っています。問題が発生した場合は、解決策を見つけるためにそこに行くことができます。個人的にかなりオススメです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
