기업 홈페이지 구현의 구체적인 사례 공유

이 작업을 수행하려면 Twitter의 프런트엔드 프레임워크 부트스트랩을 사용해야 합니다. psd 이미지를 먼저 넣어주세요.

이 사진을 올리려면 꽤 큽니다. 이를 위해 사무실 사진 관리자를 사용하여 사진을 압축했습니다.

방법: alt+p+o를 누른 다음 아래 탭+버튼을 눌러 웹 페이지를 선택하고 저장을 클릭한 다음 확인

을 클릭하세요. "연봉 500,000"이 포함된 psd 정적 페이지를 복원합니다.

먼저 생각해 보세요:

발견 1. 세 psd 사진의 머리와 꼬리 설정이 동일하며 추출하여

g-header로 만들 수 있습니다. g-content, g-footer

이 이름은 내 다른 기사인 CSS 스타일 작성 사양 + 특수 기호와 일치합니다. 관심이 있으시면 읽어보실 수 있습니다.

2.content의 첫 번째 페이지 모듈은 부트스트랩 캐러셀 차트 플러그인을 통해 구현할 수 있는 캐러셀 차트라는 것을 알았습니다.

3.content의 모듈 2~6이 한 줄에 여러 개의 하위 집합으로 나누어져 있는 것을 발견했는데, 이는 부트스트랩 그리드 시스템을 통해 구현할 수 있습니다.

알겠습니다. 거시적 사고도 괜찮습니다. 그렇다면 질문이 나옵니다.

질문 1. "항상 바닥으로 가라앉는" 바닥글을 구현하는 방법은 무엇인가요?

방법 1: css3 flex 레이아웃 사용

핵심 코드는 다음과 같습니다.

html{height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。*//*这里还要说明一下：html下的body一般会有或多或少的margin，body的高度不是100%的。*/}body{display:flex;flex-direction:column;height:100%;/*将html 和 body 元素的高度设置为100%，使其充满整个屏幕。这里body：height：100%是继承html的高度*//*将 body 的 display 属性设置为 flex, 然后将方向属性设置为列,*/}/*我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域*/.g-header{flex:0 0 auto;
}.g-content{flex: 1 0 auto;/*将 flex-grow 设置为1，该元素会占用全部可使用空间*//*而其他元素该属性值为0，因此不会得到多余的空间*//* 1 flex-grow, 0 flex-shrink, auto flex-basis */}.g-footer{flex: 0 0 auto;
}

방법 2: 위치 지정 사용

.g-footer-f{position: fixed;bottom:0;width:100%;min-height: 5rem;/*此方法通过position固定在浏览器下方，但是以一种浮动在上层的效果出现的。*//*所以上一个紧挨的并列盒子，即g-content盒子的内容就会有一部分显示不全。被遮挡了。*/ /*而这种特性也被用于实现footer底层样式透明，footer里的按钮不透明。*//*而实现内容不遮挡，只要在g-content的底部新增一个含高度的空div就完成。*/}<div>
    <div></div>
</div>
<div>
    <div></div> 
    <a><button>再来一局</button></a>
    <a><button>上传分享</button></a>
</div>

.footer-bg{height:5rem;/*只要再给一个层，然后给个跟父盒子一样高的高度就可以实现底层透明，上层不透明*/background:#29BDE0;filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;/*filter:alpha(Opacity=50);-moz-Opacity:0.5;opacity:0.5;实现透明效果*/}.pull-height{height:5rem;
}

질문 2. "부트스트랩 캐러셀"을 구현하는 방법은 무엇입니까?

웹스트롬에서 직접 새 부트스트랩 프로젝트를 만들었습니다. 또한 문제를 발견했습니다. 부트스트랩 프레임워크를 로컬로 도입한 코드가 해당 기능을 구현할 수 없었습니다.

결국 외부 링크를 사용하기로 결정했습니다

<link>
放标签里头

而两外两段scritp不能乱顺序，放在

위 내용은 기업 홈페이지 구현의 구체적인 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!