目前應用的CSS代碼如下，敬請高手指導，多謝先！
@charset "utf-8";
/* 簡單流媒體
注意: 流媒體要求您洗掉 HTML 中媒體的高度和寬度屬性
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 不支持最大寬度，因此默認為 100% 寬度 */
.ie6 img {
width:100%;
}
/*
Dreamweaver 流體網格屬性
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
靈感來自于 Ethan Marcotte 的“具有回應的 Web 設計”
http://www.alistapart.com/articles/responsive-web-design
和 Joni Korpi 的“黃金網格系統”
http://goldengridsystem.com/
*/
/* 移動設備布局: 480px 及更低。 */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* 平板電腦布局: 481px 至 768px。樣式繼承自: 移動設備布局。 */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* 桌面電腦布局: 769px 至最高 1232px。樣式繼承自: 移動設備布局和平板電腦布局。 */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
html {
background-color: navy;
}
body {
color: blue;
background-color: #fffff0;
font-family: "Times New Roman", calibri, monospace;
font-size: large;
line-height: 2;
padding: 0.5em;
min-width: 40em;
max-width: 80em;
margin: 0.5em auto;
}
form,textarea,input {
color: blue;
background-color: #fffff0;
font-family: "Times New Roman", calibri, monospace;
font-size: medium;
}
header, footer,
main, menu, nav {
display: block;
margin: 0;
padding: 0;
}
header {
color: #F5F5F5;
background-color: navy;
font-size: 1.5em;
line-height: 0.3;
font-family: "Times New Roman", calibri, monospace;
padding: 1em 1em;
text-align: center;
margin-top: 0.01em;
margin-bottom: 0.01em;
}
footer {
color: #F5F5F5;
background-color: navy;
font-size: 1.00em;
line-height: 1;
font-family: "Times New Roman", calibri, monospace;
padding: 1em 1em;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
nav,main {
display: table-cell;
padding: 0.25em;
vertical-align: top;
}
h1,h2,h3,h4,h5 {
font-size: 1.5em;
margin: 0.5em 0 0 0;
text-align: center;
background-color: navy;
color: #F5F5F5;
}
h6 {
font-size: 1.0em;
margin: 0.1em 0 0 0;
text-align: center;
background-color: navy;
color: #F5F5F5;
}
p,li {
margin-top: 1px;
}
hr {
background-color: navy;
border: none;
box-sizing: content-box;
height: 2px;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
img: center;
}
td,th {
padding: 0.25em ;
vertical-align: middle;
}
img {
border: 0;
max-width: 100%;
height: auto;
text-align: center;
vertical-align: middle;
width:expression(this.width>400 ? “400px”:this.width);
height:expression(this.height>300 ? “300px”:this.height);
}
uj5u.com熱心網友回復：
問題解決方法：由于nav寬是12em,右邊又有表格內多圖片排列，在手機有限的寬度，無論如何不夠空間的。
唯一的好辦法就是-----在body代碼內添加一行： overflow:hidden;
全部代碼如下：
body {
color: blue;
background-color: #fffff0;
font-family: "Times New Roman", calibri, monospace;
font-size: large;
line-height: 2;
padding: 0.5em;
min-width: 40em;
max-width: 80em;
margin: 0.5em auto;
overflow:hidden;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/270389.html
標籤：HTML(CSS)
下一篇：cesium