インラインブロック使用:ディスプレイ入門

これが私の最初のブログで、私の新たな始まりは、私は私の学習の旅を記録するためにブログを使用して、ここで私は私の兄に感謝したい、彼は私の視野を広げるために連れて行ってくれた、私を持って、私のパターンを修正しましたポジティブなエネルギーに。私は長い間、10日の研究HTMLとCSSを学ぶために行くには白、長い道のりを思い、言葉がでなければならず、廃棄物のすべての日は!返済している
この時間は、以下の降り学習の問題点を要約し、学習印象


私が一番上にロゴと検索ボックスを追加したい最初の質問は、小さなアイコンを検索するための検索ボックスがあります

<div id="logo">
            <img src="image/logo.PNG" alt="image" title="xinlanglogo">
            <p>
            <input type="text" name="fullname">
            <a href="#" class="YourWebFontName">f</a>
            </p>
            
</div>
#logo{                  
    margin-top: -10px;
    margin-left: 60px;   
}

;および垂直整列インラインブロック:私はいくつかの紆余曲折の後、最終的にはディスプレイ使用、効果、私はコマンドをデバッグするとき、ロゴと検索ボックスがフロートマージンと一致することはできませんが見つかりません真ん中を、インターンシップ。そこ小さいアイコンは、私が移動する方法を考えていた、内部に入ることはなく、検索ボックスの外にあるが、どのように携帯しているではない、その後、私の弟は、国境のセット以外の検索ボックスに境界線を削除するために私に言った、この問題を達成することができました。

#logo > * {
    display: inline-block;
    vertical-align: middle;
} 
#logo > p > * {
    display: inline-block;
    vertical-align: middle;
    border: none;
}
#logo p {              
    border: 1px solid rgb(219, 92, 19);
    margin-left: 50px;
}
#logo  p a{
    text-decoration: none; 
}

画像のキャプション

2番目の質問
画像のキャプションの最初の考えと一致私はちょうど下の検索ボックスをしたいとの国境には、次のフレームが短くなり得ることです、そして、この後が確立されていない、次の考えはDIVボックスを小さくする方法ですが、私が思うことを発見します彼は少し私の後ろになってみましょう、それは大きな支持できない私にはないしようとしなかった、私は最終的に所望の効果にマージン左コマンドを使用して、彼のサイズを変更しました。
これは、元のコードです

<div id="denglv">
                    <p>
                        <a id="zhdl"><b>账户登录</b></a>
                        <a  id="zhzc">账户注册</a>
                    </p>
                  <div class="denglvkuang>
#denglv {              
    background:#fff;
    width:400px;
    height: 380px;
    border: 20px solid #f2f2f5;
}
#zhdl {             
    width: 50%;
    float: left;
    padding-bottom: 10px;
    border-bottom: 2px solid #ff8140;
    text-align: center;
}

#zhzc {               
    width:50%;
    float: right;
    text-align: center;
}

画像のキャプション

#Zhdl幅の変化:45%、マージン左 :26px; 所望の効果を得るが、アカウント登録の後ろに
幅も変更する必要があります。

私は他のログの後ろに、自分の下に、ここで強調しなければならない特別な低レベルのエラーがあり、これらの写真は、パスが間違っていたときの背後に背景画像を挿入し、使用済みのbackgroudの位置指令であり、これがあるとは思いませんでした問題!
私は運動したいですか、私は誰かが不可能であることを教えてくれます、解決するのではなく、見当がつかない、後に多くの学習上の問題があるだろうしやるべき質問があり、非常に重要であり、私の問題解決のアイデアに反映したいと思います問題やアイデアを解決する能力、後には長い道のり、問題の多くを学ぶ、私はこれが開始され、または起動するだけでなく、ほとんど進展、自分の燃料を与えるされないと言うことができます!
勝者がすべてを取ります

おすすめ

転載: www.cnblogs.com/homehtml/p/12068207.html