前言:今天是我第一次写博客,为什么开始写呢?这几天正好在复习html的知识,班上的同学在一起做项目,因为基础掌握的不牢靠,在开发的过程中我们遇到了很多很基础的问题,我想把这些基础的问题记录下来。让自己不要再犯,同时希望我的问题解决方案能够对其他web前端的初学者有所帮助!
我们编写的是静态网页,所做的就是搭好框架然后一步一步的按照ps好的模板来写内容,基本的框架就不说了"DIV+CSS"这是最基本,我时不时也会经常练习框架的合理搭配!
在搭建完框架后写内容时会出现这些问题:
1:DIV盒子浮动问题
在将两个DIV盒子放到一行时(关键代码:display: inline-block)往其中添加文字时,一般是左边的div会下沉,为什么会这样?是因为浮动的原因,具体的就不多讲!
解决方法(清除浮动!):设置div属性overflow:hidde;或者在这两个DIV外用一个大div套起来,然后在大div里设置clear:bothl;即可
2:路径问题:
a:文件利用路径问题:
css背景图片利用时的路径问题,在开发的时候我们会将很多的素材和样式表分别用images和css文件夹统一装起来以便管理,所以这里会涉及到怎么把路径写对的问题。
样式表的利用就不多说(一般是link:rel="css/xxx.css"; type="text/css"),主要是我遇到的一个很简单的问题,我在利用图片时,发现,
如果你是在html界面利用图片的话,路径为:<img src="存放图片文件名/图片名.jpg"/>直接可以显示,然后自己设定高宽(style属性里面写高宽<img src="存放图片文件名/图片名.jpg" style="width:10px;height:10px"/>)这样就可以正常显示图片,如若不能检查自己后缀名是否有误!
如果你是在css界面利用background-images来利用图片的话就得考虑文件夹的层级问题。你现在是在css里面写,所以你要利用图片你就得先回到上一级文件夹找到images文件夹然后再去写图片的具体路径,background-images:url(../存放图片文件名/图片名.jpg);这样就可以正常显示图片,如若不能检查自己后缀名是否有误!
b:修改后期代码是的路径问题,我自己遇到问题时,会先去网页F12打开开发者模式,一层一层的找错误的地方在哪里,然后找他id标签后者父标签或者伪类标签,最后修改样式表达到预期效果!这样按照编写的路径来分析自己的代码,修改起来的话会省很多时间!
3:ul-li dl-dt-dd的使用
ul-li的使用大多用在很多重复的图片或者大量的无须文字的排序,这时候就可以利用ul-li了。ul是无序标签所以觉得其默认的实心圈影响美观的话可以使用其list-style-type:none;即可。
dl-dt-dd则大多用在图文混排,就是图片和文字在一起的时候,比如左边是图片,右边是文字,上面是图片,下面是文字的时候就可以利用dl了。
我反省了自己和同学常出现的几个问题,拿出来解决,提醒自己。希望能够帮助到大家。基础文章,欢迎各位斧正和批评!!!