CSS 그래픽과 text_CSS/HTML을 혼합하는 여러 가지 구성표

바이두뉴스 홈페이지 해결 방법:

코드 복사 코드는 다음과 같습니다.

< /tbody>

…

html 구조는 보기 흉하지만 CSS는 간단합니다.
시나 웨이보 홈페이지 솔루션:

코드 복사 코드는 다음과 같습니다.

< ; img src="" ...>

....
< ;/div>

CSS:

코드 복사 코드는 다음과 같습니다:

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color: #666 ;line-height:18px;}

대부분의 후보자가 이 답변을 가지고 있습니다. 플로팅을 사용하면 폭을 고정해야 하며, 동시에 플로팅으로 인해 발생하는 일련의 문제를 해결해야 합니다.
NetEase 홈페이지 솔루션:

코드 복사 코드는 다음과 같습니다.

• …


• …
  
• …

CSS :

코드 복사 코드는 다음과 같습니다.

.list-Figure { float: left ; _display: inline; width : 130px; margin-left: -140px; margin-top: 6px; }

이러한 작성 방법은 CSS의 기본 개념에 대한 이해가 부족합니다. 블록 형식화 컨텍스트(블록 수준 형식화 컨텍스트)의 개념을 이해한다면 이렇게 작성할 수는 없을 것입니다. BFC를 트리거하는 블록 수준 요소의 경우 가장자리가 플로트 상자와 겹치지 않습니다.
권장 해결 방법:

코드 복사 코드는 다음과 같습니다.

...

...

CSS:

코드 복사 코드는 다음과 같습니다.

.item .pic { float:left;margin-right:10px; }
.item .content { Overflow:hidden;zoom:1 } /* 또는 display:table- 사용 cell */

제가 작성한 예시

코드 복사 코드는 다음과 같습니다.

   
       


       
       
       
   
   
   

左图右内容的效果实现

   

     

      < ;/div>
     

       

标题标题标题标题

         
• 内容内容内容内容1

         
• 内容内容内容内容2

         
• 内容内容内容内容3

          内容内容内容内容4
       

     

   

   

 

总结
用的不是技术,更多是技巧

由于在学校里没有系统的前端开发课程, 导致对html/css/javascript基本概念的理解非常薄弱.大部分人的学习方式是: 先看书, 然后觉得书和实践离得很远就直接实践，遇到问题就去网上搜，而搜到的基本都是„技巧“性的东西.或者是跟着学校里的„牛人“学,掺着各种好的、坏的经验全盘接受.比如实现一个左图右内容的显示效果，写出html和css (见下图）).网上看, 国内那些大网站们是怎么实现的, 就不能怪他们了.

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

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

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

4 몇 주 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

4 몇 주 전 By DDD

2 포인트 박물관 : 모든 전시회 및 찾을 수있는 곳

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

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

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

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

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7369

15

자바 튜토리얼

1628

14

Cakephp 튜토리얼

1355

52

라라벨 튜토리얼

1266

25

PHP 튜토리얼

1215

29

더보기