이미지의 표현을 향상시키는 CSS

이미지의 표현을 향상시키기 위해 CSS에 몇 가지 추가 코드를 통합 할 수 있습니다. 그들은 당신이 당신의 위치에 달성하고 싶은 무슨을에 따라서 가동 가능하다.

이행

다음과 같이 원하는 코드를 CSS에 넣고 테스트하십시오.

CSS 코드에 삽입 할 몇 가지 예

 .photo {배경색 : #fafbfc; 테두리 : 1 픽셀 단색 # b0b0b0; 여백 : 0 0 10px 10px; 패딩 : 5px; } .phototight {border : 5 픽셀 단색 # b0b0b0; 여백 : 5px 6px 15px 6px; } .phototoleft {테두리 : 5 픽셀 단색 # b0b0b0; 왼쪽으로 뜨다; 여백 : 5px 15px 6px 15px; } 

텍스트를 왼쪽으로 프레임하기

 div # photoflot p {여백 : 0; 패딩 : 0; 텍스트 정렬 : 양쪽 정렬. } div # photoflot img {float : 왼쪽; background-color : #fafbfc; 테두리 : 1 픽셀 단색 # b0b0b0; 여백 : 0 0 10px 10px; 패딩 : 5px; } hr {clear : 왼쪽; } 

다음과 같이 사용하십시오.

새끼 고양이, 과일, 야채, 알콜 쥐, ipsum. 자유로운 삶을 누리십시오. Quisque lacus. Nullam lobortis. Cras quam. Nulla vitae ante nec eros mollis luctus. Vivamus velit. Morbi interdum euismod sapien ...

오른쪽 텍스트로 이미지 프레임 지정하기

 / * 오른쪽에 텍스트가있는 이미지의 프레임 지정 * / .rightimg, .leftimg, .centreimg img {border : 1px solid #AAAAAA; 배경색 : # E9E9E9; 패딩 : 3px; 여백 : 6px; } .rightimg {float : right;} .leftimg {float : left;} div.centreimg {text-align : center; } 

다음과 같이 사용하십시오.

 프로방스 및 기타 peltesque mollis. 고집 센트는 고등어 박테리아입니다. 프로스트는 그야말로 뾰족한 띠 장식물입니다. ipsum에서 Nunc. 일시 중지. 새 집에 앉아 lectus. 퀴즈와 그 밖의 이물질은 아무렇지도 않습니다. Sed ac tellus. Nulla vel arcu. 프로틴 아프 피언과 네크 펠 메스 크 몰리 스 ...