웹 프론트엔드 CSS 튜토리얼 Keqiji OEM의 CSS 분석 및 개발 경험_경험 교류

Keqiji OEM의 CSS 분석 및 개발 경험_경험 교류

May 16, 2016 pm 12:08 PM

Keqiji OEM의 CSS 분석
Keqiji에서 출시한 OEM입니다. 도메인 이름이 있으면 웹사이트를 맞춤 설정할 수 있습니다. 웹마스터가 직접 커스터마이징할 수 있는 부분이므로 HTML, CSS, JS 등의 코드가 오픈됩니다. 그러나 기본 CSS는 CSS이므로 변경할 수 없습니다.
이 CSS를 작성할 때 CSS에 익숙하지 않은 웹마스터도 맞춤 설정할 수 있도록 최소한의 태그를 사용하려고 노력했습니다. 또한 CSS를 레이아웃하고 작성할 때 일반적인 아이디어는 큰 것에서 작은 것으로, 작은 것에서 작은 것으로 이동하는 것입니다.
이 레이아웃과 CSS는 한 번 작성되었으며 변경되지 않았으므로 일부 집주인은 여전히 ​​​​최적화할 수 있으며 이러한 코드는 최적이 아닙니다. 그러나 이러한 레이아웃의 CSS는 웹마스터가 다양한 방식으로 정의할 수 있습니다. 잠시 후에 몇 가지 예를 보여드리겠습니다.
다음은 이 CSS에 대한 분석으로, 초보자에게 매우 적합합니다.
프로그램 코드

@charset "utf-8"; 
/*定义全局,在这定义了全局中的标签*/ 
 * {margin:0px;padding:0px;} 
 /*
로그인 후 복사

여기에서는 전역 텍스트 크기가 12PX로 정의되어 있으며 줄 높이는 180%입니다. 이러한 줄 높이는 눈에 너무 피곤하지 않습니다.
여기서는 페이지의 숫자와 영어가 영어 글꼴로 표시될 수 있도록 Verdana 글꼴 뒤에 Song 글꼴을 넣었는데, Song 글꼴을 추가하지 않는 분들도 계시겠지만, 이렇게 하면 문제가 발생합니다. 적어도 내 테스트 결과는 그랬다.
또한 특정 운영 체제의 일부 브라우저에서는 배경을 추가하지 않으면 배경이 다른 색상으로 표시되기 때문에 배경색을 추가했습니다.
여기서는 전체 텍스트 색상도 정의합니다. 검은색을 사용하지 않는 이유는 눈을 더 편안하게 하기 위해서입니다.
가장 중요한 것은 텍스트 정렬을 추가하는 것입니다. 이는 BODY의 모든 내용을 중앙에 배치하는 것이며 내부에 큰 DIV 블록과 결합하면 가능합니다. 페이지 내용이 너비가 고정되어 있으면 IE 및 FIREFOX와 같은 브라우저에서는 내용이 항상 웹 페이지 중간에 있다는 것을 깨달았습니다. 이는 주로 IE와 FIREFOX의 차이점을 해결하기 위한 것입니다. 중앙에 배치한 다음 BODY에 큰 DIV 블록을 추가하고 텍스트가 왼쪽에 정렬되도록 이 DIV의 블록을 작성합니다.

 */ 
 body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center;
  background:#FFF; color:#666;} 
 /*
로그인 후 복사

전역 텍스트 링크 스타일은 다음과 같습니다. 여기서는 축약형을 사용했습니다. 스타일은 Keqiji 메인 사이트와 동일합니다

*/ 
 a:link,a:visited{color:#000099; text-decoration: underline;} 
 a:hover,a:active{color:#000;text-decoration: none;background-color: #FED762;} 
 /*
로그인 후 복사

레이아웃에는 UL과 LI가 많이 사용될 것이기 때문에 UL 및 LI 자체가 보기 좋지 않으므로 여기서는 목록의 점과 여백을 제거합니다.

 */ 
 ul,li{ list-style:none;} 
 /*
로그인 후 복사

이미지의 테두리 템플릿은 여기에서 0으로 정의되고 여기서 전역적으로 정의됩니다. . 뒷면에 테두리가 추가되고 추가된 테두리도 있습니다. 주요 아이디어는 여전히 큰 것에서 작은 것입니다.

 */ 
 img{ border:0;}   
 /*
로그인 후 복사

BODY에 포함된 가장 크고 가장 바깥쪽의 DIV 블록으로 전체 웹 페이지 콘텐츠의 너비를 제어할 수 있습니다. BODY와 함께 사용하면 자동 센터링이 가능합니다. 전체 웹사이트의 너비와 가로 가운데 정렬을 정의합니다.
1. 여기에서는 모든 텍스트가 왼쪽 정렬로 정의됩니다.
2. MARGIN을 사용하여 FIREFOX에서 중앙 정렬을 수행합니다.
3. OVERFLOW를 사용할 때 일부 사람들이 정의한 내용이 너무 넓어서 레이아웃에 영향을 미칠까 걱정됩니다.

 */ 
 #wrapper{ text-align:left;margin:0 auto; width:1000px; overflow:hidden;} 
 /*
로그인 후 복사

INFO는 일부 웹마스터가 레이아웃을 전체 화면으로 맞춤 설정할 수 있도록 너비가 100%인 DIV 블록을 추가했습니다. 오른쪽은 너비가 고정되어 있고 왼쪽은 자동으로 적용됩니다. 그리고 1행 2열의 전제문제를 풀기 위한 기초가 됩니다.
여기에 FLOAT를 추가한 것은 "불로 불을 싸우다", 즉 float를 사용하여 float의 문제를 해결하기 위함입니다. 오른쪽에도 플로트가 필요하기 때문입니다.

 */ 
 #info{ width:100%; float:left; } 
 /*
로그인 후 복사

탐색 모음은 다음과 같습니다.
BODER를 사용하여 측면에 녹색을 추가합니다.

*/ 
 #nav{width:100%; text-align:center; border-top:5px solid #5DB30A; background:#FAFAFA; line-height:2.2} 
 /*
로그인 후 복사

여기서는 절대 위치 지정을 사용하는데, 이를 사용하는 페이지가 3개 이상이므로 다른 컨텐츠에 의해 영향을 받을 가능성이 매우 높기 때문에 기본적으로 영향을 받지 않도록 절대 위치 지정으로 정의합니다.
bykijiji 사진 위치

*/ 
 #bykijiji{position: absolute; margin-left:550px; margin-top:-20px;}  
 /* 
 主体大块*/ 
 #main{text-align:left;margin:0 auto;} 
 /*底部大块*/ 
 #footer{border-top:1px solid #CDCDCD; padding:10px 0; clear:both; text-align:center;margin:0 auto;} 
 /*头部大块*/ 
 #header{  clear:both} 
 /*
로그인 후 복사

HEADER 영역의 제목 텍스트 크기를 정의합니다. 색상 등 주된 이유는 웹마스터가 직접 로고 텍스트를 추가할 수 있도록 하기 위함입니다.

标题*/ 
 #header h2{ font-size:35px; margin-top:0px; font-weight:bold; color:#404040} 
 /*
로그인 후 복사

다음 LEFT와 RIGHT를 입력하면 행 1개와 열 2개 레이아웃이 완성됩니다. LEFT 외부에 INFO를 추가했습니다. 이것이 페이지가 자동으로 적절하게 조정될 수 있도록 사용자 정의가 더욱 유연해진 이유입니다.
왼쪽의 큰 블록
여기서 LEFT는 오른쪽에서 305PX 떨어져 있습니다. 바깥쪽에 100% DIV가 있기 때문입니다. 따라서 오른쪽 열의 너비는 305로 남습니다. 이런 식으로 LEFT는 적응성이 있을 수 있습니다.

 */ 
 #left{ margin-right:305px;color:#000; font-size:14px;} 
 /*
로그인 후 복사

LEFT에서 가장 큰 DIV입니다. 브라우저 버전별로 PADDING의 해석 및 계산 방식 차이를 해결하기 위한 것입니다*/

#leftbox{ padding:10px; font-size:14px;} 
 /*右边大块
로그인 후 복사

앞의 INFO 너비는 이미 100%이고 안쪽 너비는 LEFT는 그에게 또 다른 305PX 구멍을 남겼습니다. 따라서 왼쪽에서 음의 305PX가 LEFT 바로 옆에 있습니다. 여기에는 왼쪽 블록에서 5PX 떨어진 300PX를 썼습니다. 이것이 더 편안해 보입니다.
여기서는 너비를 289PX로 정의하고 PADDING의 왼쪽과 오른쪽에 5PX를 더한 값을 299PX로 정의합니다.

 */ 
 #right{  margin-left:-300px; float:left; width:289px; padding:5px;background:#F7F7F7; margin-top:24px;} 
 /*
로그인 후 복사

검색항목인데 할 말이 없습니다.
해당 항목을 검색하세요

*/ 
 #search{ padding:0 0 10px 0; text-align:left} 
 /*定义标题文字大小*/ 
 h1{ font-size:16px;} 
 /*
로그인 후 복사

在这里,定议了
公用的三个CSS,他们都是布局中常用的。分别为水平换行,左浮动和右浮动
这样命名很简单,而且字符最短,这样论在CSS文件中,还是页面中,最能作到代码尽量少。

*/ 
 .c{clear:both; height:0px; overflow:hidden;} 
 .l{ float:left;} 
 .r{ float:right;} 
 /*这里定义了一个文字大小,由于上边定义的很多都是12PX;可能或一定会有部分地方要用小字的,所以提前写在这里。*/ 
 .f12{ font-size:12px;} 
 /*这义SMALL的文字大小。*/ 
 small{font-size:12px;color:#999;font-weight: normal; padding-left:5px;} 
 .h_hr{ height:1px; overflow:hidden; margin:10px 5px; background:#CDCDCD;} 
/*++++++++++++++++++++++++++++++++++++++++++++++++++
로그인 후 복사

以上就是定义的全局。然后在下边又分别对首页,LIST页面,以及单个信息的页面作了单独的CSS;
可以看出,用了上边的基础,下边单个页面CSS写起就方便多了。而且只要很少的代码就可以了。可能首页的代码会多一些;
下边的这些就不一一说明了。很简单的东西。

*/  
/*单个页面部分*/ 
 .imgbox{ text-align:center; width:200px;} 
 .imgbox img{ border:4px solid #CCC; display:block; margin:0 auto; } 
 .navbox{border-left:4px solid #f5f5f5; margin:5px 0 10px 0; padding-left:8px; } 
/*LIST页面部分*/ 
 #listnav{ background:#f7f7f7; line-height:2.0; padding-left:10px; border-bottom:1px solid #D4D4D4;} 
 .listbox{ color:#666;width:590px;font-size:12px;border-bottom: 1px dashed #CCC;} 
 /*绿色的时间*/ 
 .listbox p{color: #008000;} 
 /*大标题*/ 
 #leftbox h2{font-size:14px; margin-top:10px;} 
 #leftbox span{ margin-left:10px;} 
/*首页页面部分*/ 
 #h_center_l{ width:66%; border-left:1px solid #CDCDCD;border-right:1px solid #CDCDCD; float:left;
 margin-top:10px;} 
 #h_center_lbox{width:49%; border-right:1px solid #CDCDCD; float:left;} 
 #h_center_lboxb{width:50%;  float:right;} 
 #h_center_r{width:33%; float:right;margin-top:10px;} 
 #h_center_l h1,#h_center_r h1{ padding-left:5px; font-size:14px;} 
 #h_center_l ul,#h_center_r ul{ padding-left:19px; font-size:12px;} 
 #qcity{clear:both; margin-bottom:20px; margin-top:10px;} 
 #qcity li{ display:inline; padding-left:10px;} 
 #qcity h3{ font-size:14px; color:#000} 
 #links { border-top: 1px solid #CCC; margin-top: 15px; } 
/*广告块部分*/ 
#leftbottomad{ background:#FFFFCC; margin-left:10px; display:none} 
#pfm{padding:20px;  font-size:12px;} 
/*CSS完*/
로그인 후 복사

说一说我个人在写布局和CSS的一点感受吧!说明,只是个人的感受!
1、了解用户群,如果你的用户是白领都是学生。那么你没有必要去考虑IE5以下的版本。那样你会累死的。
2、一行三列或一行二列自动适应,这个例子就可以了,他在IE6,IE7,FIREFOX等的效果都是一样的。没有必要有一堆代码去写一个自动适应。
3、布局最难的就是布表单了。表单中的元素太多了,很难控制,特别是要适应很多浏览器。这个是更难了。如果将来我遇到表单,如果不是非常简单的,那么我一定用表格,我想信,复杂的表单用表格去布局,代码一定会小于那个人家常说的DIV+CSS。而且有表格布这东西,维护特别的容易。
4、在CSS设计的时间,总的来说,是标签从大到小来定义,布局从大块到小块。标签不一定用到很多。
5、有些人认为不要给那些DIV或块加上什么ID; 我认为,加ID是正确的,如果ID中有不同的标签,那么通过CSS来控制就在容易了。有时我们会认为一些同样的色彩应该写在一个CLASS里。然后哪里用到那么我们就在哪里调,如果变色,一改这个CLASS就全变了。但是,我想问,如果不全变呢,只变一块,你怎么办。还去改布局吗? 如果是这样,那么结构和表现分开又有什么意义呢。
6、我们布大局可能会很简单,就像盖房子,大的样子几天就起来。但细细装修就麻烦了,又苦又累。我们常常分为了一个像素,节省一行代码而浪费大量的时间在上边,我感觉时间还是要花的,但是要有一个度。
7、布局时,我们也许把布局和CSS都弄的很NB。但同事一时半会看不懂你为什么要这样写,这样多人开发就很难了。你写的东西可能只有你能改。这样就麻烦了。所以,我们一定非要布局写的很NB。适应用点表格也是可以节省代码的。而且都能看懂。

以上就是客齐集OEM的CSS解析与开发经验_经验交流的内容,更多相关内容请关注PHP中文网(www.php.cn)!


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Bitstamp exchange pro에 등록하는 방법은 무엇입니까? 안전합니까? 공식인가요? Bitstamp exchange pro에 등록하는 방법은 무엇입니까? 안전합니까? 공식인가요? Aug 13, 2024 pm 06:36 PM

BitstampPro를 등록하는 방법은 무엇입니까? BitstampPro 웹사이트를 방문하세요. 개인 정보와 이메일 주소를 입력하세요. 비밀번호를 만들고 약관에 동의하세요. 이메일 주소를 확인하세요. BitstampPro는 안전한가요? 인증이 필요합니다. 이중 인증 사용을 시행합니다. 대부분의 자산은 콜드 스토리지에 저장됩니다. HTTPS를 사용하여 통신을 암호화합니다. 정기적인 보안 감사를 실시합니다. BitstampPro는 합법적인가요? 룩셈부르크에 등록되었습니다. 룩셈부르크 금융감독위원회의 규제를 받습니다. 자금세탁 방지 및 고객 파악 규정을 준수합니다.

DCAT 관리자에서 데이터를 추가하기 위해 클릭하는 사용자 정의 테이블 기능을 구현하는 방법은 무엇입니까? DCAT 관리자에서 데이터를 추가하기 위해 클릭하는 사용자 정의 테이블 기능을 구현하는 방법은 무엇입니까? Apr 01, 2025 am 07:09 AM

DCAT를 사용할 때 DCATADMIN (LARAVEL-ADMIN)에서 데이터를 추가하려면 사용자 정의의 테이블 기능을 구현하는 방법 ...

가상 통화 거래 플랫폼 앱의 최신 순위 목록 (상위 10 가지 가상 통화 거래 플랫폼의 재고) 가상 통화 거래 플랫폼 앱의 최신 순위 목록 (상위 10 가지 가상 통화 거래 플랫폼의 재고) Mar 04, 2025 pm 03:51 PM

이 기사에는 OKX, Binance, Gate.io, Huobi, Kraken, Coinbase, Kucoin, Crypto.com, Bitfinex 및 Bitstamp를 포함하여 전 세계 10 대 크립토 화폐 거래소가 나와 있습니다. 강력한 기술 강점, 풍부한 제품 라인, 엄격한 규정 준수 운영 및 혁신적인 생태 구성으로 인해 이러한 거래소는 글로벌 Cryptocurrency 시장에서 주도권을 잡았습니다. 이 기사는 특별한 기능, 기술 아키텍처, 보안 조치, 규정 준수 자격 및 생태계 건설을 각각 소개하여 투자자가 적절한 거래 플랫폼을 선택할 수 있도록 참조 할 것입니다.

2025 년 세계 공식 가상 통화 거래 소프트웨어의 상위 10 개 공식 웹 사이트 주소를 공유하십시오. 2025 년 세계 공식 가상 통화 거래 소프트웨어의 상위 10 개 공식 웹 사이트 주소를 공유하십시오. Feb 15, 2025 pm 04:42 PM

cryptocurrency 시장의 개발로 공식적인 가상 통화 거래 소프트웨어는 투자자의 관심의 초점이되었습니다. 치열한 경쟁에서 일부 거래 플랫폼은 눈에 띄고 안전하고 신뢰할 수있는 서비스를 제공합니다. 업계 연구 및 포괄적 인 순위에 따르면이 기사는 2025 년 세계 최고의 10 가지 최고의 가상 통화 거래 소프트웨어를 나열하고 공식 웹 사이트 주소를 제공 할 것입니다. 이 플랫폼은 엄격하게 검토되었으며 사용자에게 우수한 거래 경험과 투자 보장을 제공하도록 설계되었습니다.

Bitstamp 교환은 정확히 어떤가요? Bitstamp 교환은 안전한가요? Bitstamp 교환은 정확히 어떤가요? Bitstamp 교환은 안전한가요? Aug 16, 2024 pm 06:02 PM

Bitstamp 교환은 보안과 신뢰성으로 잘 알려져 있으며 다음 기능을 자랑합니다. 콜드 스토리지 및 다중 서명: 대부분의 자금은 오프라인에 저장되므로 거래를 승인하려면 여러 인증이 필요합니다. 규정 준수 및 규제: 룩셈부르크 금융 규제 위원회의 규제를 받으며 자금 세탁 방지 및 KYC 규정을 준수합니다. 네트워크 보안 조치: DDoS 보호, SSL 암호화 및 정기 보안 감사를 포함합니다. 보험 및 자금 보호: 도난이나 손실은 Lloyd's of London에서 보장하며 사용자 자금을 보호하기 위한 예비 자금을 보유하고 있습니다. 고객 지원 및 응답: 문제에 대한 연중무휴 고객 지원

동적 웹 페이지 요소 xpath 및 클래스 이름이 자주 변경됩니다. 목표를 대상을 크롤링하는 방법은 무엇입니까? 동적 웹 페이지 요소 xpath 및 클래스 이름이 자주 변경됩니다. 목표를 대상을 크롤링하는 방법은 무엇입니까? Apr 01, 2025 pm 04:12 PM

동적 웹 요소 크롤링 문제 : XPATH 및 클래스 이름 변경을 다루면서 많은 크롤러 개발자는 동적 웹 페이지를 크롤링 할 때 어려운 문제에 직면하게됩니다.

빈백을 만드는데 어떤 소프트웨어가 사용되나요? 빈백을 만드는데 어떤 소프트웨어가 사용되나요? Nov 27, 2024 am 11:39 AM

"Doubao"는 복잡한 소프트웨어 아키텍처와 기술 지원을 갖춘 강력한 AI 비서입니다. 아키텍처의 핵심은 LLM(대형 언어 모델) 및 이미지 생성 모델이며, 자연어 처리, 다중 모드 생성, 사용자 인터페이스, 데이터 저장 및 클라우드 컴퓨팅 플랫폼과 같은 모듈도 포함합니다. 이러한 모듈은 마이크로서비스 아키텍처를 채택하고 Python, Java, C 등과 같은 프로그래밍 언어를 사용하여 개발됩니다. 아키텍처는 여전히 진화하고 있으며, 앞으로는 “빈바오”의 성능과 기능을 향상시키기 위해 더욱 발전된 AI 기술이 도입될 수도 있습니다.

PC 및 모바일 측면에서 동일한 페이지를 공유하고 캐시 문제를 처리하는 방법은 무엇입니까? PC 및 모바일 측면에서 동일한 페이지를 공유하고 캐시 문제를 처리하는 방법은 무엇입니까? Apr 01, 2025 pm 01:57 PM

PC 및 모바일 측면에서 동일한 페이지를 공유하고 캐시 문제를 처리하는 방법은 무엇입니까? Baota 배경, PC 측면을 만드는 방법 및 ...

See all articles