1、請問:img是float類型嗎?(指網頁設計的,懂得進)
float是設置的屬性,浮動,讓內聯元素變為可以設置高度和寬度的。
類似內聯塊元素吧
2、網頁設計float與auto不能同時使用嗎
float本來就是一個一個堆的,如果你想重疊可以給後面的div添加屬性margin-left:-100px;(距離自己算),或者使用相對定位position:relative;用top和left控制位置。 或者使用絕對定位position:absolute;,,看來網頁設計知識不夠好,還是去學習一下比較好,王氏動漫學院不錯,你可以上網了解下。我就是在那學習的
3、網頁設計:float;right的問題
右邊的空間位置太小了,就會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。這時候可能你就會發現顯示與你的預期效果不符。
4、我製作網頁時候用css做背景時候,加入的背景圖片太大超出了屏幕我用浮動float導致圖片不在一行?
上代碼,不然沒辦法回答
5、誰能解釋下網頁製作中浮動(float)的意思啊?
float為CSS中指定對象是否及如何浮動的屬性,通常值有三種 float : none | left | right,意思分別為不浮動,靠左,靠右
6、網頁製作不使用css3怎麼做出自適應圓角矩形
在網頁代碼的頭部,加入一行viewport元標簽。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。
2
由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。對圖像來說也是這樣。
具體說,CSS代碼不能指定像素寬度:
width:xxx px;
只能指定百分比寬度:
width: xx%;
或者
width:auto;
3
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
例如:
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
4
流動布局(fluid grid)
"流動布局"的含義是,各個區塊的位置都是浮動的,不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢出),避免了水平滾動條的出現。
5
"自適應網頁設計"的核心,就是CSS3引入的MediaQuery模塊。
它的意思就是,自動探測屏幕寬度,然後載入相應的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />
上面的代碼意思是,如果屏幕寬度小於400像素(max-device-width: 400px),就載入tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕寬度在400像素到600像素之間,則載入smallScreen.css文件。
END
參考下面的例子——我稱它為「盒子」
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo: Responsive Design in 3 Steps</title>
<!-- css3-mediaqueries.js for IE8 or older -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<style type="text/css">
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font: bold 36px/100% Arial, Helvetica, sans-serif;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: 180px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#content {
background: #f8f8f8;
}
#sidebar {
background: #f0efef;
}
#header, #content, #sidebar {
margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>Header</h1>
<p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>
</div>
<div id="content">
<h2>Content</h2>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
<p>textg</p>
<p>fgs</p>
<p>fgsg</p>
<p>dg</p>
<p>dfgfd</p>
<p>是否感到反感</p>
<p>sgrtg</p>
<p>分公司</p>
<p>sgf</p>
<p>text</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
7、html、css製作網頁,橫排導航欄,為什麼加了float:right;還是無法豎直排列呢? 如圖
你寫的float:left;
而且你這是豎直排列啊。你應該是想要橫向排列吧。
問題出在你第一個選擇器,ul,li中間是逗號,代表並列的意思,所以你後面的屬性是給了ul和li。
ul和li寬度都是80px,li一排就只能放下一個。
逗號改成空格。然後前面加一個
ul { float:left;}8、網頁製作css中的浮動float和清除clear怎樣理解?
Float就是網頁元素的浮動,在Div+CSS中經常用到,理論上網頁上的任何元素都可以浮動,你可以這么理解,你網站的背景假如是最底層,那背景之上處在同一層的元素可以通過Float來排列,前提同一層,可以從左到右依次排開,或者反之,不同一層的元素通過Float排列可能是重合的,如果不允許浮動,就用Clear,清除浮動,不知道這樣說清楚了嗎,其實你可以自己通過試驗來體會,自己寫個簡單的網頁,通過更改CSS來看前台什麼變化,我要是不知道該怎麼寫的時候就經常這么處理,希望我的回答能對你有用!