![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
牧屿秭归
这个作者很懒,什么都没留下…
展开
-
css基础知识3(盒模型文本溢出)
1.盒模型概念如果css对html文档元素生成了一个描述该元素在html文档布局中所占空间的矩形元素框(element box),则可形象的看作为为一个盒子。css围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列盒子相关的属性(内容、填充、边框、、便捷),可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然css中没有盒子这个单独的属性对象,但它却是css中无处不在的一个重要组成...原创 2019-07-07 18:24:00 · 603 阅读 · 0 评论 -
CSS基础知识(2)
1.列表属性语法:{list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);}说明:定义符号列表样式语法:{list-style-image:url(所使用图片的路径及全称);}说明:使用图片作为列表符号语法:{list-style-postion:outside(外边)/inside(里边);}说明:定义列表符号...原创 2019-07-06 18:22:31 · 190 阅读 · 0 评论 -
css基础知识
1.css样式表的建立方法一:内部样式表(嵌套到页面中)写在头标签head之间<style type="text/css"> /*css语句*/ </style>方法二:内联样式(行间样式,行内样式,嵌入式样式)<标签 style="属性:属性值;属性:属性值;"></标签><div style="width:10...原创 2019-07-05 19:35:05 · 178 阅读 · 0 评论 -
css滑动门技术小实例
通过css sprites(图片整合)中的滑动门技术实行鼠标点击时背景能够发生改变,效果如图(PS:因为找不到素材就自己用qq表情拼接的,我自己也知道不太好看):图片按顺序分别是鼠标没有点击;鼠标点击首页;鼠标点击新闻;鼠标点击娱乐;鼠标点击体育以及页面用到的原始背景图片。代码如下:<!doctype html><html><head>&...原创 2019-07-10 20:12:49 · 266 阅读 · 0 评论 -
css基础知识6(宽高及高级属性)
宽度自适应1.作用网页布局中经常要定义元素的宽和高,元素的大小能够根据窗口或子元素自动调整称为自适应。元素自适应在网页布局中非常重要,它能够使网页显示更加灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。2.实现方法1)宽度自适应:元素宽度设置为100%。(块元素默认为100%)2)元素具备自小高度的自适应 min-height属性:最小高度3)说明:IE6浏览器不识别该属性,he...原创 2019-07-10 19:53:05 · 716 阅读 · 0 评论 -
css基础知识9(3D效果弹性盒)
1.3D效果语法:transform-origin:x-axis y-axis z-axis说明:变形的原点,默情况变形的原点在元素的中心,或者是元素X轴和Y轴的50%处。它可以是长度值、百分比或者是一下三个关键词之一:left(表示在包含宽的X轴方向长度的0%),center(表示中间点)或right(表示长度的100%)。第一个长度值指定相对于元素的包含框的X轴位置上;第二个长度值指定相对于...原创 2019-07-13 19:21:30 · 206 阅读 · 0 评论 -
css利用锚点制作轮播图
页面运行效果如图所示,有编号为1、2、3、4共四张图片,当鼠标点击对应的图片编号时,可以跳转到对应编号的图片。效果图界面代码如下:<!doctype html><html><head><meta charset="utf-8"><title>轮播图</title><style type="tex...原创 2019-07-09 19:43:36 · 1075 阅读 · 0 评论 -
css基础知识5(锚点及图像整合)
定位锚点1.元素的定位设置position属性:定义建立元素布局所用的定位机制语法:{position:static/absolute/relative/fixed;}说明:1)static 默认值。没有定位,元素出现在正常的流中(忽略top,bottom,leftright或者z-index声明)。2)absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定...原创 2019-07-09 19:30:53 · 1051 阅读 · 0 评论 -
css基础知识7(新增属性,css3过渡及2D效果)
css3新增属性1.背景属性(续)在一个元素中添加多张背景图片语法:{url(images/img1.jpg),url(images/img2.jpg),url(images/1.jpg); background-repeat:repeat-x,repeat-y,no-repeat;}说明:第一个定义的背景图片是最上面的,最后定义的是最下面的,使用background-repeat和bac...原创 2019-07-12 19:31:53 · 274 阅读 · 0 评论 -
css基础知识8背景属性
css3新增属性1.背景属性语法:background-clip:border-box/padding-box/content-box说明:在css2中,背景的显示范围是指内部补白之内的范围,不包括边框;而在css2.1乃至css3中,背景的显示范围是指包括边框在内的范围。在css3中可以使用backgrouund-clip来修饰背景的显示范围,如果将background-clip的属性值设...原创 2019-07-12 18:49:33 · 233 阅读 · 0 评论 -
css小实例
界面运行效果如下所示:界面代码如下:由于系统会为某些元素设置默认的margin值或者padding值,所以先要清除所有元素的margin和padding值。即:*{margin 0; padding 0;};此外还要将<li>标签中的list-style设为none。对于box1,只给了高度height的值是因为对于浏览器来说,不写宽度就默认从浏览器的最左边到最右边。...原创 2019-07-08 17:58:37 · 278 阅读 · 0 评论 -
css基础知识4(元素类型)
元素类型1.元素的类型根据CSS显示分类,XHTML元素被分为3类:1)块状元素:在网页中以块的形式显示,所谓的块状元素就是元素显示为矩形区域;默认情况下块状元素都会占据一行,会按顺序自上而下排列;块状元素都可以定义自己的高度和宽度;块状元素一般作为其它元素的容器,可以容纳其它内联元素和其它块状元素。2)内联元素(行内元素):常见的内联元素如a,span,i,em,strong,b等;内联...原创 2019-07-08 17:32:55 · 199 阅读 · 0 评论 -
css基础知识7(HTML5新增标签及css3选择器)
HTML5新增标签1.HTML5的特点语义化标签(尽可能的使用有相对应的结构的含义的HTML标签)1)语法:<header></header>说明:header元素表示页面中一个内容区块或者整个页面的标题。2)语法:<footer></footer>说明:footer元素表示整个页面或者页面中的一个内容区块的脚注。一般来说。包含原创作者的...原创 2019-07-11 19:47:58 · 187 阅读 · 0 评论