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 までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？Mar 17, 2025 pm 12:27 PM

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

WebページのPNG画像にストローク効果を効率的に追加する方法は？Mar 04, 2025 pm 02:39 PM

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？Mar 17, 2025 pm 12:20 PM

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; datalist＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:33 PM

この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; Progress＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:34 PM

この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？Mar 12, 2025 pm 04:05 PM

この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

＆lt; meter＆gt;の目的は何ですか要素？Mar 21, 2025 pm 12:35 PM

この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

ビジュアル Web 開発ツール

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。