360浏览器中orcal中不能弹性出java_Java学习笔记——WEB

JAVA WEB开发基础:HTML 、CSS、 JavaScript。

注意:html、css、JavaScript是浏览器使用语言。

问:从浏览器上输入https://www.baidu.com/,然后浏览器呈现百度页面,中间到底经历了什么?

简单来说,可以理解为浏览器发送一个请求包,然后服务器(一台运行Java程序电脑)接收请求,分析请求,响应请求字符串、二进制数据,也就是Html/css/javascript/图片、视频、其他二进制数据。之后浏览器接收响应数据,根据响应的数据渲染页面和发送请求。

HTML:超文本标记语言

HTML5:HTML一门超文本标记语言,最新的第5代版本的语言的标准。2014发布。

fdf8aee0dca09c1a306765cad1f98909.png

8a6ffb0120c8a96fd750e9d4b1f60be4.png

f45de8a2cd5f95b5573b644af259e078.png

常用的HTML标签:

cd51675883316220c92da618aba467ed.png

42b3555e7eb4f98d60301f2728aa34d1.png

f6a6280e21b0c4e719b50850c2123f50.png

d6f92b9f20234a83ad456996121e45e4.png

2a295d4b2f7a0900086242bd060166ab.png

bc2cc43d6224cdc4b9b73e1a7f314221.png

3a45bec1fc979d707ba1e3f011448060.png

fc8cff475b34a646d791eabd6f820c67.png

e5493230f2f7567056be11303a53d571.png

da83165e01e5a4d8dbd7887fa00bd405.png

ea7a16aa4effbe127d95fa56c42bc065.png

899913edad507cae3fb1a6e208c11254.png

表单标签:

21fa7a9643e503200be3e1f385086e25.png

64e41613d9dd3646e3b08a74519d02a2.png

b348f088df21f63e512771e588870512.png

f9c29d97fe607db7276f8acf969fb7b1.png

3dc9e801180d0c22c814a921bbea044c.png

4c111cf5f6deab4c0a4378b5e13dfff7.png

5019aca3db9ec7f59044b4c5a154cfa9.png

b9c51fbaabdf8640e1286468abbab0a4.png
需要额外注意method的两种提交表单数据的方法

d8bafb172b1fc97742fd41585e1a4190.png

b7d6ff7b8276c3c8a3a22a1a25d2ccda.png

7db06663e03b29c7070ed825fb4b1b24.png

a7d0a82b2cc7ebea11381e57f4aa8131.png

ed03cb5a004f92c20a984ed0da47b86f.png

3ee739aa6b48d51266df8cfccf2ab94b.png

3751b3cb30c44781a9bc3326082d37c4.png

74d17bd605dc4cb1e95831f1020fdbce.png

934f0d5dca8a591ed5d1e42a1ed77c19.png

26660e9527c94e0f7704ca2a4ef65900.png

62b3748df8de64b1ddeb2282dadda63e.png

fe069c89fc3bbbf914d5cd9abed27c63.png

3cd3a2805f3fe625dc95a2e5a375e8af.png

55c0632a8840ed8fe79cd369714254e3.png

a674ee1239d2d42a26beacb6d4564832.png

背景属性

8b41a07a7adb3adbaa70be804879f72a.png

c3f0630e3b0584fe734bca960b749dfa.png

d24f7d184de4c7b074022d4bc9fb6405.png

文字属性

07eba95c99264865ab09bb284bd8ec8f.png

aff68e0a557bd0e058dffcab146ac9d9.png

28de635060f05f9f985d0df0544a6ff2.png

盒子模型

b801cc197edd087f5e2deb26a4a68d6b.png

e0c768b126ad61d8593b7f92a812cae7.png

80d5465fccd0a1959596538c2e1879f8.png

浮动

64022608ef2e542cda5767e4b694c6e4.png

b2f96fc587be8b3a0f66f7afe80b1483.png

ded736d38ce11dac7fc3c2a690fb8580.png

弹性布局——目前最流行的方式

(2014年开始到现在,目前的网站基本都是这种方式)

在元素上设置了display:flex;的属性即为弹性容器。

4ee0d841756058c519f63f4720e6fb21.png

注意:弹性子元素为3个child的div元素,span不属于直接子元素,那么不是弹性布局。

弹性布局主轴:确定子元素的排布是水平排布还是竖直排布。侧轴为主轴的垂直方向。

设置主轴的方向:flex-direction,

row(默认值):子元素是从左到右进行排布。

Row-reverse: 子元素是从右到左排布

Column:子元素从上到下排布

Column-reverse:子元素从下到上排布。

注意:默认弹性子元素只会排成1行或者是1列。不会换行。

f631c765e19fdd8b3ffdb4635e274c15.png
侧轴因为只有一行,所以没有平均分布

flex-wrap: wrap;——换行

482e624f44bb6b13b4b5070013c54e3f.png
默认设置是nowrap——不能换行

align-content——设置侧轴的多行排布

e9565bbc926dd7e730a338fea3b0d406.png

剩余空间占据flex

要求做一个网站,无论页面怎么缩小,广告都要占据一定位置,剩余空间留给其他内容显示。

708eb9f1ccd13a211c14858b20dc944f.png

弹性子元素的排序

bde0746b598f65a614158b00e4066479.png

e2fbe479bd84c5530becaacaae087fcd.png

弹性子元素侧轴单独设置——align-self

be8cf030bcd393c8a444e3484141e57e.png

34419de5f4707a69cc4d4079646cf04b.png
只有侧轴才可以单独设置

定位

6732fcb7742a913b1981b5e473da4e11.png

bf8a05504e1dd5d4407f7e88833fea94.png

b1d7edc15a7dfa529b484530e983d9af.png

a346a47f7f9daa203dfc207bdc598ff8.png

1adcc1fca75c7369f330a8ff806b42a4.png

PPT版详细解释

35a68d4da44245694204bda1a2b704ad.png

04575582f344879f43f35fff1cce8dd0.png

892a092df8677d13275b944300bec891.png

88cdf3dd636cd29c578a5933180b2d20.png

f4375f94f44ca5c12acc5061aa1893c2.png

rel=“stylesheet” 该属性是必备的 表明链接的方式

type=“text/css” 指定文件类型

e1fa1fcc87a05ef44bf74977ae925a92.png

c2c937fffa71ce51640987821f714056.png

315b9fb4d5db47db2419546da0ea28e3.png

a47690adcff3a675d44c5abf3d974463.png

950a236d5a0a95cc564ec8c55c8847e7.png

027fbe1197d5a20f3011c3cbc92f69f2.png

1afbfe1ece04e4036dd6e2b9920c38ee.png

eedef0fc856b4d8527735502e39f0967.png

fa63c97f7bd43ca5332bf6258f511e75.png

12f39646379012f178f57761142e7d7e.png

2abb0b62a457a308c0615e0d641fc0fd.png

843bf053f0956f7c2564ea6282b79527.png

7b91210ed1b9cbcc49989fc100a249d9.png

179f2fd0404e2dd71f4d6a224ad2cbe2.png

f1d8011bded8c3732bf29a916c351841.png

31616d6cec4937cffcc14ec172e1b8f5.png

488d90b056fc81350ac719b1f1736a66.png

51bf3e676431f4f48e9116776537e5b7.png

71c062b93ddae88d1f8f1a1b1299d55b.png

c681e4b01d8b585f90586bd6555af74d.png

c1e440b1e834ca227ec0e20f43e7ebca.png

d8bfa6a390fa80894b5f65f30396cfad.png

445348f73bbb8fe1f43d3b5d56d2e665.png

f7da82262944c3629810af93de39096d.png

6a7aa25a57d3dadd36e01d3c4a60f6a8.png

727b6b510c4d0005eab0f099dfa17dfc.png

149fa45cdc2cb3bcf10ff6526faf20a7.png

1be94d254ba6c06ecb9ef9878c736b3f.png

1a53b0ff82ba76a7136f9db368867d84.png

bd8b54c898a5d7ba1202165faa213f0c.png

986cf978695ce92bdf97ba60282cdd0b.png

64b94a1414f144f4e0ca122e3fde857b.png

d5a6076dfc038f72fe467e901e1356e8.png

66f954b617d8afe1f638ce333f92ccb4.png

css列表属性

6d431ad69887f8eb88f870031940bb82.png

f156a29ead35f8e4a2ef2584eecb4929.png

ffc0df0b32245e5c3744445a7a1316f0.png

586e1df44cb6a166f70fb61924958c39.png
边框是加在元素之外的,加了边框元素会变大要想保持元素不变 应该在原有的基础上减去边框的宽度

6c9885e92c1a6d73e96379a0e5031224.png

e3c7cd7c140038c165616797d860bc1c.png

c918c6531df2cd4970776e982816508e.png

07eb0c4dc9be060a56921ed352298dd3.png

1d629daeb603a0f3f6c6f54d003afdc2.png

说明:两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置。

向右方向,向下方向都是负值。

0d133c8f7ad68a3c5113e1a3897bbe1a.png

45d52b317db7a7ec1d8dfd889d7a65cf.png

9a41bad94051bd8c3e7eeaf0ad3297cf.png

4fea6a2e85ecd462d2822131737ec563.png

5b802a47d06f068992c82f2689fce10f.png

c6f3cd3e705d4e31fbf01e800fd932d1.png

e029b7dee66d0d4d817b304d87cef89e.png

299cf9f81bd23a6df17a27134c051590.png

f87f6becb64102dbc0ce2072c0212301.png

注意:样式(border-style)是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有边框样式,将根本没有边框。
记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果希望边框出现,就必须声明一个边框样式。

578bfbeebb3b9a3a461a9441fdc7a78f.png
这些效果实现的原因;(后设置的样式起作用)

23da43b9db6a59340421f54564560c7a.png

类似于表格的cellpadding属性;

默认情况下,背景会以padding的左上角为基点在盒子中进行平铺。

5d98e822afed91978dd986e71a3b66d5.png

bbc5e9af94049dbe6e600b720f00a421.png

dad45a50b40a7a0e08454ea646f6dbbf.png
即顺顺时针方向

9e598752f9ed308bd43d155f11964fb5.png

margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

c82c192a13c2134854b65e73430e03a4.png

6de09d6d44d21aaed5036a7bd012ce0c.png

e5a31ad158b66570c16fb6b5fec7b141.png

4e1a772be371a89782804dcfdd474439.png

c74e875f8235b741b6e2784865a09961.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值