htmlチュートリアル

2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:54 AM

個人ブログアドレス: 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="/static/imghwm/default1.png"  data-src="images/title2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></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 lazy"  src="/static/imghwm/default1.png"  data-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="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                    </div>                </div>

私たちの小さなインターフェース部分です。

<div class="content_bottom">                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news1.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>吴亦凡 -- 器官的纷争</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>联想企业业务</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news3.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>ME</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news4.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>聚划算《世界聚在眼前》</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news5.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>头条号</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news1.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>吴亦凡 -- 器官的纷争</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>联想企业业务</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news3.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>ME</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news4.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>聚划算《世界聚在眼前》</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news5.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="images/contact1.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/contact2.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/contact3.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                    </td>                    <td class="two">                        <p class="vertical_line"></p>                    </td>                    <td class="three">                        <img  class="footer_logo lazy"  src="/static/imghwm/default1.png"  data-src="images/footer_logo.jpg" / alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <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="/static/imghwm/default1.png"  data-src="images/title2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></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>                    -                                                                                            优酷2014全视频之夜                    
                                             ・ 
                         . 
                         ・ 
                         ・ 
                         ・ 
                         ・ 
                    
                
                                    
                        Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。
                
                <div class="content_company">                    <p class="line"></p>                    <div class="company_logo">                        <img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/2.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/3.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/4.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/5.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/6.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/7.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/8.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/9.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/10.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/11.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/12.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/13.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/14.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                    </div>                </div>            
            <div class="content_bottom">                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news1.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>吴亦凡 -- 器官的纷争</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>联想企业业务</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news3.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>ME</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news4.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>聚划算《世界聚在眼前》</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news5.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>头条号</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news1.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>吴亦凡 -- 器官的纷争</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news2.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>联想企业业务</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news3.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>ME</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news4.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>聚划算《世界聚在眼前》</p>                </div>                <div class="news_item">                    <a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/news5.png"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" ></a>                    <p>头条号</p>                </div>            </div>        </div>        <div class="footer">            <table>                <tr>                    <td class="one">                        <img  src="/static/imghwm/default1.png"  data-src="images/contact1.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/contact2.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <img  src="/static/imghwm/default1.png"  data-src="images/contact3.jpg"  class="lazy"/ alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                    </td>                    <td class="two">                        <p class="vertical_line"></p>                    </td>                    <td class="three">                        <img  class="footer_logo lazy"  src="/static/imghwm/default1.png"  data-src="images/footer_logo.jpg" / alt="2016.3.15 ホームページ開設7日目homepage_html/css_WEB-ITnose" >                        <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 コード:

/*首先来设置整个界面的文字样式，清除边距*/*{  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 までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles