回顾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,

时间: 2024-12-12 22:19:38

回顾web网页开发的相关文章

Web网页开发常见经典问题

1.网络请求参数共享 转发dispatcher和重定向redirect 对于参数共享的区别 Redirect和Dispatcher 区别

Java Web项目开发到底需要掌握哪些技术?

目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Java的WEB项目需要掌握的技术如下: lJava语言 l面向对象分析设计思想 l设计模式和框架结构 lXML语言 l网页脚本语言 l数据库 l应用服务器 l集成开发环境 下面我们具体地看每个技术. 1.Java语言 Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.Servle

MIT教授将网页开发整合为完整独立的程式语言Ur/Web

MIT 的软体技术教授 Adam Chlipala 设计了新的 Ur/Web 程式语言,这是一个整合 HTML.CSS.XML.SQL 及 JavaScript 等网路标准的“完整独立”语言,强调快速.安全及“元编程”的开放源码专案,可望减少开发人员设计网路应用程式所耗费的时间与精力. 美国麻省理工学院(MIT)的软体技术教授 Adam Chlipala 设计了新的 Ur/Web 程式语言,这是一个整合 HTML.CSS.XML.SQL 及 JavaScript 等网路标准的“完整独立”语言(s

web前端入门到实战:网页开发中字体,字号与尺寸对应表

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的.整齐划一,井然有序才终是大家之道. 1.字体 在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距. 在网页开发中,普遍偏爱微软雅黑与宋体,14/16px,非衬线体. 2.字号 印刷文字有大.小的不同变化,排版及图象处理软件中汉字字体大小的计量,前主要采用印刷业专用的号数制和点数制

麦子学院-Web前端开发工程师系列培训教程

HTML+CSS基础入门1.课程介绍2.html的语法3.html的基本结构4.html的文档设置标记上(格式标记)5.html的文档设置标记下(文本标记)6.html图像标记img7.html超链接的使用8.html表格相关的标记9.html表格实战<简单的网页布局>10.html框架详解与框架布局实战11.HTML表单设计(上)12.HTML表单设计(下)13.使用CSS样式的方式14.定义CSS样式(CSS选择器)15.CSS常用属性(颜色属性)16.css常用属性(字体相关属性)17.

web前端开发怎么样学习?看这份web前端学习路线

前端开发是创建Web页面或app等前端界面呈现给用户的过程.前端开发通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互.它从网页制作演变而来,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主.随着互联网技术的发展和HTML5.CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大. 随着时代的发展,现在从事IT方向的人有很

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

关于《Web接口开发与自动化测试--基于Python语言》

关于封面logo 首先,你会被书封上面logo吸引,这么炫酷?双蛇杖?嗯,这是Requests的新logo. 旧的logo是一只乌龟. 新logo是双蛇杖: 看到新logo我首先想到的是 火爆全网页游 “大天使之剑”,直到前两天一位网友告诉我这是双蛇杖,然后,我百度了一下双蛇杖的神话故事.然后,找到了Requests库开发者的一次提交,有人说喜欢旧logo,然后,得到的答复是:“This represents the peace Requests brings between the serve