CSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)

この記事の目標:

1. CSS3 での border-radius の使用法をマスターする

質問:

次のインターフェイス効果を実現します (検索機能はありません)必須)、要件 フレーム、純粋な div css3 は使用せず、境界半径のナレッジ ポイントを使用する必要があります

その他の指示:

1.全体幅は 800x で、表示

2 を中央に配置する必要があります。ロゴ画像の幅は 300 ピクセルで、中央の表示は

3 です。検索ボックスの幅 = 500 ピクセル、および全体の高さは 50px

アイデア分析:

1. ページは上部と下部に分かれており、上部はロゴ、下部は検索機能。

2. 以下の検索機能のコンポーネントは、左から右に、角の丸い入力ボックス、小さなカメラのアイコン、右端の角の丸いボタンです

具体的なコードは次のように実装されます:

1. まず素材を準備しましょう はい、Baidu ロゴの画像と小さなカメラ アイコンを配置します。管理を容易にするために画像ディレクトリ

#2 に最初に div 構造を記述します

nbsp;html>


    <meta>
    <meta>
    <title>模拟百度搜索</title>


    <div>
        <!-- 上面部分:logo图片 -->
        <div>
            
        </div>
        <!-- 下面部分：搜索功能 -->
        <div>

        </div>
    </div>

3。詳細を入力します。最初にスタイルを記述せず、要素を入力するだけです。

コードは次のとおりです:

nbsp;html>


    <meta>
    <meta>
    <title>模拟百度搜索</title>


    <div>
        <!-- 上面部分:logo图片 -->
        <div>
            <img  class="camIcon lazy" src="/static/imghw/default1.png" data-src="images/cam.png" alt="CSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div>
            <input>
            <img  class="camIcon lazy" src="/static/imghw/default1.png" data-src="images/cam.png" alt="CSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)" >
            <input>
        </div>
    </div>

実行中の効果は図に示すとおりです:

次はスタイル処理です

4. styleを記述します

css/index.cssを作成します管理しやすいように別ファイルを作成しますcssを折りたたんでからcreateindex.css

スタイルを記述する方法は?次の

1を分析しましょう。.containerはコンテナ全体です。上記の要件に基づいて、その幅= 800であることがわかります。センタリング効果を容易にするために、最初にその境界線を1pxに設定し、次に色をカスタマイズするには、ライトグレー、つまり border: 1px Solid lightgray;

で記述し、内部のコンテンツを中央揃えにする必要があります (text-align: center)。パディングまたはマージンを 0 (パディング :0,マージン:0) に設定し、このコンテナを中央に配置する必要があるため、margin:0 auto

と記述します。分析が完了したら、次に、index.css

.container{
    width:800px;
    padding:0;
    border:1px solid lightgray;
    text-align: center;
    margin:0 auto;
}

に .container スタイルのコードを記述します

2. 次に、コンテナの上部、つまり画像ロゴのスタイルをどのように記述するかを分析します。分析は次のとおりです:

1. 要件によれば、ロゴの幅 = 300、つまり幅:300px; も中央に配置する必要があるため、margin:0 auto,

実際には, ここでは、この効果を達成するためのさまざまな方法があります。画像のコンテナ ロゴの幅を 300 に設定し、画像のコンテナ ロゴを幅を 100% に設定しましょう。

OK、インデックスの追加を続けます。 CSS コードは次のとおりです

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}

3. 次のステップは、検索部分を設定することです

#分析は次のとおりです:

1. 要件に応じて、検索全体は 50 ピクセルなので、検索のcontainer.search の高さを 50 ピクセル、つまり height: 50px に設定し、ボタンの高さを 100% に設定します。ボタンの高さをたとえば 46px に設定すると、枠線が 4px の場合、その内側の高さは 46-4=42 しかないことを意味するため、ボタンの高さは枠線を含みます。テキスト入力ボックス。テキスト入力ボックスの高さ = 46、その場合、境界線は含まれません

2. テキスト入力ボックスの上下の境界線は合計 4px なので、高さは 46px になります。 、つまり、高さ: 46px; したがって、全体の高さは =50px、つまり

border:2px Solid rgb(70,98,217);

幅が500pxなので、width:500pxそして、デフォルトのパディングがあるので、padding=0,

## を設定します。次に、左上隅と左下隅の角が丸くなり、サイズが 10px、つまり、border-radius: 10px 0 0 になります。 10px;

わかりました。最初に思いつく限り簡単なスタイルを記述してから、特定の効果に応じて調整します。

次に、Index.css の追加を続けます。コードは次のとおりです。

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
}

5. カメラ アイコンと検索ボタン スタイルのコード分析は次のとおりです:

1. 幅を 30px、つまり width: 30px

# に設定できます。 ##2、検索ボタンの幅: 100px、高さ 100%、角も丸くなっています。右上と右下だけで、その後角が丸くなっています。角のサイズはテキスト入力ボックスと同じである必要があり、これも 10 ピクセルです。 、背景色も青 rgb (70,98,217)、テキストの色は白、フォント サイズは 15px に設定され、パディングも 0

に設定されているため、現在のindex.css コードは次のようになります。次のように:

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray; 
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
}
.camIcon{
    width:30px;
}
/* 搜索按钮 */
.btnSearch{
    width:100px;
    height: 100%;
    border:2px solid rgb(70,98,217);
    background-color:rgb(70,98,217);
    border-radius: 0 10px 10px 0;
    color:white;
    font-size:15px;
    padding:0;
}

次に、効果を確認するために、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟百度搜索</title>
     <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <!-- 上面部分:logo图片 -->
        <div class="logo">
            <img  class="camIcon lazy"  src="/static/imghw/default1.png"  data-src="images/cam.png"  / alt="CSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div >
            <input  type="text"  />
            <img  class="camIcon lazy"  src="/static/imghw/default1.png"  data-src="images/cam.png"    / alt="CSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

にスタイルを導入します。実行中の効果は次のとおりです:

効果は基本的に同じであることがわかります。次に行う必要がある変更は、

##1 です。カメラ ボタンを左に移動し、次に高さを移動します。テキストボックスの中央にある必要があります（このワンステップ、自分で計算します。画像の幅と高さに応じて、テキストボックスの幅と高さを組み合わせて計算できます）

2、照相机左移过去后，要保证按钮要和文本框贴合的恰当

好继续修改index.css 中的照相机图标样式，添加margin-left,margin-top

.camIcon{
    width:30px;
    margin-left:-40px;
    margin-top:11px;
}

运行结果如下：

我们会发现，其实文本输入框的高度和按钮的高度都是50px，但是还是无法位于同一水平线，怎么做呢？

我们可以通过float的方式解决这个问题，所以接下来我们让文本输入框，照相机图标，还有按钮都float:left

css代码如下：

/* 最外层容器 */
.container{
    width:800px;
    padding:0;
    border:1px solid lightgray;
    text-align: center;
    margin:0 auto;
}
/* LOGO样式 */
.logo{
    width:300px;
    margin: 0 auto;
}
.logo img{
    width:100%;
}
/* 搜索部分样式 */
.search{
    height:50px;
}
.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
}
.camIcon{
    width:30px;
    margin-left:-40px;
    margin-top:11px;
    float: left; /* 解决输入框和按钮位于同一水平线 */
}
/* 搜索按钮 */
.btnSearch{
    width:100px;
    height: 100%;
    border:2px solid rgb(70,98,217);
    background-color:rgb(70,98,217);
    border-radius: 0 10px 10px 0;
    color:white;
    font-size:15px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
}

运行效果如下：

我们发现现在就符合我们的效果了，位于同一水平线了，但是下面的部分不居中了，那么根据下面的总共宽度是600（文本输入框500+按钮宽度100），那么还剩下800-600=200，所以margin-left:100即可

再次修改index.css中.txtInput

.txtInput{
    width:500px;
    height: 46px;
    border:2px solid rgb(70,98,217);
    border-radius: 10px 0 0 10px;
    padding:0;
    /* 解决输入框和按钮位于同一水平线 */
    float: left;
    margin-left: 100px;/*让文本输入框居中**/
}

好再次运行结果如下：

根据灰色边框我们可以看出确实是居中了，接下来，去除最外层的边框即可，去除index.css中的最外层容器的border即可

.container{
    width:800px;
    padding:0;
    /* border:1px solid lightgray; */
    text-align: center;
    margin:0 auto;
}

再来运行效果如下：

好，到此为止，我们就实现了所有要求的效果！！！

总结：

1、掌握了CSS3中圆角边框的实现

2、可以通过float实现文本输入框和按钮水平平齐

希望本文能给大家带来一定的帮助，谢谢！！！

以上がCSS3 の丸い境界線は、Baidu ホームページの検索インターフェイスの効果を実現します - 事例分析 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。