CSS 网站布局
వెబ్ సైట్ సజ్జీకరణ
వెబ్ సైట్ సాధారణంగా హెడర్, మెనూ, సమాచారం మరియు ఫూటర్ గా విభజించబడుతుంది:
ఎంతో వివిధ సజ్జీకరణ డిజైన్స్ ఎంచుకోవచ్చు. కానీ, పైన పేర్కొన్న స్ట్రక్చర్ అత్యంత సాధారణ స్ట్రక్చర్లలో ఒకటి ఉంది, దానిని మేము ఈ ట్యూటోరియల్లో విశదంగా అధ్యయనం చేంచుకొందాం.
హెడర్
హెడర్ (header) సాధారణంగా వెబ్ సైట్ పైభాగంలో ఉంటుంది (లేదా టాప్ నావిగేషన్ మెనూ క్రిందికి). ఇది సాధారణంగా లోగో లేదా వెబ్ సైట్ పేరును కలిగి ఉంటుంది:
实例
.header {
background-color: #F1F1F1;
text-align: center;
ప్యాడింగ్: 20px;
}
ఫలితం:
నావిగేషన్ బార్
నావిగేషన్ బార్ లో లింక్ జాబితా ఉంటుంది, ఇది సందర్శకులకు మీ వెబ్ సైట్ నిర్వహించడానికి సహాయపడుతుంది:
实例
/* నావిబార్ కంటైనర్ */
.topnav {
ఓవర్ఫ్లోవ్: హిడ్;
బ్యాక్గ్రౌండ్-కలర్: #333;
}
/* నావిబార్ లింక్ */
.topnav a {
float: left;
డిస్ప్లే: బ్లాక్;
రంగు: #f2f2f2;
text-align: center;
ప్యాడింగ్: 14px 16px;
టెక్స్ట్-డెక్కరేషన్: నాన్;
}
/* లింక్ - హోవర్ చేసినప్పుడు రంగు మార్చు */
.topnav a:hover {
బ్యాక్గ్రౌండ్-కలర్: #ddd;
రంగు: బ్లాక్;
}
ఫలితం:
సమాచారం
మీ లక్ష్య వినియోగదారులకు ఏ సజ్జీకరణను ఉపయోగించాలి అనగా దానిని నిర్ణయించాలి. అత్యంత సాధారణమైన సజ్జీకరణలలో ఒకటి లేదా వాటిని కలపడం జరుగుతుంది:
- 1-列布局（通常用于移动浏览器）
- 2-列布局（通常用于平板电脑和笔记本电脑）
- 3-列布局 （仅用于台式机）
1-列：
2-列：
3-列：
我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：
实例
/* మూడు సమానమైన పట్టీలను సృష్టించడానికి, వాటిని ఒకదానితో సమాంతరంగా ఫ్లోట్ చేయండి */
.column {
float: left;
width: 33.33%;
}
/* పట్టీల ప్రతిస్పందనను తొలగించడానికి */
.row:after {
content: "";
display: table;
clear: both;
}
/* ప్రతిస్పందకమైన సంస్థాపన - మూడు గరిష్టం గా పుట్టే పట్టీలను పెట్టాలి, కాదు సమాంతరంగా చిన్న ప్రదేశాలలో (వెడల్పు 600 పిక్సెల్స్ లేదా తక్కువగా) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
ఫలితం:
పూర్తి వెబ్ టెక్నాలజీ సూచనా పుస్తకం
మా సూచనా పుస్తకం వెబ్ టెక్నాలజీ ప్రతి పాసాను కలిగి ఉంటుంది.
ఇది వీరిలో వివిధ వేదికలు మరియు పరికరాలను పొందడానికి వీలు కలిగింది అని నిర్ధారించాలి.
ఆన్‌లైన్ ప్రయోగాత్మక పరికరం
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
సూచన:2 పట్టీ సంస్థాపనను సృష్టించడానికి వెడల్పును 50％ చేయండి. 4 పట్టీ సంస్థాపనను సృష్టించడానికి 25％ ఉపయోగించండి.
సూచన:మీరు @media పద్ధతి ఎలా పని చేస్తుంది తెలుసుకోవాలనుకున్నారా? మా సూచనా పుస్తకాన్ని చదవండి. CSS మీడియా క్వరీ ఈ భాగంలో మరింత సమాచారం తెలుసుకోవడానికి అనువు.
సూచన:పట్టీ సంస్థాపనను కలిగించడానికి ఒక ఆధునిక పద్ధతి ఇది CSS Flexbox ఉపయోగించడం. అయితే, ఇంటర్నెట్ ఎక్స్ప్లోరర్ 10 మరియు అది ముంది సంస్థాపనలు దానిని మద్దతు చేయలేదు. IE6-10 మద్దతు అవసరం ఉంటే, ముందుగా ఫ్లోటింగ్ ఉపయోగించండి (పైన చూపబడింది).
ఫ్లెక్సిబుల్ బాక్స్ సంస్థాపన మోడ్యూల్ గురించి మరింత సమాచారం తెలుసుకోవడానికి మా సూచనా పుస్తకాన్ని చదవండి. CSS ఫ్లెక్స్‌బాక్స్ పాఠ్యం
వేరు వేరు పట్టీలు
ప్రధాన విషయం (main content) మీ వెబ్‌సైట్లో అతిపెద్ద మరియు అత్యంత ముఖ్యమైన భాగం ఉంది.
పట్టీల వెడల్పు వేరు వేరు ఉంటాయి, ఎందుకంటే అత్యంత విస్తరణ ముఖ్య విషయాలకు కలిగి ఉంటుంది. అనుబంధ విషయాలు (ఉన్నట్లయితే) మరియు ప్రధాన విషయాలతో సంబంధించిన సమాచారాన్ని ఉపయోగిస్తారు. మీరు వెడల్పును మార్చవచ్చు, కానీ దాని మొత్తం అనుకూలంగా ఉండాలి: 100％ ఉండాలి:
实例
.column {
float: left;
}
/* ఎడమ మరియు కుడి పట్టీలు */
.column.side {
width: 25%;
}
/* మధ్య పట్టీ */
.column.middle {
width: 50%;
}
/* ప్రతిస్పందకమైన సంస్థాపన - మూడు గరిష్టం గా పుట్టే పట్టీలను పెట్టాలి, కాదు సమాంతరంగా */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
ఫలితం:
పూర్తి వెబ్ టెక్నాలజీ సూచనా పుస్తకం
మా సూచనా పుస్తకం వెబ్ టెక్నాలజీ ప్రతి పాసాను కలిగి ఉంటుంది.
ఇది వీరిలో వివిధ వేదికలు మరియు పరికరాలను పొందడానికి వీలు కలిగింది అని నిర్ధారించాలి.
ఆన్‌లైన్ ప్రయోగాత్మక పరికరం
在 CodeW3C.com，我们提供上千个实例。
通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
快捷易懂的学习方式
一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。
在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。
ఫూటర్
页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：
实例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
ఫలితం:
రెస్పాన్సివ్ వెబ్ సైట్ లేఆఉట్
పైని కొన్ని CSS కోడ్లను ఉపయోగించి, మేము ఒక రెస్పాన్సివ్ వెబ్ సైట్ లేఆఉట్ స్థానాన్ని సృష్టించాము. ఇది స్క్రీన్ వెడిథ్ ఆధారంగా రెండు కలమ్స్ మరియు పూర్తి వెడిథ్ కలమ్స్ మధ్య మారుతుంది:
