CSS3 둥근 테두리는 Baidu 홈페이지 검색 인터페이스의 효과를 실현합니다 - 사례 분석(코드 예)

이 글의 목표:

1. CSS3에서 border-radius 사용법을 숙지하세요.

질문:

다음과 같은 인터페이스 효과를 얻으려면(검색 기능이 필요하지 않음), 순수 div 프레임워크를 사용하지 않아야 합니다. +css3, 테두리를 사용해야 합니다. -반경 지식 포인트

기타 지침:

1 전체 너비는 800x이며 중앙에 표시되어야 합니다

2. 중앙에 표시됩니다

3. 검색창 너비는 500px, 전체 높이는 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. 스타일 작성

css/index.css를 생성합니다. 관리를 용이하게 하기 위해 별도의 CSS 폴더를 생성합니다. index.css

안에 스타일은 어떻게 작성하나요? 다음으로 분석합니다.

1. .container는 위의 요구 사항에 따라 너비가 800이라는 것을 알 수 있습니다. 센터링 효과를 촉진하기 위해 먼저 테두리를 1px로 설정한 다음 색상을 사용자 정의합니다. 그냥 밝은 회색, 즉 border: 1px solid lightgray

로 작성하고 내부 콘텐츠를 중앙에 맞춰야 합니다(text-align: center). 일부 요소에 기본 패딩이나 여백이 설정되지 않습니다. 0 (padding: 0, margin: 0 )으로 설정하고 이 컨테이너를 중앙에 배치해야 하므로 margin: 0 auto

라고 작성합니다. 분석이 완료된 후 다음으로 .container 스타일 코드를 index.css에 작성합니다.

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

2. 다음으로 용기의 윗부분을 분석합니다. 즉, 그림 로고의 스타일을 어떻게 작성해야 하는지

분석은 다음과 같습니다.

1. 요구 사항에 따라 로고 너비 = 300, 즉, 너비: 300px도 중앙에 있어야 하므로 여백: 0 자동,

사실 이것이 여기서 필요한 것입니다. 효과를 달성하는 방법에는 여러 가지가 있습니다. 이미지의 컨테이너 로고 너비를 300으로 설정해 보겠습니다. , 이미지 너비를 100%로 설정합니다. 다음과 같이 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%;
}

3. 다음 단계는 검색을 설정하는 것입니다. 분석 부분은 다음과 같습니다.

1. 요구 사항에 따라 전체 검색의 높이가 50px이므로 검색 컨테이너의 높이를 50px, 즉 height:50px로 설정한 다음 버튼의 높이를 100%로 설정하면 됩니다. 여기서 주의할 점은 버튼의 높이가 예를 들어 46px로 설정되어 있지만 테두리가 4px이면 버튼 내부의 높이가 46-4=42에 불과하다는 것을 의미합니다. 텍스트와 동일한 테두리입니다. 입력 상자 높이가 46이면 테두리가 포함되지 않습니다

2. 텍스트 입력 상자의 위쪽 및 아래쪽 테두리는 총 4px입니다. 이므로 높이는 46px, 즉 height: 46px입니다. 이런 식으로 전체 높이는 =50px, 즉

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

너비가 500px이므로 너비가 됩니다. :500px이고 기본 패딩이 있으므로 패딩을 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, 즉 너비: 30px

2로 설정할 수 있습니다. 검색 버튼 너비: 100px, 높이 100%, 모서리도 둥글게 처리되어 있습니다. , 오른쪽 상단과 오른쪽 하단만 있고 둥근 모서리 크기는 텍스트 입력 상자와 동일해야 하며 이 역시 10px이고 배경색도 파란색 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!