목차
回复讨论(解决方案)
웹 프론트엔드 HTML 튜토리얼 新手,制作网页时设置网页大小为多少合适?_html/css_WEB-ITnose

新手,制作网页时设置网页大小为多少合适?_html/css_WEB-ITnose

Jun 24, 2016 pm 12:23 PM

   想实现这样的网页大小。
   设计的网页,用户的客户端分辨率不同时,网页也跟着相应调整。
我自己做了一个网页,在我自己的计算机上分辨率显示排版是正常的,到别人计算机上,与我计算机分辨率不同,网页就显示不正常了,如背景图片会在平铺显示显示一次后,再显示一半


回复讨论(解决方案)

用100分比,通杀各种分辩率。

用相对布局就不会出现这种问题

   设计的网页,用户的客户端分辨率不同时,网页也跟着相应调整。
可以用js的识别分辨率然后调用不同的样式,但是这样做很麻烦,因为要写几套样式
建议还是像2、3楼说的那样用百分比或者相对布局来写
另外你说“背景图片会在平铺显示显示一次后,再显示一半”
这个只要把背景居中然后只显示一次就可以了
background:url() center no-repeat

现在很多网页倡响应式布局,楼主可以了解下

两种方式,960布局或响应式布局。
960布局默认页面是960像素,更宽的两边留空。响应式布局全部以百分比来做。
现在流行响应式布局

可以用响应试布局

背景图片可以设置不平铺,然后背景图片可以设计成和底色相配

背景图片可以设置不平铺,然后背景图片可以设计成和底色相配

初学者,学习了

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的
请问图片变大,变小,你如何控制?
请你明白,像素与分辨率的关系.

我不知道!抱歉!网页开发是新手!
你可以改变自己计算机屏幕分辨率,看一下csdn网站,就知道了!我不知道咋描述

相对自适应其实很考功夫,建议不是熟手不要以此作为最终版本
我给的建议是多做几个不同宽度的版本,通过js判断客户端选择相对较窄的一个(可适当降低一个数量级)
记入cookie,以后的页面可以读取这个cookie作为页面布局依据
另外也要在页面上保留一些可供客户选择宽度的按钮,以免js的判断失误,客户可以手动调节,当然要覆盖cookie

然后把相对自适应作为课外作业,研究出可行的最终单一版本

反正我是不认为一个版本就能同时适应手机、笔记本、1080p,4k屏的……还没说有些屏可以竖起来呢

固定宽度,居中。网页再加背景色。

新手还是直接使用960布局比较安全,不过可以学习一下响应式布局,只是这种布局超级花时间和精力,你必须考虑从320到1920这一系列的宽度的表现,必要时还要隐藏部分内容,的确对新手要求太高。

可查960网格系统

看分辨率,一般的是1024*768

相对自适应其实很考功夫,建议不是熟手不要以此作为最终版本

同意!!!
另外,你看看各大网站的CSS就知道了,狗屁相对自适应。难的一B。

width:100%

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的
CSS样式用百分比,这样可以根据浏览器或者屏幕大小来自动变化。

楼主看下,bootstrap 源码,照着他写。

background:url() center no-re解决你图片平铺的问题。
还有width:1100px; 相对定好你网页的宽和高。整体大容器里加上width:100%; 不管分辨率怎么变,网页布局都不会变。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

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

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

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

초보자에게 가이드를 제공하기 위한 Mist Lock Kingdom 플레이 팁 초보자에게 가이드를 제공하기 위한 Mist Lock Kingdom 플레이 팁 Jan 28, 2024 pm 03:33 PM

Mistlock Kingdom은 플레이어가 Sons of Fire로 플레이하여 생존하고 탐험할 수 있는 오픈 월드 게임입니다. 이 게임은 액션 RPG 도전의 독특한 엔터테인먼트를 결합하여 플레이어에게 끝없는 놀라움과 즐거움을 선사합니다. 게임에서 플레이어는 자원, 환경, 무기 등을 탐색할 수 있습니다. 일부 초보 플레이어는 게임을 시작하는 방법에 대해 궁금해할 수 있습니다. 이 소개 및 공유에서는 관련 시작 가이드를 제공할 것입니다. 안개 자물쇠 왕국 초보자를 위한 팁: 독기가 덮힌 지역의 위험 수준은 다릅니다. 탐사 과정에서 지도의 새로운 지역이 점차 잠금 해제되고 독기가 덮힌 지역의 위치를 ​​확인할 수 있습니다. 맵은 두 가지 색상으로 구분됩니다. 파란색 영역은 짧은 시간 동안 입장할 수 있으며, 캐릭터의 능력치에 따라 머무를 수 있는 시간도 달라집니다.

앵커포인트 강림절 초보자를 위한 회사 캐릭터 추천 10가지 앵커포인트 강림절 초보자를 위한 회사 캐릭터 추천 10가지 Feb 20, 2024 pm 02:30 PM

Anchor Arrival은 고화질 미소녀 2차원 테마를 갖춘 3D 턴제 카드 게임으로, 플레이어가 탐색하고 경험할 수 있는 풍부하고 흥미로운 캐릭터 조합을 제공합니다. 초보자도 궁금합니다.풀에서 추천하는 강력한 캐릭터는 무엇일까요? 앵커 포인트 강림은 초보자 풀의 강력한 캐릭터 추천을 살펴보겠습니다. 앨리스는 주로 단일 대상 천둥형 폭발 캐릭터입니다. 출력이 매우 폭발적이며 경험이 신규 사용자에게 매우 친숙하므로 선택하는 것이 좋습니다. 10골드 뽑기에는 "앨리스" + "영양" 조합을 선택하는 것이 좋습니다. 앨리스는 금파이어 속성을 출력하기에 가장 적합한 캐릭터이며, 초보자 카드 풀의 다른 두 캐릭터보다 조금도 강하지 않습니다. 앨리스는 스페셜을 통과할 수 있습니다

일괄 들여쓰기 사용법을 배우는 것은 PyCharm 초보자가 반드시 숙달해야 하는 기술입니다. 일괄 들여쓰기 사용법을 배우는 것은 PyCharm 초보자가 반드시 숙달해야 하는 기술입니다. Dec 30, 2023 pm 12:58 PM

PyCharm 초보자를 위한 필수 기술: 일괄 들여쓰기 사용을 마스터하려면 특정 코드 예제가 필요합니다. 개요: PyCharm은 개발자가 효율성을 향상하는 데 도움이 되는 많은 실용적인 도구와 기능을 제공하는 강력한 Python 통합 개발 환경(IDE)입니다. 일상적인 코딩 과정에서 우리는 코드 형식을 깔끔하고 아름답게 유지하기 위해 코드를 들여쓰기해야 하는 경우가 많습니다. PyCharm에서 제공하는 일괄 들여쓰기 기능을 사용하면 코드를 빠르게 일괄 들여쓰기하고 코딩 효율성을 높일 수 있습니다. 이 기사에서는 Py를 살펴보겠습니다.

고대 왕관 초보자 가이드 및 게임 플레이 소개 고대 왕관 초보자 가이드 및 게임 플레이 소개 Feb 20, 2024 am 11:20 AM

Crown of the Ancients는 서양의 마법 모험을 기반으로 한 고품질 전략 카드 모바일 게임입니다. 게임 내 비밀 탐험, 폐허 모험, 전국 챔피언십 및 기타 특별한 게임 플레이가 여러분의 경험을 기다리고 있습니다. 따라서 초보 플레이어가 이 게임을 빨리 시작하고 싶다면 초보 가이드가 필수입니다. 오늘 편집자가 관련 가이드를 가져올 것이므로 살펴보겠습니다. 고대 왕관 초보자 가이드, 게임 플레이 및 지역 개방 스타일 개요: 1. 다이아몬드 축적 흐름: 모든 것이 다이아몬드 축적에 중점을 두고 있으며, 마을을 떠난 후 열심히 일하기 시작합니다. 다이아몬드가 필요한 주요 마법 무기, 세 가지 플라이휠 활동 등을 제외하고 나머지는 무시됩니다. 주요 초점은 그 중 하나에 집중하지 말고 최대한 많이 싸울 수 있습니다. , 그리고 강요하지 마세요. 장점: 다이아몬드를 모으기 위해 장난만 치면 됩니다. 마을을 떠난 후에는 다이아몬드로 최신 활동에 빠르게 액세스하고, 새로운 하드웨어 영웅 시리즈를 얻을 수 있으며, 다이아몬드가 깨질 수 있습니다.

C 대 C++: 초보 프로그래머에게 더 나은 것은 무엇입니까? C 대 C++: 초보 프로그래머에게 더 나은 것은 무엇입니까? Mar 19, 2024 am 08:30 AM

C 언어 또는 C++: 새로운 프로그래머에게 더 적합한 것 현대 기술이 빠르게 발전하는 시대에 경력 개발의 일환으로든 논리적 사고 능력을 향상시키기 위한 방법으로 프로그래밍을 배우는 것이 점점 더 인기 있는 선택이 되었습니다. 많은 프로그래밍 언어 중에서 C 언어와 C++는 모두 매우 고전적이고 대표적인 언어입니다. 많은 사람들이 입문자용 프로그래밍 언어로 C 언어 또는 C++를 선택하는 방법에 대해 혼란스러워합니다. 그렇다면 프로그래밍 초보자에게 C 언어가 더 적합한가요, 아니면 C++가 더 적합한가요? 특정 코드 예제가 필요합니다.

환상수 팔루의 입문 스킬을 빠르게 익히세요 환상수 팔루의 입문 스킬을 빠르게 익히세요 Jan 23, 2024 am 08:45 AM

Phantom Beast Parlu는 온라인 멀티플레이를 지원하는 오픈 월드 서바이벌 게임입니다. 이 게임에는 생물을 수집하는 다양한 방법이 있으며 플레이어는 전투, 건설, 생존 등 다양한 탐험에 참여할 수 있습니다. 초보 플레이어의 경우 게임의 조작 기술과 게임 플레이 콘텐츠를 익히는 것이 매우 중요합니다. 참고할 수 있는 초보자 전략 팁은 다음과 같습니다. 1. 기본 조작 배우기: 게임을 시작하기 전에 이동, 공격, 수집 등 게임의 기본 조작을 배우는 것이 좋습니다. 이를 통해 캐릭터의 작업을 더 잘 제어할 수 있습니다. 2. 세계 탐험: Phantom Beast Parlu의 세계는 매우 광대하며, 숨겨진 장소와 자원이 플레이어가 발견하기를 기다리고 있습니다. 위험을 두려워하지 말고 모든 구석구석을 탐험해 보세요. 초보자를 위한 빠른 팁 1. 베이스 사이트 선택, 팬텀 비스트 팔루에서 먼저 선택하세요.

초보자가 가상 ​​화폐를 구매할 때 어떻게 최고의 가치를 얻을 수 있습니까? 초보자를 위한 코인 구매 상세 가이드 초보자가 가상 ​​화폐를 구매할 때 어떻게 최고의 가치를 얻을 수 있습니까? 초보자를 위한 코인 구매 상세 가이드 Jan 30, 2024 pm 07:57 PM

초보자가 코인을 구매하는 가장 비용 효율적인 방법은 무엇입니까? 암호화폐를 구매할 때 초보자는 더 나은 수익을 얻기 위해 다음 전략을 채택할 수 있습니다. 대상 통화를 깊이 있게 배우고 연구하고, 투자를 위해 잘 알려진 코인을 선택하고, 거래를 위해 신뢰할 수 있는 거래소를 사용하고, 합리적인 예산을 설정하고 정기적으로 구매하고, 빈번한 거래를 피하고, 충동적인 투자, 안전한 지갑을 사용하여 자산을 보관하고 시장 역학에 세심한 주의를 기울이십시오. 이 팁은 초보자가 암호화폐를 구매할 때 더 나은 투자 경험을 갖는 데 도움이 될 것입니다. 암호화폐를 구매하기 전에 기본 사항과 시장 상황을 이해하는 것이 중요합니다. 다양한 통화의 특성, 용도 및 시장 전망을 이해하고 맹목적으로 추세를 따르는 것을 피하십시오. 학습과 연구를 통해 보다 현명한 투자 결정을 내릴 수 있습니다. 초보자의 경우 일반적으로 평판이 좋고 잘 알려져 있고 인기 있는 통화를 선택하는 것이 더 안전합니다. 비트

초보자는 삼국지천하를 어떻게 플레이하나요? 초보자는 삼국지천하를 어떻게 플레이하나요? Feb 29, 2024 pm 05:40 PM

삼국지천하 신규 플레이어는 어떻게 운영해야 할까요? 샌드박스 맵의 맥락에 있는 전략입니다. 많은 전략과 지혜 콘테스트가 포함되어 있습니다. 이 문제는 초보자를 위한 도움말과 공유를 제공합니다. 1. 병력 강화 충분한 병력 확보는 자원 확보와 성장의 기반이 됩니다. 건물과 장군: 건물과 장군 레벨을 업그레이드하면 군사력을 크게 강화할 수 있습니다. 기술 연구: 적시에 기술을 연구하여 부대의 공격 및 방어 속성을 향상시킵니다. 던전 정복: 던전 전투에 참여하고 풍부한 아이템을 획득하세요

See all articles