前端小白的html+css的分享

Html+Css做页面遇到的小问题和解决方法

这些页面问题解决方法适合初学者

首先进行页面布局

初学者一定要养成一个良好的习惯–页面布局，

<div class="all">
	<div class="header"></div>
	<div class="nav"></div>
	<div class="content"></div>
	<div class="foot"></div>
</div>

定位margin无效问题

大部分情况可以使用css属性：

display:block;
float:left;

或

display:inline-block;
float:left;

span表签时内联元素，需要转化成块级元素。

盒子塌陷问题

可以尝试使用css属性解决：

clear：both；

怎么让做静态页面更高效

拿到效果图后，首先要思考分析解构整个UI效果图，自己想着怎么把页面一步一步用代码还原。然后再敲代码就顺利很多。中间遇到比较困难的地方如果时间比较紧急就先做完其他简单的模块部分，最后再解决难的部分，同时有必要请教老师或其他同学。有时候看到大神写的界面，你会恍然大悟，受益匪浅。

如果缺乏图标元素

你可以到阿里巴巴矢量图标库查找，里面有丰富的资源等你。

自适应浏览器窗口

盒子设定百分比模式，优点就是自适应窗口大小，但同时也有缺点。

避免窗口伸缩出现图片未占满盒子宽高问题

在图片标签内定义内联样式width=“100%” height=“100%”，如下：

<div id="banner">					
   	<!--定义图片列表-->
       <ul id="imgs">
			<li class="active"><img src="images/banner_1.jpg" width="100%" height="100%" alt="">			</li>
			<li><img src="images/banner_2.jpg"  width="100%" height="100%" alt=""></li>
			<li><img src="images/banner_3.jpg"  width="100%" height="100%" alt=""></li>
       </ul>
</div>

解决浏览器窗口伸缩时内容自适应窗口，盒子内部的元素重叠乱跑问题

使用css属性：

overflow:hidden

有时还可以解决谷歌浏览器和其他浏览器不兼容问题。

合理的使用图片做按钮背景

定义banner盒子的轮播图时，左右切换按钮尽量使用图片做背景，若选用

<a> < </a>
<a> > </a>

作为左箭头和右箭头符号按钮，点击时难免会出现选中箭头状态，且有一个默认的很丑的选中背景，
因为这时的箭头是文本状态可选中，所以尽量把左右箭头替换成带有不同透明度背景的箭头图片作为按钮。

实现单行和多行文本溢出显示省略号

单行溢出隐藏

width：120px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行溢出隐藏

display: -webkit-box;  //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 
-webkit-box-orient: vertical;  //必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 2; //限制在一个块元素显示的文本的行数。 但是必须结合其他的WebKit属性一起使用
overflow: hidden;  //溢出隐藏