・
.
・
・
・
・
Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。
ログイン後にコピー
2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose
個人ブログアドレス: http://blog.csdn.net/mr_lp H5 をゼロから段階的に学習する方法を紹介する専用のコラムがあります。
QR code.jpg
Follow.gif
フェーズテスト--Yingfen Creative Homepage
今すぐウェブサイトのホームページを作成しましょう。
公式 Web サイトのアドレス: http://www.infinistudio.cn/
今日のレンダリング:
Home page.png
今日の Web サイトのロジック コンセプト:
スクリーンショット 2016-03-15 14.15.21.png
インターフェイスの要件とロジックが分析されたので、作成を開始しましょう最初のページ。
まず、Photoshop を使用して、Web サイトの特定のアイコンなどを取得します。
その後、CSS、画像、その他のフォルダーを含む対応するフォルダーを作成します。
作成後、今日のコード部分を正式に開始します。
警告: 次のコード部分では、ラベルの内容を閉じる必要があります。コピーする必要がある場合は、記事の下部に移動してください。
まず、外部スタイルシートを紹介します。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/layout.css"> </head> <body> </body></html>
ログイン後にコピー
ヘッダー
その後、BODY にホームページのロゴと 4 つのボタンを作成します。見やすくするため、ヘッダー部のCSSスタイルシートをヘッダー部の最後に載せておきます。
<div class="header"> <a href="#"><img src="images/title2.png"/></a> <ul> <li><a href="#">HOME</a></li> <li><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">JOIN US</a></li> </ul> </div>
ログイン後にコピー
ヘッダー部分の CSS コード
/*首先来设置整个界面的文字样式，清除边距*/*{ margin: 0px; font-size: 17px; font-family: "黑体";}/*为整个代码区域附上一个灰色的背景色*/body{ background-color: rgb(242 , 242, 242);}/*===========================================================*//* 头部 *//*===========================================================*/.header{ width: 100%; height: 113px; background-color: rgba(0, 0, 0, 0.5); /*元素框从文档流完全删除，并相对于其包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 不过其包含块是视窗本身.*/ position: fixed; /*设置图片居中*/ text-align: center; /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);}/*调整头部 logo 尺寸*/.header img{ margin: 15px; width: 140px; height: 55px;}ul{ list-style-type: none;}ul a{ /*text-decoration: underline; 下滑线*/ /*text-decoration: line-through; 删除线*/ /*取消a的下滑线*/ text-decoration: none;}a{ color: rgba(255, 255, 255, 0.5);}/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/a:hover{ color: white;}li{ /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/ display: inline; /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/ margin: 0px 30px; padding:0px 20px;}ログイン後にコピー
本文
上記のユーザー ロゴと 4 つのボタンを作成しました。次に行う必要があることメイン部分の作成を開始しましょう。メイン部分は、まずユーザー ガイダンス画像であり、その下にテキストとコンテンツがあり、その下に対応するポイントがあります。まず、ガイド画像を作成しましょう
<div class="content"> - <div class="content_top"> <div class="content_banner"> <a href="#" class="img_bannder"><img class="img_bannder" src="images/banner.jpg" alt="" /></a> <p class="banner_title_bg"> 优酷2014全视频之夜 </p> <div class="xiaodiandian"> <p class="dian"> ・ </p> <p class="dian"> . </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> <p class="dian"> ・ </p> </div> </div> <div class="content_introduce"> <p class="line"></p> <p class="introduce"> Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。</p> </div> </div></div>
ログイン後にコピー
ガイド画像を作成したら、以下のスポンサーアイコンも作成する必要があります。
<div class="content_company"> <p class="line"></p> <div class="company_logo"> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> <img src="images/6.jpg"/> <img src="images/7.jpg"/> <img src="images/8.jpg"/> <img src="images/9.jpg"/> <img src="images/10.jpg"/> <img src="images/11.jpg"/> <img src="images/12.jpg"/> <img src="images/13.jpg"/> <img src="images/14.jpg"/> </div> </div>
ログイン後にコピー
私たちの小さなインターフェース部分です。
<div class="content_bottom"> <div class="news_item"> <a href="#"><img src="images/news1.png"/></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="images/news2.png"/></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="images/news3.png"/></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="images/news4.png"/></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="images/news5.png"/></a> <p>头条号</p> </div> <div class="news_item"> <a href="#"><img src="images/news1.png"/></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="images/news2.png"/></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="images/news3.png"/></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="images/news4.png"/></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="images/news5.png"/></a> <p>头条号</p> </div> </div> </div>
ログイン後にコピー
CSS コード
/*===========================================================*//* 内容区域 *//*===========================================================*/.content{ width: 70%; height: 1620px; margin: auto;}/*banner、公司介绍、合作企业*//*设置具体图片距离顶部标题栏的距离*/.content_top{ width: 100%; height: 690px; margin-top: 130px;}/*横幅*/.content_banner{ width: 100%; height: 490px;}/*设置标题栏下 图片的 尺寸*/.content_banner .img_bannder{ width: 100%; height: 420px; /*position: relative;*/}/*设置提示语大小颜色*/.banner_title_bg{ margin-top: -3px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 5px 0px;}.xiaodiandian{ margin-top: 10px; text-align: center;}.dian{ display: inline;}/*公司介绍*//*设置公司介绍所占得位置大小*/.content_introduce{ width: 100%; height: 80px;}.line{ margin: 0px 10px; background-color: gray; height: 1px; /*透明Opacity：调整元素透明度；*/ opacity: 0.1;}/*设置介绍文字的样式*/.introduce{ padding: 10px; font-size: 13px; color: darkgray; line-height: normal;}/*合作企业底部图片大小*/.content_company{ width: 100%; height: 100px;}div.company_logo{ text-align: center;}div.company_logo img{ width: 60px; height: 38px; /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */ padding: 10px 10px 0px 10px;}/*===========================================================*//* 视频展示 *//*===========================================================*//*首先设置每一个视频图片居中*/.content_bottom{ width: 100%; height: 830px; text-align: center;}/*接下来来规定一下图片的位置尺寸*/.news_item{ /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/ width: 28%; height: 150px; float: left; text-align: center; margin: 20px; background-color: white; /*设置圆角 3 px 像素*/ border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}/*设置背景图片*/.news_item img{ width: 100%; height: 78%; border-radius: 3px;}/*设置图片文字*/.news_item p{ text-align: center; padding: 5px; color: rgba(0, 0, 0, 0.5);}/*设置鼠标放上去，透明度降低*/a:hover{ opacity: 0.5;}ログイン後にコピー
この時点でボディとヘッダーは設定されているはずなので、完成まではそれほど遠くありません。記事の終わりの設定に進みましょう。
<div class="footer"> <table> <tr> <td class="one"> <img src="images/contact1.jpg"/> <img src="images/contact2.jpg"/> <img src="images/contact3.jpg"/> </td> <td class="two"> <p class="vertical_line"></p> </td> <td class="three"> <img class="footer_logo" src="images/footer_logo.jpg"/> <p>Infini Studio | 映纷创意</p> <p>北京市朝阳北路107号院</p> <p>Email:infinistudio@foxmail.com</p> <p>QQ:7585917</p> <p>weibo:@InfiniStudio</p> </td> </tr> </table> </div>
ログイン後にコピー
CSS コード部分
/*===========================================================*//* 尾部 *//*===========================================================*//*设置尾部距离*/.footer{ width: 100%; height: 215px; background-color: rgb(224, 224, 224); margin-bottom: 40px;}/*更改尾部图片大小*/.footer img{ width: 36px; height: 30px; margin-top: 5px;}/*更改文字大小*/.footer p{ color: gray; padding: 3px 0px; font-size: 15px;}table{ width: 100%;}td.one{ width: 48%; text-align: right; /*设置元素的垂直对齐方式*/ vertical-align: top;}td.two{ width: 1%; text-align: center; height: 100%;}.vertical_line{ margin-top: 5px; height: 195px; width: 1px; background-color: gray; opacity: 0.2;}td.three{ width: 48%; text-align: left;}img.footer_logo{ margin-top: -10px; width: 145px; height: 60px;}ログイン後にコピー
現時点で、インターフェースのホームページはほぼ完成していますが、まだ最適化する必要がある機能が多くあります。しかし、私たちの現在の学習レベルには限界があります。スキルが向上したら、より高度な方法でこのインターフェースを再作成できるように指導します。皆さんも墓を掘るためにメッセージを残してください。
今日はここまでです。皆さんも私をフォローして、毎日 10 分間一緒に H5 を学習してください。
HTML コード:
<div class="header"> <a href="#"><img src="images/title2.png"/></a> <ul> <li><a href="#">HOME</a></li> <li><a href="#">WORK</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">JOIN US</a></li> </ul> </div> -<div class="content_bottom"> <div class="news_item"> <a href="#"><img src="images/news1.png"/></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="images/news2.png"/></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="images/news3.png"/></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="images/news4.png"/></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="images/news5.png"/></a> <p>头条号</p> </div> <div class="news_item"> <a href="#"><img src="images/news1.png"/></a> <p>吴亦凡 -- 器官的纷争</p> </div> <div class="news_item"> <a href="#"><img src="images/news2.png"/></a> <p>联想企业业务</p> </div> <div class="news_item"> <a href="#"><img src="images/news3.png"/></a> <p>ME</p> </div> <div class="news_item"> <a href="#"><img src="images/news4.png"/></a> <p>聚划算《世界聚在眼前》</p> </div> <div class="news_item"> <a href="#"><img src="images/news5.png"/></a> <p>头条号</p> </div> </div> </div> <div class="footer"> <table> <tr> <td class="one"> <img src="images/contact1.jpg"/> <img src="images/contact2.jpg"/> <img src="images/contact3.jpg"/> </td> <td class="two"> <p class="vertical_line"></p> </td> <td class="three"> <img class="footer_logo" src="images/footer_logo.jpg"/> <p>Infini Studio | 映纷创意</p> <p>北京市朝阳北路107号院</p> <p>Email:infinistudio@foxmail.com</p> <p>QQ:7585917</p> <p>weibo:@InfiniStudio</p> </td> </tr> </table> </div><div class="content_company"> <p class="line"></p> <div class="company_logo"> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> <img src="images/5.jpg"/> <img src="images/6.jpg"/> <img src="images/7.jpg"/> <img src="images/8.jpg"/> <img src="images/9.jpg"/> <img src="images/10.jpg"/> <img src="images/11.jpg"/> <img src="images/12.jpg"/> <img src="images/13.jpg"/> <img src="images/14.jpg"/> </div> </div>CSS コード:
/*首先来设置整个界面的文字样式，清除边距*/*{ margin: 0px; font-size: 17px; font-family: "黑体";}/*为整个代码区域附上一个灰色的背景色*/body{ background-color: rgb(242 , 242, 242);}/*===========================================================*//* 头部 *//*===========================================================*/.header{ width: 100%; height: 113px; background-color: rgba(0, 0, 0, 0.5); /*元素框从文档流完全删除，并相对于其包含块定位。 包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。 元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 不过其包含块是视窗本身.*/ position: fixed; /*设置图片居中*/ text-align: center; /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);}/*调整头部 logo 尺寸*/.header img{ margin: 15px; width: 140px; height: 55px;}ul{ list-style-type: none;}ul a{ /*text-decoration: underline; 下滑线*/ /*text-decoration: line-through; 删除线*/ /*取消a的下滑线*/ text-decoration: none;}a{ color: rgba(255, 255, 255, 0.5);}/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/a:hover{ color: white;}li{ /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/ display: inline; /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/ margin: 0px 30px; padding:0px 20px;}/*===========================================================*//* 内容区域 *//*===========================================================*/.content{ width: 70%; height: 1620px; margin: auto;}/*banner、公司介绍、合作企业*//*设置具体图片距离顶部标题栏的距离*/.content_top{ width: 100%; height: 690px; margin-top: 130px;}/*横幅*/.content_banner{ width: 100%; height: 490px;}/*设置标题栏下 图片的 尺寸*/.content_banner .img_bannder{ width: 100%; height: 420px; /*position: relative;*/}/*设置提示语大小颜色*/.banner_title_bg{ margin-top: -3px; text-align: center; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 5px 0px;}.xiaodiandian{ margin-top: 10px; text-align: center;}.dian{ display: inline;}/*公司介绍*//*设置公司介绍所占得位置大小*/.content_introduce{ width: 100%; height: 80px;}.line{ margin: 0px 10px; background-color: gray; height: 1px; /*透明Opacity：调整元素透明度；*/ opacity: 0.1;}/*设置介绍文字的样式*/.introduce{ padding: 10px; font-size: 13px; color: darkgray; line-height: normal;}/*合作企业底部图片大小*/.content_company{ width: 100%; height: 100px;}div.company_logo{ text-align: center;}div.company_logo img{ width: 60px; height: 38px; /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */ padding: 10px 10px 0px 10px;}/*===========================================================*//* 视频展示 *//*===========================================================*//*首先设置每一个视频图片居中*/.content_bottom{ width: 100%; height: 830px; text-align: center;}/*接下来来规定一下图片的位置尺寸*/.news_item{ /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/ width: 28%; height: 150px; float: left; text-align: center; margin: 20px; background-color: white; /*设置圆角 3 px 像素*/ border-radius: 3px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}/*设置背景图片*/.news_item img{ width: 100%; height: 78%; border-radius: 3px;}/*设置图片文字*/.news_item p{ text-align: center; padding: 5px; color: rgba(0, 0, 0, 0.5);}/*设置鼠标放上去，透明度降低*/a:hover{ opacity: 0.5;}/*===========================================================*//* 尾部 *//*===========================================================*//*设置尾部距离*/.footer{ width: 100%; height: 215px; background-color: rgb(224, 224, 224); margin-bottom: 40px;}/*更改尾部图片大小*/.footer img{ width: 36px; height: 30px; margin-top: 5px;}/*更改文字大小*/.footer p{ color: gray; padding: 3px 0px; font-size: 15px;}table{ width: 100%;}td.one{ width: 48%; text-align: right; /*设置元素的垂直对齐方式*/ vertical-align: top;}td.two{ width: 1%; text-align: center; height: 100%;}.vertical_line{ margin-top: 5px; height: 195px; width: 1px; background-color: gray; opacity: 0.2;}td.three{ width: 48%; text-align: left;}img.footer_logo{ margin-top: -10px; width: 145px; height: 60px;}ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
<🎜>：Dead Rails-すべての課題を完了する方法
4週間前
By DDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
4週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7663
15
7663
15
CakePHP チュートリアル
1393
52
1393
52
C# チュートリアル
1205
24
1205
24
Steamのアカウント名の形式は何ですか
91
11
91
11
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
WebアノテーションにY軸位置の適応レイアウトを実装する方法は？
Apr 04, 2025 pm 11:30 PM
Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...
CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は？
Apr 05, 2025 am 06:15 AM
画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
