导航:首页 > 万维百科 > 网页设计float居中浮动

网页设计float居中浮动

发布时间:2020-11-04 06:25:13

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来看前台什么变化,我要是不知道该怎么写的时候就经常这么处理,希望我的回答能对你有用!

与网页设计float居中浮动相关的知识