html/css(新手入门第三篇)

X_Zed X_Zed     2022-07-31     724

关键词:

一、学习心得---参考优秀的网页来学习。

1我们只做的静态网页主要用的技术?html+css 只要网上看到的,他的源代码公开的。
【1】、先去分析,他们页面是如何布局(结构化)
【2】、再试着去做一下,---模仿过程。
【3】、最后我们可以自己尝试创新---通向高手的过程。

css精灵技巧,优化网页的http请求次数,提高网页的效率。
*****css精灵的核心思想,就是将多张图片,合成一张图片,然后通过背景属性中的定位来控制到底显示图片中的哪些部分。
*****如果网页中能选中的图片,那肯定就是插入的图片,选不中,就是背景图片
【css3中常用字体图标来替代传统的小图标(未来趋势)】

二、css布局的方式:
1、默认的,就是按文档流的顺序。按html的结构顺序。
2、浮动方式
3、定位方式

三、浮动
浮动是将块元素的霸道属性,独占一行的行为取消,允许别人和他一行。
浮动其实是这个块从原来的文档流模式中分离出来,他后面的对象就视它不存在。
常用的布局效果,例如:一行并列式,就是在一行中显示几个块元素。

css把网页元素分成两类,一种是块一种是内联元素。
body,div,p,h1,ul与li默认情况下是块元素。是要想让他们在一行中显示,就要用到浮动。

我们在制作时,你多使用不同的浏览器查看你的结果,这样你就知道各种浏览的差别。
*****总结出,当IE6父元素中的子元素的高度超过了父元素的高度,IE6默认会把父元素的高度自动增加。
*****如果想让多个块显示在同一行中,可以讲这些块都设置成浮动,并且浮动方向相同。
*****浮动浮动,先浮后动,浮动的对象会先漂浮起来,离开原来的位置。后动,就是它后面的对象。会向它原来的位置上动起来。

四、清除浮动:就是可以去掉前面对象的浮动对后面对象的影响。
为什么原来在一行中的两个块会因为浏览器窗口的大小改变而改变原来的位置。(可另外添加一个盒子把他们包裹起来)
*****设置一个块为水平居中时,都会给这个块设置一个宽度值。
*****当父元素没有指定高度时,并且它的子元素有浮动,这时这个父元素的高度不会自动增加。
1、第一种方法:增加一个空标签,就是没有内容的标签。会增加代码。
2、第二种方法:给父元素,加overflow:hidden
3、利用伪对象after方法。
网上最流行的清除浮动代码:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:“.”;
}
*****定位布局,就是可以通过元素的position属性控制元素的位置。
*****当我们要想使用绝对布局时必须要有两个条件
【1】、必须要给父元素增加定位属性,一般建议使用position:relative;
【2】、给子元素加对对定位position:absolute;同时要加方向属性。

*****相对定位与绝对定位。
绝对定位是父元素为基准点进行定位---会脱离文档流。(注意,脱离文档流之后子元素不会继承父元素的宽)
相对定位是根据自身为基准点,进行定位---离开原位置,但还占着原来的空间。

java小白入门系列第三篇从新开始

...sp;  17:47:51郑州  西北风SueJava小白入门系列第三篇从新开始  越过中秋,迈过国庆,这一个多月乱七八糟又不得不应对的事接踵而至,好在学习一直在持续,用户中心的项目今天终于收尾测试并开始复习,就借着... 查看详情

新手初识java,第三篇:基本知识

今天跟大家说说基本的小知识。也是自己学习的时候整理的。快捷键://删除整行ctrl+d     //智能提示alt+?     //切换到下一行shift+enter     //全文中查询某个字符ctrl+f     //复制本行至下一行 ctrl+alt+↓   ... 查看详情

opencv入门指南第三篇canny边缘检测(代码片段)

【OpenCV入门指南】第三篇Canny边缘检测   图像的边缘检测的原理是检测出图像中所有灰度值变化较大的点,而且这些点连接起来就构成了若干线条,这些线条就可以称为图像的边缘。   Canny边缘检测算子是Jo... 查看详情

javaweb入门详解(第三篇)web服务器之tomcat简介(代码片段)

JavaWeb入门详解(第三篇)web服务器之Tomcat简介1、web服务器概述1.1、什么是服务器  服务器:就是安装了服务器软件的计算机。  服务器软件:接收用户请求、处理请求以及响应请求的软件。而web服务器,可... 查看详情

小白入门深度学习|第三篇:深度学习初体验(代码片段)

文章目录一、深度学习是什么二、实现过程1.准备数据2.构建神经网络模型3.编译模型4.训练模型5.预测三、总结课后练手项目(附代码+讲解)🚀我的环境:语言环境:Python3.6.5编译器:JupyterNotebook深度学... 查看详情

关于从入门three.js到做出3d地球这件事(第三篇:光与影)(代码片段)

关于从入门three.js到做出3d地球这件事(第三篇:光与影)本篇介绍    通过前面几篇我们了解了坐标系、相机、物体等概念,这一篇我们要让3d世界里的物体,更像我们的现实世界的物体,我们要为3d世界绘制光与影。1.高级材料 ... 查看详情

c++从入门到入土第三篇:类与对象(上篇)(代码片段)

类与对象(上篇)文章目录类与对象(上篇)面向过程和面向对象的初步认识类的引入类的访问限定符访问限定符说明类的实例化类对象模型类对象大小的计算this指针面向过程和面向对象的初步认识面向过程(Proce... 查看详情

保姆级连载学python:第三篇pycharm的初始设置(代码片段)

PyCharm的初始设置(知道)课程详情:黑马程序员Python入门教程_适合零基础自学的Python教程目标恢复PyCharm的初始设置第一次启动PyCharm新建一个Python项目设置PyCharm的字体显示PyCharm的升级以及其他PyCharm的官方网站地址... 查看详情

vue入门教程第三篇(条件与循环)(代码片段)

v-if语法(条件)符合条件时显示(渲染)某一元素。1<divid="app">2<divv-if="ok">3<h1>title</h1>4</div>56<divv-if="type==1">7<h1>title2</h1>8</div>9<divv-else-if="type==2">10<h1>title3</h1>11</div>12<d... 查看详情

第三篇:函数

第三篇:函数   PYTHON-函数的定义与调用,返回值,和参数PYTHON-函数的定义与调用,返回值,和参数-练习PYTHON-函数对象,嵌套,名称空间与作用域,闭包函数PYTHON-迭代器,xxx生成式PYTHON-有参装饰器,无参装饰器,语... 查看详情

英汉翻译第三篇

Manproposes,Goddisposes.TodoasGoddisposestheAmericanCollegeofSurgeons 美国外科医生学会TrinityCollege剑桥三一学院/?tr?n?ti/入学matriculation毕业graduation  查看详情

第三篇第二章消防给水

防止下水回流  查看详情

spring第三篇

...二篇中,叙述了将对象交给spring创建和管理,今天在spring第三篇中,主要写两个点一是spring的思想二是spring中bean元素的属性配置。1spring思想   1.1 IOC(Inverseof Control):控制反转,将对象的创建权交给了Spring. ... 查看详情

css样式(第三篇)

?<divclass=”box1”><divclass=”line”></div><divclass=”box1-1”></div></div>.line {border: 10pxsolid #9f8e02;border-radius: 10px;}.box1-1{width:95%; 查看详情

第三篇第十四章消防供配电

  查看详情

第三篇第十章建筑灭火器配置

     查看详情

深入理解javascript函数系列第三篇

...来创建新的函数对象。本文是深入理解javascript函数系列第三篇——属性和方法 属性【length属性】  函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数functiona 查看详情

django框架之第三篇模板语法

Django框架之第三篇模板语法(重要!!!)一、什么是模板?只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板。二、模板语法分类一、模板语法之变量:语法为{{}}:在Django模板中遍历复杂数据结构的关键是句... 查看详情