Der abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel)

Ziele dieses Artikels:

1. Beherrschen Sie die Verwendung von border-radius in CSS3

Frage:

Erzielen Sie die folgenden Schnittstelleneffekte (die Suchfunktion nicht). erforderlich), Anforderungen Verwenden Sie kein Framework, reines div+css3, und müssen Grenzradius-Wissenspunkte verwenden

Andere Anweisungen:

1 Gesamtbreite beträgt 800x, Anforderungen Anzeige in der Mitte

2. Das Logobild ist 300 Pixel breit und wird in der Mitte angezeigt

3. Suchfeldbreite = 500 Pixel, die Gesamthöhe beträgt 50 Pixel

Ideenanalyse:

1. Der obere Teil ist ein Logo und der untere Teil ist die Suchfunktion

2. Die Komponenten der Suchfunktion unten sind von links nach rechts ein Eingabefeld mit abgerundeten Ecken, ein kleines Kamerasymbol und eine Schaltfläche mit abgerundeten Ecken ganz rechts

Der spezifische Code wird wie folgt implementiert:

1. Zuerst legen wir das Material ab. Bereiten Sie ein Baidu-Logo-Bild und ein kleines Kamerasymbol vor und legen Sie sie dann zur einfachen Verwaltung im Bilderverzeichnis ab

2. Schreiben Sie zuerst die Div-Struktur

nbsp;html>


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


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

        </div>
    </div>

3. Geben Sie die Details ein, schreiben Sie nicht zuerst den Stil , füllen Sie einfach die Elemente aus

Der Code lautet wie folgt:

nbsp;html>


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


    <div>
        <!-- 上面部分:logo图片 -->
        <div>
            <img  class="camIcon lazy" src="/static/imghw/default1.png" data-src="images/cam.png" alt="Der abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div>
            <input>
            <img  class="camIcon lazy" src="/static/imghw/default1.png" data-src="images/cam.png" alt="Der abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel)" >
            <input>
        </div>
    </div>

Der Laufeffekt ist wie unten gezeigt:

Als nächstes Stilverarbeitung durchführen

4. Stil schreiben

Erstellen Sie css/index.css, um die Verwaltung zu erleichtern, und erstellen Sie dann index.css

. Wie schreibe ich die Stile darin? Lassen Sie uns als nächstes analysieren: 1. .container ist der Gesamtcontainer. Basierend auf den oben genannten Anforderungen wissen wir, dass seine Breite = 800 ist. Um den Zentrierungseffekt zu erleichtern, setzen wir ihn dann Um die Farbe anzupassen, schreiben wir sie in Hellgrau, d padding oder margin, wir setzen es auf 0 (padding :0,margin:0), und dann benötigen wir, dass dieser Container zentriert ist, also schreiben wir margin:0 auto

Nachdem die Analyse abgeschlossen ist, gehen wir als nächstes vor Schreiben Sie den .Container-Stilcode in index.css

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

2. Analysieren Sie als Nächstes den oberen Teil des Containers, d. h., wie der Stil des Bildlogos geschrieben wird

Die Analyse ist wie folgt:

1. Entsprechend den Anforderungen ist die Breite des Logos = 300, also Breite: 300 Pixel, also margin:0 auto,

Tatsächlich Hier gibt es viele Möglichkeiten, diesen Effekt zu erzielen. Stellen wir die Breite des Containerlogos des Bildes auf 300 ein und lassen Sie dann die Breite des Bildes 100 %.

Okay, fügen Sie den index.css-Code wie folgt hinzu

/* 最外层容器 */
.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. Der nächste Schritt besteht darin, den Suchteil festzulegen

Die Analyse ist wie folgt:

1. Entsprechend den Anforderungen beträgt die Höhe der gesamten Suche 50px, also können wir die Höhe des Suchcontainers.search auf 50px, also height: 50px, und dann die Höhe der Schaltfläche auf 100% festlegen. Hierbei ist zu beachten, dass die Höhe der Schaltfläche einmal ist Die Höhe ist beispielsweise auf 46 Pixel eingestellt. Wenn der Rand jedoch 4 Pixel beträgt, beträgt die Höhe darin nur 46-4 = 42. Die Höhe der Schaltfläche umfasst also den Rand, der sich vom Texteingabefeld unterscheidet . Die Höhe des Texteingabefelds = 46, dann ist der Rand nicht enthalten

2. Der obere und untere Rand des Texteingabefelds haben insgesamt 4 Pixel, also beträgt seine Höhe 46 Pixel, d. Höhe: 46 Pixel; auf diese Weise beträgt die Gesamthöhe = 50 Pixel, d , und dann hat es die Standardpolsterung, also setzen Sie die Polsterung auf 0,

Dann haben die obere linke Ecke und die untere linke Ecke abgerundete Ecken mit einer Größe von 10 Pixeln, d. h. Randradius: 10 Pixel 0 0 10px;

Okay, das war's. Schreiben Sie zuerst den einfacheren Stil, den Sie sich vorstellen können, und passen Sie ihn später entsprechend dem spezifischen Effekt an.

Als nächstes fügen Sie weiterhin Index.css hinzu. Der Code lautet wie folgt

/* 最外层容器 */
.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. Die Codeanalyse für Kamerasymbole und Suchschaltflächen lautet wie folgt:

1 Wir können die Breite auf 30 Pixel einstellen, d. h. Breite: 30 Pixel

2. Breite der Suchschaltfläche: 100 Pixel, Höhe 100 %. Es hat auch abgerundete Ecken, nur oben rechts und unten rechts, und dann seinen Kreis. Die Eckengröße sollte mit der des Texteingabefelds übereinstimmen, das ebenfalls 10 Pixel beträgt. Die Hintergrundfarbe ist ebenfalls blau rgb (70,98,217). Wir haben die Schriftgröße auf 0 eingestellt

, also ist der aktuelle index.css-Code wie folgt :

/* 最外层容器 */
.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;
}

Um den Effekt zu sehen, führen wir als Nächstes den Stil in index.html ein

<!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="Der abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel)" >
        </div>
        <!-- 下面部分：搜索功能 -->
        <div >
            <input  type="text"  />
            <img  class="camIcon lazy"  src="/static/imghw/default1.png"  data-src="images/cam.png"    / alt="Der abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel)" >
            <input type="button" class="btnSearch" value="百度一下"/>
        </div>
    </div>
</body>
</html>

und der laufende Effekt ist wie folgt:

Wie Sie sehen können, ist der Effekt im Grunde derselbe. Als nächstes müssen wir folgende Änderungen vornehmen: Seien Sie in der Mitte des Textfelds (dies ist ein Schritt, berechnen Sie es selbst. Sie können es anhand der Breite und Höhe des Bildes in Kombination mit der Breite und Höhe des Textfelds berechnen)

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实现文本输入框和按钮水平平齐

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

Das obige ist der detaillierte Inhalt vonDer abgerundete CSS3-Rahmen realisiert den Effekt der Baidu-Homepage-Suchoberfläche – Fallanalyse (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!