![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
小乔与你同在
编程是一个漫长和精彩的路程,你要加油,加油,加油。
展开
-
HTML+CSS:总结
1 默认情况下,Div盒子元素宽度跟随父级一致,高度为0,对于一个div,只设置颜色,没有宽高,没有样式效果。必须给予高度,才会出现样式效果。2 浮动一般会抽离出来作为一个浮动类(.FR或.FL),但是也要看具体需求。在ul-li标签中,一般直接给li标签在style样式中添加浮动样式(float:left;),这样就避免了需要在每个li标签中添加浮动类。3 inherit和initial属性...原创 2019-11-30 13:15:35 · 134 阅读 · 0 评论 -
CSS样式--实现img标签在块级标签中居中效果
HTML结构: <body><!--主题内容开始--> <div> <img src="images/TMALL-MART.PNG" alt="" /> </div> </body><!--主题内容结束-->CSS样式:方法一 :使用display:tabl...原创 2019-09-01 11:15:04 · 1018 阅读 · 0 评论 -
CSS样式:水平垂直居中的方法总结
一、 行内元素水平垂直居中(1)单行文本的行内元素使用line-height控制垂直居中,text-align控制行内元素水平居中。div{ width:300px; height:100px; background:pink; text-align:center; line-height:100px; }span{ background:blue; }<div&g...原创 2019-09-01 11:37:48 · 289 阅读 · 0 评论 -
CSS样式:垂直居中的方法总结
1 单行的行内元素.father{ width:400px; height:200px; background:pink; }.son{ /* 子级可以继承父级line-height,给予父级ling-height也可以实现垂直居中 */ line-height:200px; background:orange; }<div class="father"...原创 2019-08-31 22:26:51 · 132 阅读 · 0 评论 -
CSS样式:水平居中的方法总结
1 样式属性描述2 水平居中(1)行内元素水平居中1.1 首先看其父级是不是块级元素,如果是则直接给父元素设置:text-align:center;div{ width:300px; height:100px; background:pink; text-align:center; }<div> <span>我是行内元素</span>&...原创 2019-09-01 08:10:56 · 858 阅读 · 0 评论 -
CSS样式--常用CSS3
css3是css2的升级版本,有许多包含了许多新的功能和更加强大的属性。1 圆角与阴影1.1 border-radus 盒子圆角功能:可以将盒子的四个角设置为圆角的风格属性值:数值:border-radius:10px;百分比(基于宽度高度):border-radius:50%;单个圆角:border-top-lelft-radius:上左角border-top-right-r...原创 2019-11-30 13:06:42 · 241 阅读 · 1 评论 -
CSS样式--表单表格
1 表单1.1 表单的作用:表单通常是用于当需要收集用户输入的一些数据时,比如用户名用户密码,性别选项等等的时候1.2 表单的结构:表单的构成为一个表单区域(form)和若干表单元素(如input)(1)表单区域(相当于体检表):规定一个表单作用的范围,以及提交的地址提交方式等等(2)表单元素(相当于体检表里面的详细信息):用于收集具体数据的标签元素,有许多不同的类别,主要学习的就...原创 2019-11-30 12:57:46 · 1381 阅读 · 0 评论 -
CSS样式--浮动造成父级高度塌陷的原因及解决方法
浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局。一、浮动造成父级高度塌陷的原因子级使用浮动后,会脱离文档流。父级占据原来的位置,此时父级也没有设置高度,没有内容撑开父级高度。html部分:<div id="box"> <div class="btn1"></div> <div class="bt...原创 2019-08-26 09:25:35 · 2536 阅读 · 0 评论 -
CSS样式--定位
定位属性(position)允许元素相对于其自身所在的位置、父级元素移动、浏览器窗口(取决于属性值)进行移动。优点:1.这样的方式具有很好的灵活性,所以多用于元素需要移动到一些比较偏僻的位置2.定位元素会脱离普通文档流,所以通常用于一个盒子与其他元素重叠的时候,不对其他元素造成影响1 定位的属性与值定位的属性,通过不同的值,赋予元素不同定位的特性。1.1 relative 相对定位属...原创 2019-11-30 12:48:29 · 367 阅读 · 0 评论 -
CSS样式--display:inline-block与float的在css样式中效果的区别
2018.1.31是一个不同寻常的日子,今天是我第一次进入csdn的日子,也是我第一次在网上发布自己的文章的日子。我自己是一个小白,刚学习前端半年时间,这段时间是自己学习最为艰辛的一段日子。看到别人发的博客,就想把自己每天的所学所想也用另外一种形式记录下来,便有了我的第一个csdn博客——小乔与你同在。接下来以后我会把自己感觉好的地方,或者生活中的感悟分享出来,与大家共同学习,共同生活。希望我们不...原创 2019-01-31 17:45:47 · 253 阅读 · 0 评论 -
CSS样式--浮动
浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性,无论该元素是否是块级元素还是行内元素,与display:inline-block;的作用非常一致,但是也有很多不同点。1 浮动语法属性:float功能:将元素设置为浮动元素值:left 从左到右排列right 从右到左排列none 无浮动(1)浮动会影响后面兄弟的元素。(2)父级浮动,不会影响子级在父级排列的位置。...原创 2019-11-30 12:39:07 · 207 阅读 · 0 评论 -
CSS样式-- 继承,规范,阿里图标
1 样式继承某些特定的css样式会被其后代元素继承,从而间接的生效,这种样式大部分为字体、文本样式。1)部分常见继承样式color、font、text-align、list-style、word-spacing、line-height…2)继承注意点① a标签由于自身拥有字体颜色,所以无法继承字体颜色以及text-decoration也不能继承。② 继承属性的优先级较低3)强制继承(...原创 2019-11-30 12:24:59 · 369 阅读 · 0 评论 -
CSS样式:line-height、height与font-size的联系
1.基本概念类似于之前小学写字学习的四线三格,分为顶线(top)、中线(middle)、基线(baseline)、底线(bottom)。(1)行高是指文本行基线间的垂直距离。(2)行距是上一行的底线和下一行的顶线之间的距离。行距的一半就是半行距。上间距等于下间距。(3)字体大小是同一行的顶线和底线之间的距离。从图中可以看出:行高=行间距+字体大小=上半行距+字体大小+下半行距2....原创 2019-09-02 22:24:05 · 6760 阅读 · 3 评论 -
CSS样式--字体、文本
1 字体样式字体样式是针对字体本身的一些修饰相关的样式,如字体的颜色,字体的大小等等1.1 color 字体颜色属性:color功能:设置字体的颜色值:(略)( 通用颜色值 )1.2 font-weight 字体粗细属性:font-weight功能:设置字体是否加粗值:关键字:bold-加粗 normal-默认(不加粗)数值:100~900(没有单位,且只有几百这种...原创 2019-11-30 12:16:36 · 262 阅读 · 0 评论 -
CSS样式--背景、指针、透明度
1 背景背景显示在元素最底层的属性,不会影响到元素内的子级或者文字的正常排列,背景通常包含背景颜色和背景图片,两种形式1.1 background-color 背景颜色属性:background-color功能:设置元素背景的颜色,默认值为透明(transparent)值:1)关键字:red , blue , green , yellow , pink …2)16进制:#ffff...原创 2019-11-30 12:06:52 · 195 阅读 · 0 评论 -
CSS样式--不同元素种类的宽高特性总结
新手在刚开始学习中,为了减少代码的书写,不可避免省略一些元素的宽高,比如有时子级元素与父级元素宽高一样的时候,有些元素宽高可以设置不写宽高属性,但是有些就不能。因此在这里就汇总一下这几种元素类型的宽高特性1.行级标签不支持设置宽高,默认情况下宽高均有内容撑开。2.块级标签可以设置宽高,默认情况下高度由内容或字体行高撑开,在块级元素中高度必须设置数值,宽度默认为auto,宽度可以不设置样式,...原创 2019-01-31 23:15:28 · 304 阅读 · 0 评论 -
CSS样式-- 标签的特性
1 行级标签与块级标签我们可以发现并不是所有的标签我们都能为其添加宽度高度等等一些特定样式。根据能否设置宽高,在界面上默认的排列方式,能否设置内外边距等等的特性我们可以把标签大致分为行级和块级两种。1.1 行级标签的特性1)排列特性可以和其他标签在同一行排列2)宽高特性不支持设置宽高、宽高均由内容撑开。在样式中添加宽高,程序不会报错,但是不起作用。3)边距特性上下内外边距设置是生效...原创 2019-11-30 11:12:55 · 311 阅读 · 0 评论 -
CSS样式--CSS选择器
1 选择器的概述css选择器,能对HTML结构中的一个或者一类元素通过选择器属性进行标记,然后可以通过这些标记找到对应的元素,为其添加样式。1.1 选择器分类1.1.1 标签选择器通过标签的名字,找到与标签名对应的元素:示例:选择器( 标签名 ):div{ margin:0; }选中标签: **<div></div>**特...原创 2019-11-30 10:56:16 · 198 阅读 · 0 评论 -
CSS样式--CSS样式相关基础、盒子模型相关样式
1 样式作用CSS(Cascading Style Sheets)层叠样式表,当标签没有颜色没有内容时,在浏览器中看不出效果。因此样式表是配合标签使用,主要作用如下:1)装饰对于元素(可视标签)进行装饰,如背景色,边框线,字体等等2)排版布局对元素的排版控制,如元素的宽高,元素之间的距离,位置,元素横排显示等等2 样式书写样式写在style标签中,页面变好看的地方。1)选择器(选...原创 2019-11-30 10:01:17 · 300 阅读 · 0 评论 -
HTML--HTML单双标签的分类
html按照结构功能来分,分为单标签和双标签。一、单标签1)<meta />元信息2)<img />图片标签3)<br />换行标签4)<hr />水平线5)<link />引入标签6)<base />base标签二、双标签1)<html>页面标签</html>2)<head...原创 2019-08-29 12:55:20 · 4726 阅读 · 2 评论 -
HTML--标签元素
1 标签的分类1.1根据标签功能分类标签唯一的是与浏览器进行沟通,从功能上说主要分为两大类:a.头部标签(head之内)告诉浏览器与当前文件的一些相关信息,比如网页的标题( title ),网页的描述等等,这些信息通常不能被用户直接看到。b.可视标签(body之内)告诉浏览器应该直接呈现的东西,比如文字,图片(img ),超链接(a)等等,这些标签是一个网页主要组成部分,用户通常能够直...原创 2019-11-30 09:41:17 · 290 阅读 · 0 评论 -
HTML结构--HTML基本概述
1 超文本标记语言超文本标记语言简称:HTML2 网页基本构成HTML如何构建一个网页?一个网页的基本构成,可以分为三个部分,结构(Tag),样式(CSS),行为(JavaScript)。如果把HTML构建一个网页比喻成,建一栋大楼:设计楼层布局,房间布局等,构建大楼的基本骨架结构贴瓷砖,抹白,过道,楼梯装修等,把基本骨架进行进一步的装饰安装电梯,路灯等功能性的设施HTML的优...原创 2019-11-30 09:12:23 · 195 阅读 · 0 评论