回顾web网页开发

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了回顾web网页开发相关的知识,希望对你有一定的参考价值。

相对路径和绝对路径
 
相对路径
./ 当前目录
../上一级目录
../../上一级的上一级的目录
一般用相对路径:用./表示和linux里面的指令操作./表示当前目录基本相同,在html中也可以不用写
demo: ./images/programmer.jpg可以写成 images/programmer.jpg
../  :表示当前网页文件所在目录的上一级目录,这个不能省略,如果在上一级,可以写成
../../images/programmer.jpg
 
绝对路径:会把图片位置写死了,如果把文件位置靠走了,如果把整个文件拷贝走,放到服务器上的话,绝对路径还是回原来的位置寻找,位置会产生错误,所以我们一般写相对路径。
会发生错误。
绝对路径:相对与磁盘的位置去定位资源的位置,会在项目迁移时,由于目录的盖面到时资源定位出错,不推荐使用,
 
 
 
无序列表标签:(有语义的)
一般用在新闻()
 
公式: <!-- ul>li{类表文字&}*8 -->
 
有自身的样式,列表一般可以用鼠标可以点的,列表需要加上连接,
也有 不需要连接的
需要连接的快捷键(大于号表示层级关系)
ul>li>a{列表文字&}*8
列表文字&
快捷键创建列表标签
生成快捷键列表连接
ul(>li>a[href="]{列表文字})*生成几行
 
 

id选择器:
是给程序用的,不是给样式用的,可以用来抓取网页页面的内容
id选择器,只能用于页面 上一个标签,不推荐使用,
一个标签只能是一个id名称,style里面的类名之前要加 #;
组选择器:
组选择器,将公共的样式提取出来,写在一起,简化样式代码。
多个选择器,如果有相同的设置的话,
可以用组选择器:.box1,.box2,.box3{里面是具有相同属性的}
如果不加,的话是层选择器????
hover:鼠标悬停,盘旋,徘徊

经常在链接上加入hover,可以让鼠标在点击过之后,会改变装台,叫做伪类选择器,
伪类选择器:表示鼠标移动到元素上去的时候显示的样式,.box:hover{}
是在css操作style之后,再进行下一步的操作,
.box:hover{属性:值},之后
 
伪元素选择器:解决bug;不能被选中,必须配合content(内容)
使用,关键字before和after;
.box:before{content:"字段"}
.box:after{conten:"后一个字段"}
 

样式属性:text-align :设置文字水平
text-indent:首行缩进
text-style:nomarl 文字不倾斜,italic倾斜;
综合属性顺序:font:是否加粗,字号/行高 字体 demo:normal 12px/36px "楷体“
网页里面的:如果不写的话段落字体默认大小是十六
font-weight , font-size/ling-height ,font-family:顺序不能颠倒,否则失效
 
设置ul的时候一般设置3个,
list-style的设置:去掉默认的小圆点,清除默认的外边距、内边距
  .list{
        list-style: none;
        margin:0px;
        padding:0px;
    }
 
 

.con>.box (div的嵌套)
属性:设置子元素超出部分的处理方法,(设置在父集上)
overflow:visible(显示超出的部分)
overflow:hidden(隐藏)隐藏:将超出的部分吟唱,相当于切掉超出的部分
overflow:scroll(卷轴)显示滚动条框,可以把子元素显示完(不管有么有超
出都有滚动条框,上下左右都有)
overflow:auto()如果子元素超出就显示滚动条框,不超出就不显示滚动条框
应用场景:如果一个文档太多,显示不玩,可以设置一个滚动条

重点:盒子模型:
概念,padding和
 
元素,标签,盒子 都是指的一个东西
盒子包含的内容,如果有一个杯子,content和
 
 
border 边框线:solid 实线 dashed 虚线 dotted(点线)
padding:(上右下左)按照12点顺时针转 上下左右边分别设置内边距(4个)
3个值的话
padding:(上 (左右)下)写三个的话左右为一个值,
2个值的话:
padding:((上下),(左右))写两个值的话分别设置上下,左右的值
1个值的 话:
padding:((设置四个边都是一个值))

margin外边距的方法和padding的设置方法相同,
盒子的真是尺寸:
盒子的width和height值固定的,如果盒子增加border和padding,盒子整体的尺寸会变大,所以,盒子的真是尺寸为:
盒子的宽度:widthpadding 左右+border左右
盒子的高低 heigth=padding上下+border上下

盒子一般不用padding
因为他会改变盒子的大小,可以在盒子里面再设置一个盒子,用里面的盒子的
margin来设置里面盒子的位置
margin:0px auto; 左右的margin值设置auto可以让样式自己计算左右
的margin值,让盒子水平居中
margin使用负值可以让两个盒子叠加,(合并边框)

垂直外边距合并;(bug)(有意这么做的)
 
解决办法:
1.使用这种特性
2.设置一边的外边距,一般设置margin-top()
3.将元素浮动
当不浮动的元素的上下margin相遇的时候,会取两个margin值中的较大的值作为他的最终的margin值;

终极总结:
列表标签:
快捷方式: ul >li{列表文字$}*n  
可以生成n行 $代表第几行
列表标签一般用于链接所以得与<a href="www.baidu.com">百度</a>嵌套使用
快捷生成方式:
ul(>li>a[href="#"]{列表文字})*n
n行 >重定向 li里面包含a ,ul里面包含li
列表操作:
   list-style: none;
        margin: 0px;
        paddig:0px;
新建模块div
.box${这是第$个div元素}*5
 
伪类和伪元素选择器:
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态
伪元素选择器有before和after,
 
 
 
 
 
 
 

以上是关于回顾web网页开发的主要内容,如果未能解决你的问题,请参考以下文章

Java Web基础 网页开发过程

Java Web基础 网页开发过程

web网页开发课程哪里教学的好?

岗位解读(14)——网页(WEB)前端开发工程师

微信web开发者工具怎么调试网页

微信web开发者工具如何进行调试微信网页授权