vivianlisunny-CSDN博客

原创 css-当图片宽度大于父元素宽度时如何使图片居中显示

如果图片的宽度大于父元素的宽度，不能使用margin：0 auto；(图片宽度小于父元素宽度时使用)或者text-align；center；让图片居中。这种情况有两种方法处理： 1、使用定位流让图片居中：这种方法有明显的弊端，需要知道图片的宽度<head> <meta charset="UTF-8"> <title>图片居中方式</title> <style>

2017-08-20 19:39:38 1942

原创 css-过度模块

一、a标签伪类选择器 1、标签存在一定的状态： 1.1、默认状态：从未被访问过 1.2、被访问过的状态 1.3、鼠标长按的状态 1.4、鼠标悬停在a标签上的状态2、a标签伪类选择器是专门用来修改a标签不同状态的样式的 2.1、:link修改从未被访问过的样式a:link{ color: tomato; }2.2、:visited修改被访问过的状态下的样式a

2017-08-11 21:46:33 292

原创 css-定位

一、定位流 1、分类： 1.1、相对定位:相对于自己以前在标准流中的位置来移动，需要与top、bottom、left、right来使用注意点：相对定位是不脱离标准流的，会继续在标准流中占一份空间,不利于布局界面；同一个方向上只能有一个定位属性，如只能left，不能left和right都设置；由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内块级元素、行内元素的；由

2017-08-10 22:23:16 214

原创 css浮动

一、网页布局方式 1、标准流(文档流、普通流)排版方式：浏览器默认的排版方式 1.1、在标准流中有两种排版方式：垂直排版-块级元素；水平排版–行内元素、行内块级元素2、浮动流排版方式 2.1、只有一种排版方式：水平排版，只能设置某个元素左对齐、右对齐，没有居中对齐center；在浮动流中不能使用margin：0 auto； 2.2、在浮动流中不区分块级元素、行内元素、行内块级元素，都能水平排

2017-07-30 18:01:18 174

原创 css盒子模型

一、盒子模型 1、在HTML中所有的标签都可以设置宽高、内边距、外边距、边框2、box-sizing的取值： 2.1、content-box：元素的宽高等于边框+内边距+内容的宽高 2.2、border-box：元素的宽高=width属性值 3、如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距，外面一个盒子也会被顶下来，如果不想外面的盒子被顶下来，那么需要给

2017-07-12 08:30:37 256

原创 css边距属性

一、内边距：边框和内容之间的距离 1、格式 1.1非连写 padding-top：5px； padding-right：5px； padding-bottom：5px； padding-left：5px；1.2连写 padding：上右下左（省略规律同边框属性）注意点：给变迁设置内边距后，标签占有的高度和宽度会发生变化；内边距也会有背景颜色二、外边距：标签与标签之间的距

2017-07-09 15:44:39 487

原创 css-边框属性

一、边框属性：环绕在标签宽度和高度周围的线条 1、边框属性的格式 1.1、连写(同时设置四条变的边框) border:边框的宽度边框的样式边框的颜色；快捷键：bg+ border: 1px solid #000; 注意点：连写格式中颜色可以省略，省略后默认黑色；连写格式中样式不能省略，省略后几句看不到边框了连写格式中宽度可以

2017-07-09 14:59:54 228

原创 css背景

一、如何设置标签背景颜色在css中通过background-color: 取值; 来设置.box{ background-color: red; }二、如何设置背景图片在css中通过background-image: url(“”); 来设置注意点：图片地址可以是本地地址，也可以是网络地址;如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向

2017-07-08 18:50:00 201

原创 css显示模式

一、div标签 1、作用：配合css完成网页的基本布局二、span 1、作用：一般用于配合css修改网页中的一些局部信息<head> <meta charset="UTF-8"> <title>span</title> <style> span{ color: red; } </style></head><

2017-07-04 21:01:30 201

原创 css三大特性

一、继承性 1、作用：给父元素设置一些特性，子元素也可以使用 2、注意点： a、不是所有的属性都可以继承，只有以color／font-／text-／line开头的属性才可以继承 b、在css的继承中不仅是儿子可以继承，只要是后代都可以继承 c、css继承中的特殊性： a标签的文字颜色和下划线是不能继承的； h标签的文

2017-07-04 07:20:08 550

原创 HTML5-选择器续

十、通配符选择器 1、作用：给当前界面所有标签设置属性 2、注意点：当界面标签太多时会影响性能，一般不用*{ color: red; }选择器小练习<head> <meta charset="UTF-8"> <title>选择器练习</title>  <style> /*1、标签选

2017-07-02 19:02:20 150

原创 css选择器

一、id选择器 1、格式：#id名称{属性：值} 2、注意点：html的每个标签都有id属性，同一页面的id值不能一样；id只能是字母、数字、下划线，不能以数字开头；id一般是给js使用的二、类选择器 1、格式：.类名{属性：值} 2、每个html标签都有class属性，在同一界面中类名可以重复 3、class命名规范和id一样 4、类名是用来给某个特定标签设置样式的 5、在html中

2017-07-02 18:34:01 201

原创 css的格式与属性

一、格式<style type="text/css"> 标签名称{ 属性名称: 属性对应的值; ... } </style>注意点：style标签必须写在head标签的开始和结束标签之间；style的属性type可以不用写，默认就是text/css二、文字属性 1、规定文字样式的属性格式： font-style:

2017-06-29 07:21:57 299

原创 HTML5被废弃的标签

一、为什么HTML中有一部分标签被废弃了因为当时HTML标签只有添加语义这一个作用，而早起的HTML标签中有一部分标签是没有语义的，是用来修改样式的，所以这部分标签就被淘汰了。例如、、、、、、等。这些被淘汰的标签基本不使用，一般用于css的钩子 strong替代b标签：定义强调文字的重要性 ins替代u标签：定义插入的文字 em(emphasized)替代i标签：定义强调的文字 del替

2017-06-27 08:11:50 1362

原创 HTML5-详情和概要标签、marquee标签

详情和概要标签一、作用：利用summary标签来描述概要信息，利用detail标签来描述详情信息，默认情况下是收起展示二、格式：<details> <summary>四大名著</summary> 中国古典长篇小说四大名著，简称四大名著，是指《红楼梦》、《三国演义》、《水浒传》、《西游记》这四部巨著。四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产。此四部巨著在

2017-06-27 06:53:36 1222

原创 HTML5-video、audio标签

video 一、作用：播放视频二、第一种格式 <video src=""></video>第二种格式:由于没有一种视频格式是五大浏览器都支持的，所以推出了第二种格式解决浏览器,以后浏览器播放视频时会从以下三种视频格式中选择自己支持的一种来播放浏览器播放视频还有一个前提条件就是浏览器必须支持HTML5标签，但是过去的一些浏览器是不支持HTML5标签的，所以为了让过去的一些浏览器也能播放

2017-06-27 06:29:37 325

原创 HTML5-表单标签

一、什么是表单表单就是专门用来收集用户信息的二、表单元素 1、元素：在html中标签／标记／元素都是指html的标签 2、常见表单元素： 2.1、input标签：有一个type属性，这个属性有很多类型的取值，取值的不同决定了input标签的功能和外观<form action="https://www.baidu.com/">  账号：<i

2017-06-25 15:02:42 591

原创 HTML5-表格标签

1、表格标签作用：给一堆数据添加表格语义，当数据非常大的时候，利用表格标签会展示得很清晰2、格式<table> <tr> <td>xx</td> </tr></table>tr标签代表整个表格中的一行数据 td标签代表一行中的一个单元格3、注意点 a、表格标签有一个边框属性border，默认宽度是0 b、表格的宽高默认是按照内容尺寸来显示的 c、制做细线表格

2017-06-20 22:34:57 294

原创 HTML5-列表标签

一、列表标签作用作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体二、列表标签分类： 1、无序列表unorderd list:给一堆数据添加列表语义，并且一堆数据中所有的数据都没有先后之分格式：<ul> <li>需要显示的条目内容</li></ul>注意：ul标签是给列表内容添加语义的不是添加小圆点的；ul标签和li标签是一个整体，一起出现；ul标签中

2017-06-20 06:55:55 291

原创 HTML5基础标签

一.H标签作用：用于给文本添加标题语义格式：xxx 注意点：H标签是用来给文本添加标题语义的，而不是用来修改文本样式的；H标签最多有6个,h1~h6,h1最小;被H系列标签包裹的内容会独占一行；二.p标签作用：告诉浏览器哪些文字是一个段落格式：xxx 注意点：在浏览器中会单独占一行三.Hr标签作用：实现一条分割线格式：、注意点：独占一行

2017-06-19 21:13:15 208