我的学习总结

1.设置图片边框:border-width:(粗细)    ;   border-color:(颜色)     ;  border-style:(线性)     ;

不同的边框可以设置不同的样式,eg:border-left-style、      border-top-width    ....   solid实线

2.图片的缩放: width   height  (百分比,像素)

3.图文混排:

文字环绕:float (浮动)

图片与文字对齐方式:水平对齐 text-align:             垂直对齐 vertical-align:

4,。设置背景颜色与图像:background-color:         background-image:url(地址)

可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。

no-repeat:不平铺。

repeat-x:只沿水平方向平铺。

repeat-y:只沿垂直方向平铺。

5.设置背景图像位置:background-position:( 可以设置两个值  eg:left top)

6.设置背景图片固定位置  :background-attchment:fixed;          图片滚动: scroll

补充:去掉无序列表前的小圆点,list-style: none;

7.设置图片边框:border-width:(粗细)    ;   border-color:(颜色)     ;  border-style:(线性)     ;

不同的边框可以设置不同的样式,eg:border-left-style、      border-top-width    ....   solid实线

8.图片的缩放: width   height  (百分比,像素)

9.图文混排:

文字环绕:float (浮动)

图片与文字对齐方式:水平对齐 text-align:             垂直对齐 vertical-align:

10,。设置背景颜色与图像:background-color:         background-image:url(地址)

可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。

no-repeat:不平铺。

repeat-x:只沿水平方向平铺。

repeat-y:只沿垂直方向平铺。

11.设置背景图像位置:background-position:( 可以设置两个值  eg:left top)

12.设置背景图片固定位置  :background-attchment:fixed;          图片滚动: scroll

补充:去掉无序列表前的小圆点,list-style: none;

13.绝对定位:(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)

position: absolute;

top:..px;

left:..px;

14.相对定位:  ( 绝对定位的元素的位置相对于最近的已定位的元素,

如果元素没有已定位的元素,那么它的位置相对于最初的包含块。)position:relative;

top:..px;

left:..px; 3.居中    margin:0 auto     要在div里设置的

 css基本属性—表格样式

1.控制表格:cellspacing:列间距    cellpadding:列的内边距

border:表格边框       bgcolor:表格颜色     border-collapse:合并相邻列的边框线

border-spacing : 设置列的间距

设置表格宽度:table-layout:fixed(固定)或者auto(自动)

<thead>:表示表头       <tbody>:表示表内容        <tfoot>:表示表尾   (顺序可以不一样,但一般还是按顺序)

2.设置鼠标经过时表格的样式:a:hover

3.CSS与表单:a:制作像文字一样的按钮

transparent(透明的) 设置背景透明

border:0px;     eg:<button id="" type="button" style="background: transparent;border:0px /none">......</button>

b:制作多彩下拉菜单   select  option

c:制作只有下划线的输入框   border:0px/none;

border-bottom:1px (粗细) dashed(线性) #000000(颜色);                                                                              补充:

1.display:black(行级元素换成块级元素)/ inline(块级元素换成行级元素)

2.CSS3的选择器:   :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

用CSS设置链接与导航菜单  (les9)

1.设置超链接样式: 在HTML中<a>    在CSS中还可以用伪类选择器的四个样式     a:link(未访问)     a:visited(已访问)。

a:hover(鼠标移上去)     a:active(激活)

2.创建按钮式超链接:text-decoration: none;               a:link{   }        a:active{   }

(可以设置这些)    background:  ;

color:   ;

border-right:  px solid    ;

border-bottom: px solid    ;

border-left:    px solid   ;

border-top: px     。

3.制作荧光菜单:  应用无序列表,<div>,a:hover,    ( 查  les9)。

4.控制鼠标(cursor)指针  . {cursor:  }  (查 属性下的其他 CSS 2.0 中文手册)。

5.设置项目列表格式: 可以用有序列表<ol>与无序列表<ul>     用  list-style   来设置。

6.创建简单的导航菜单:

a:垂直排列菜单

很多时候会用上  list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。

b:横向菜单

实现横竖转换只需设置float:left即可,同时把宽度取消掉。

7.设置图片翻转效果:(指网页中的一个图片,在鼠标指针经过时换成另外一个图片。)  可以用hover.

补充CSS3的属性  rotate(角度)

效果:当鼠标移上去的时候,列表可以转动你设置的角度。(正为顺时针,负为逆时针,若是180度,可以看见字是倒立的。不能清楚的看见转动

,但可以看见字的变化)

transform(转换):rotate( 旋转;循环 使旋转;使转动;使轮流)(-20deg) ;    deg:程度(degree)

CSS的盒模型  

1.盒子的概念:在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。

一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。

2.设置边框,内边距,外边距:

a 内边距(padding)  padding属性可以设置1、2、3、4个属性值,分别如下:

设置1个属性值时,表示上下左右4个padding均为该值。

设置2个属性值时,前者为上下padding的值,后者为左右padding的值。

设置3个属性值时,第1个位上padding的值,第2个为左右padding的值,第3个为下padding得值。

设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。

b  外边距(margin)   margin指的是元素与元素之间的距离       margin and padding  的设置时一样的。

3.盒子之间的关系:

标准的文档流:

<div>标记与<span>标记:div简单而言是一个区块容器标记,即<div>与</div>之间相当于一个容器,

可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。

二者的区别在于div是块级元素,它包含的元素会自动换行。而span是内嵌元素,不会换行。

4.盒子在标准流中的定位原则:

行内元素之间的水平margin :当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。

块级元素之间的垂直margin :当两个块级元素是垂直排列,则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和, 而是两者中的较大者。

{背景定位:background-position:center; 为 background-position 属性提供值有很多方法。首先,

可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,

不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。)

CSS盒子的浮动与定位

1.盒子的浮动(float):在标准流中,一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。

CSS中有一个float属性,默认为none,float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,

使用clear清楚浮动的影响

clear属性除了可以设置为了left和right之外,还可以设置为both,表示同时清除左右两边的影响。

position属性可以设置4个值:

static:默认值

relative:相对定位  (会相对于它原本的位置,通过偏移指定的距离,到达新的位置。不影响其他盒子)

absolute:绝对定位(其父元素的相对位置  其会影响他后面的盒子  就好像这个盒子被拿走了,

其他排在后面的盒子将填补前面的位置。)

fixed:固定定位(当滚动条滑动式其不会改变位置,会一直在那里。)

2.盒子的定位(static):

盒子的定位(relative) ——left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。

3.z-index  :z-index属性用于调整定位时重叠块的上下位置,z-index值大的元素位于值小的上方。(默认的z-index值为0,当两个块的z-index值一样时,

将保持原有的高低覆盖关系。)

4.盒子的display属性  :display属性的block和inline两个值,一个代表块级显示,一个代表内嵌显示。display还有个值为none,当设置为none时,

表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。

补充

1.height:auto

overflow:hidden        这是个组合件,其作用是:使自动变到与内部方框(或是最高的那个方框)一样高。必须一起使用。

2.定位 (position)   这里的left是指:离左边多远。top是指离上边多远。

相对定位:(position:relative;)其参考点是:本身原来位置的左上角。移动后原来的那个位置会被占据。

绝对定位:(position:absolute;)其参考点是:其父元素有position的左上角。移动后原来的那个位置会空出来。

3.清除(clear)   只影响清除的本身。其意思是:想让哪块动,就在哪块上用clear。通常用clear:left;    clear:both;

4.display(显示):           display:none;  隐藏,空间留给他们用。

visibility:hidden;   隐藏,位置空出来,仍在那里。

display:inline;此元素会被显示为内联元素,元素前后没有换行符。

display:block; 此元素将显示为块级元素,此元素前后会带有换行符。

5.用iframe实现框架结构:

<iframe  src=“URL”  width=“x”  height=“x” scrolling="[auto|yes|no]"  frameborder="0|1“ name="内部框架的名称”></iframe>

<a href="地址" target="内部框架的名称">文字</a>

6.opacity(不透明):值为0到1.

7.a标签的提交方式默认为get.

8.行级元素设置的width,height,是没有用的。

时间: 2024-09-30 15:03:33

我的学习总结的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习(吐血超详细总结)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

轻松学习C语言编程的秘诀:总结+灵感

目前在准备一套C语言的学习教程,所以我这里就以C语言编程的学习来讲.注意,讲的是"轻松学习",那种不注重方法,拼命玩命的方式也有其效果,但不是我提倡的.我讲究的是在方式方法对头.适合你.减轻你学习负担和心里压力的前提下,才适当的抓紧时间. 因此,探索一种很好的学习方法就是我所研究的主要内容. 众所周知,学习C语言并非易事,要学好它更是难上加难.这和你期末考试背会几个题目的答案考上满分没多大关系,也就是说你考试满分也说明不了你学好.学精通了C语言.那么怎么才算学精通C语言?闭着眼睛对自己

开始我的Python爬虫学习之路

因为工作需要经常收集一些数据,我就想通过学爬虫来实现自动化完成比较重复的任务. 目前我Python的状况,跟着敲了几个教程,也算是懂点基础,具体比较深入的知识,是打算从做项目中慢慢去了解学习. 我是觉得如果一开始就钻细节的话,是很容易受到打击而放弃的,做点小项目让自己获得点成就感路才更容易更有信心走下去. 反正遇到不懂的就多查多问就对了. 知乎上看了很多关于入门Python爬虫的问答,给自己总结出了大概的学习方向. 基础: HTML&CSS,JOSN,HTTP协议(这些要了解,不太需要精通) R

javaweb学习纲要

Java Web  概述 大纲: 1.C/S体系结构 2.B/S体系机构 3.两种体系结构比较 4.主流的Web程序应用平台 5.java web学习路线图 1.C/S体系结构 C/S是Client/Server的缩写,即客户端/服务器结构.在这种结构中,服务器通常采用高性能的PC机或工作站,并采用大型数据库系统(如Oracle或SQL Server),客户端则需要安装专用的客户端软件,如下图所示.这种结构可以充分利用两端硬件环境的优势,将任务合理分配到客户端和服务,从而降低了系统的通讯开销.在