![](https://img-blog.csdnimg.cn/20200810165027781.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端学习
文章平均质量分 86
前端学习
贝勒里恩
用生命写代码,用灵魂做界面!
展开
-
HTML语法
标题语法<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>段落语法<p>段落标签</p>格式化标签语法<br />换行<i>斜体标签</i><em>斜体标签<原创 2020-08-10 16:53:17 · 136 阅读 · 0 评论 -
CSS基础选择器
1、通配符选择器语法:* { color: #ff0000;}作用:匹配文档中的所有标签2、标签选择器语法:a { text-decoration: none}<a href="#"></a>作用:匹配文档中的指定标签3、类选择器语法:.red { color: #ff0000;}<div class="red"></div><h1 class="red"></h1>作用:匹配文档中的指原创 2020-08-10 22:23:33 · 101 阅读 · 0 评论 -
css-字体属性
1、font-family语法:h1 { font-family: "Microsoft Yahei","微软雅黑";}作用:设置文本的字体系列,依次匹配2、font-size语法:h1 { font-size: 16px;}作用:设置文本的字体大小3、font-weight语法:h1 { font-weight: 400;}作用:设置文本的字体粗细,400为正常(normal),700为粗体(bold)4、font-style语法:h1 { font-sty原创 2020-08-10 22:32:35 · 103 阅读 · 0 评论 -
css-文本属性
1、color语法:h1 { color: red; color: #ff0000; color: rgb(255,0,0);}作用:前景色,设置文本的颜色2、text-align语法:h1 { text-align: left/right/center;}作用:设置文本的对齐方式,左对齐/右对齐/居中对齐3、text-decoration语法:h1 { text-decoration: none/underline/line-through/aboveline}原创 2020-08-10 23:25:25 · 176 阅读 · 0 评论 -
引入CSS的三种方式
1、内部样式表<head> <style> p { color: #ff0000; } </style></head>内部样式表是写到html页面内部的,将所有的CSS代码抽取出来,单独放到一个2、内联样式表(行内样式表)<div style="color: red; font-size: 12px">编程使我快乐</div>行内样式表是在元素标签内部的style属性中设定CSS样式,适用于修改简单样式原创 2020-08-12 21:02:40 · 292 阅读 · 0 评论 -
emmet语法使用
1、快速生成HTML结构语法生成标签:直接输入标签名按tab键即可,比如div 然后tab键,就可以生成如果想要生成多个相同标签,加上*就可以,比如div*3 然后tab键就可以生成3个div如果有父子级关系的标签,用>就可以了,比如ul > li 然后tab键如果有兄弟关系的标签,用+就可以了,比如div+p 然后tab键如果生成带有类名或者id名字的,直接写p.demo或者ul>li#two tab键就可以了如果生成的div类名是有顺序的,可以用自增符号,比如‘.demo原创 2020-08-12 22:09:38 · 345 阅读 · 0 评论 -
CSS复合选择器
1、后代选择器后代选择器又称为包含选择器,可以选择父元素里面的子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就称为了外层标签的后代语法:元素1 `空格` 元素2 {样式声明}特点:只要是后代都可以选择,例如:元素1 元素2 元素3 {样式声明}元素可以是任意的基础选择器,例如: .father .son {样式声明}空格分隔,最终作用于元素2代码示例如下:<head> <style> ol li原创 2020-08-12 23:16:43 · 155 阅读 · 0 评论 -
CSS的元素显示模式
1、什么是元素的显示模式元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个,HTML元素一般分为块元素和行元素两种类型。2、块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ol>、<li>等,其中<div>标签时最典型的块元素。块元素特点:块元素比较霸道,独占一行;高度、宽度、外边距以及内边距都可以控制;宽度默认是容器(父级宽度)的100%;是一个容器及盒子,原创 2020-08-13 21:56:31 · 331 阅读 · 0 评论 -
CSS背景
通过CSS背景属性,可以给页面元素添加背景样式1、背景颜色background-color属性定义了元素的背景颜色background-color: 颜色值;一般情况下元素背景默认是transparent(透明),也可以手动指定背景颜色为透明色。2、背景图片background-image属性描述了元素的背景图像,实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)background-image: none | url(url)原创 2020-08-15 10:12:26 · 203 阅读 · 0 评论 -
CSS三大特性
1、层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。层叠性原则:样式冲突:遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突:不会层叠2、继承性CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号,简单的理解就是,子承父业恰当的使用继承可以简化代码,降低CSS样式的复杂性子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)2.1、行高的继承(特原创 2020-08-15 11:29:40 · 209 阅读 · 0 评论 -
盒子模型
1、盒子模型的组成组成元素说明margin外边距border边框padding内边距content实际内容2、边框(border)border可以设置元素的边框,边框有三部分组成:边框宽度(粗细)、边框样式、边框颜色border: border-width | border-style | border-color属性作用border-width定义边框粗细,单位是pxborder-style边框的样式bor原创 2020-08-16 17:41:10 · 170 阅读 · 0 评论 -
CSS3 - 圆角边框、盒子阴影
圆角边框在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius属性设置元素的外边框圆角border-radius: length;参数值可以为数值或百分比的形式如果是正方形,想要设置一个圆,把数值修改为高度或者宽大的一半即可,或者直接写为50%如果是矩形,设置为高度的一半就可以做侧边半圆弧矩形该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角参数值个数意思border-radius: 10px原创 2020-08-17 10:22:12 · 423 阅读 · 0 评论 -
CSS浮动
浮动(float)网页布局的本质–用CSS来拜放盒子,把盒子拜放到相应位置CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位1、标准流(普通流/文档流)所谓的标准流,就是标签按照规定好的默认方式排列块计元素会独占一行行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行2、浮动2.1、为什么需要浮动总结:有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。浮动最典型的应原创 2020-08-17 16:24:52 · 356 阅读 · 0 评论 -
网页项目开发注意事项
1、CSS属性书写顺序建议遵循以下顺序:布局定位属性:display / position / float / clear / visibility / overflow(建议display第一个写,毕竟关系到模式)自身属性:width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align / white-space / b原创 2020-08-18 14:58:05 · 216 阅读 · 0 评论 -
CSS--定位
1、为什么需要定位?浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子;定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置,并且压住其他盒子。2、定位介绍2.1、定位组成定位:将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子。定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式;边偏移则决定了该元素的最终位置;定位模式:定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:值语原创 2020-08-27 22:54:21 · 275 阅读 · 0 评论 -
元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!本质:让一个元素在页面中隐藏或显示出来1、display 显示隐藏display: none; 隐藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置2、 visibility 显示隐藏visibility属性用于指定一个元素应可见还是隐藏visibility: visible; 元素可见visibility: hidden;原创 2020-08-30 10:40:19 · 139 阅读 · 0 评论 -
CSS-- 精灵图和字体图标
1、为什么要使用精灵图?2、 精灵图使用的核心精灵技术主要针对于背景图片使用,就是把多个小背景整合到一张图片中;原创 2020-08-31 08:00:06 · 376 阅读 · 0 评论 -
CSS--三角的做法
原理:一个没有宽度和高度的盒子,只设置四个边框,它则由四个三角形组成代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2020-08-31 22:09:10 · 172 阅读 · 0 评论 -
CSS--用户界面样式
一、鼠标样式(cursor)语法:li { cursor: pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白箭头 默认pointer小手move移动text文本not-allowed禁止例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-08-31 23:30:46 · 237 阅读 · 0 评论 -
CSS--布局技巧
一、margin负值的巧妙运用带边框且浮动的元素,因为浮动的元素之间没有空隙,所以就会紧贴着在一起,就会出现接壤处border 1+1=2的情况,具体如下:代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-09-01 21:20:13 · 228 阅读 · 0 评论 -
CSS--初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化。简单理解:CSS初始化是指重设浏览器的样式(也称为CSS reset)每个网页都必须首先进行CSS初始化以京东网页为例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="原创 2020-09-01 21:38:19 · 319 阅读 · 0 评论 -
HTML5的新特性
一、HTML5新增的语义化标签以前布局,我们基本用div来做,div对于搜索引擎来说,是没有语义的。<div class="header"></div><div class="nav"></div><div class="content"></div><div class="footer"></div>所以HTML5新增了一些语义化标签:<header>:头部标签<nav&g原创 2020-09-05 10:30:50 · 155 阅读 · 0 评论 -
CSS3新特性
一、属性选择器属性选择器可以根据元素特定属性来选择元素,这样就可以不用借助于类或者ID选择器了。选择符简介E[att]选择具有att属性的E元素E[att=“val”]选择具有att属性且属性值等于val的E元素E[att^=“val”]选择具有att属性且值以val开头的E元素E[att$=“val”]选择具有att属性且值以val结尾的E元素E[att*=“val”]匹配具有att属性且值中含有val的E元素注意:类选择器、属性选择器、伪类原创 2020-09-05 23:06:03 · 605 阅读 · 0 评论 -
网站favicon图标
favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上,目前主要的浏览器都支持favicon.ico图标一、制作favicon图标把图片切成png图片;把png图片转换为ico图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/二、favicon图标放到网站根目录下三、HTML页面引入favicon图标<head> <link rel="shortcut icon" href="/favicon.ico"原创 2020-09-06 09:46:20 · 193 阅读 · 0 评论 -
网站TDK三大标签SEO优化
SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度。TDK:title、description、keyword1、title 网站标题title具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。建议:网站名(产品名) - 网站的介绍(尽量不要超过原创 2020-09-06 10:06:48 · 269 阅读 · 0 评论 -
LOGO SEO 优化
1、logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要;2、h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可;3、为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来;方法1:text-indent移到盒子外面(text-indent: -9999px),然后overflow: hidden,淘宝的做法;方法2:直接给font-size: 0; 就看不到文字了,京东的做法;4、最后给链接一个title属性,这样 鼠标放到lo原创 2020-09-06 17:42:05 · 546 阅读 · 1 评论 -
搭建自己的网站
搭建个人网站,需要准备以下几样东西:服务器、域名、前端源码接下来,我们分别来看一下它们有什么用吧!一、服务器1、什么是服务器?服务器其实就是一台电脑,我们在自己本地电脑打开一个html文件,浏览器就会把这个网页解析出来,此时本地电脑就是一个本地服务器,但是,这样网页是只有你自己一个人能看到(学习技术不为了装逼将毫无意义)。那怎样才能让小伙伴也能看到我的网站呢?方法1:将我的源码给他,让他在他的电脑上打开,这样虽然确实可以实现我们的目的,但是这样太麻烦了;方法2:我们可以将网站挂到云服务器上,云服原创 2020-09-06 23:22:18 · 669 阅读 · 0 评论