html-css教程
关注
分享
扫一扫
前端最基本的教程，小白学习前端必学课程
幸福清风
专注python语言
展开
-
七夕小案例：用代码给心爱的她画一个爱心
代码】七夕小案例：用代码给心爱的她画一个爱心。原创 2022-08-04 09:49:48 · 2294 阅读 · 0 评论 -
前端DEMO：网络上流行的抖音罗盘
一、效果：二、关于代码：CSS/demo.css代码：* { margin: 0; padding: 0;}html,body { width: 100%; height: 100%; background-color: black; overflow: hidden;}#clock { position: relative; width: 100%; height: 100%; background: black;}.label原创 2021-04-21 17:08:47 · 627 阅读 · 0 评论 -
前端demo：实现背景半透明，div与文本正常显示
一、需求：背景实现透明度0.3，其他组件正常显示二、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></he原创 2020-06-10 09:46:00 · 543 阅读 · 0 评论 -
前端：实现手机左右滑动效果
需求：手机可以左右滑动，显示商品或者div信息原理：建立两个盒子，一个是可以看到的手机屏幕盒子，一个是自己设定好的盒子，左右滑动，只显示与手机屏幕盒子交集的部分代码：<div id="good-style"> <div id="close-icon" @click="show = false">X</div> <div id="good-li"> <div id="good-img"><原创 2020-06-09 11:19:17 · 2526 阅读 · 1 评论 -
前端：实现div等块元素添加X轴滚动显示（Y轴不滚动）
一、建立外盒子与内盒子原生态代码：<div class="tol_dev"> <div class="dev_li"></div> <div class="dev_li"></div> <div class="dev_li"></div> <div c...原创 2020-04-16 17:07:44 · 4743 阅读 · 0 评论 -
原生态HTML文件上传与下载
文件下载传统的文件下载有两种方法：使用<a/>标签，href属性直接连接到服务器的文件路径 window.location.href="url"这两种方法效果一样。但有个很大的问题，如果下载出现异常（连接路径失效、文件不存在、网络问题等），会导致原本的页面被覆盖掉，显示404等错误信息。大致的优化思路如下：使用<a/>标签HTML5新的属性downloa...原创 2020-03-30 16:02:10 · 1662 阅读 · 0 评论 -
Html(快捷键!+Tab)
HMTL(HyperText Mark-up Language)即超文本*标记*语言或超文本标签语言超文本可以实现页面内可以包含图片,链接,甚至音乐,程序等.网页文件扩展名:.html或者 .htm超文本标记语言包括"头"部分(英文:head),和"主体"部分(英文:body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容.注释快捷键contr原创 2017-08-26 22:34:22 · 13273 阅读 · 0 评论 -
表现形式CSS
CSS（Cascading StyleSheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表Cascading StyleSheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁用来给HTML网页来设置外观或者样式：HTML网页中的文字原创 2017-08-26 22:37:39 · 617 阅读 · 0 评论 -
CSS_属性入门
width设置元素(标签)的宽度，如：width:100px;height设置元素(标签)的高度，如：height:200px;background设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色画图演示 边框内边距,外边距border设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色原创 2017-08-26 22:39:39 · 323 阅读 · 0 评论 -
CSS—常用选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式1.标签选择器写法:标签名{属性:值;属性:值}标签选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。举例：div{color:red}......这是第一个div<!--对应以上样式 -->这是第二个div<!--对应以上样式 -->原创 2017-08-26 22:41:04 · 548 阅读 · 0 评论 -
CSS属性提升
CSS样式 属性提高text-align设置文字水平对齐方式，如text-align:center 设置文字水平居中text-indent设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24pxfont-style设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜font同时设置原创 2017-08-27 22:48:59 · 365 阅读 · 0 评论 -
列表与表单
有序标签orderlist-基本用法- - -列表内容 -列表内容 -..... - -快速构建表格的快捷键ol>(li>a)*4无序标签 unorderlist -->经常使用- -列表内容 -列表内容 - 系统自带的左边的小图原创 2017-08-27 22:52:08 · 589 阅读 · 0 评论 -
盒子的真实宽高
盒子的宽==两边border+两边padding盒子的高度 ==上下border+上下padding原创 2017-08-27 22:54:24 · 690 阅读 · 0 评论 -
margin相关技巧
1.设置元素水平居中; margin:0 auto;margin负值让元素位移及合并边框外边距合并外边距合并指的是:当两个垂直外边距相遇时,他们将行程一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者:一个格子距下30px,下面的格子距上100px,边距合并之后取100px解决方法1.使用这种特性系统自带2.设置一边的外边距,一般设置mar原创 2017-08-27 22:55:25 · 876 阅读 · 0 评论 -
元素（块、行内、行内块
块元素的特点1.支持所有样式 2.块级元素独占一行 3.块级元素默认宽度和父元素一样常用块元素块级元素 一般div p ol ul h1-h6 li dl dt dd 等都是初始化(样式重置)1.实际开发中，我们会把这些默认的样式在样式定义开头清除掉，清除掉这些默认样式，方便我们写自己的定义的样式，这种做法叫样式重置。body,p,h1,h2,h3,h4原创 2017-08-29 23:24:12 · 1005 阅读 · 0 评论 -
浮动
浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行，超出父级宽度就换行（不占位置4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的原创 2017-08-29 23:25:16 · 466 阅读 · 0 评论 -
定位position（前面布局无法实现
文档流文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。定位：1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解原创 2017-08-29 23:26:59 · 891 阅读 · 0 评论 -
tabel表格制作及操作
表格的基本用法l table表示表格开始表格结束l tr表示表格中的行标签一个表格中有多少行就应该书写多少对tr标签l td表示表格中的单元格标签一行中有多少个单元格就应该书写多少对td标签l表格中所有的内容都必须在放置在td标签里面 也就是说只有td标签才能存放内容l th表示标题单元格这个单元格里面的文本会加粗显示并且会居中表格常用属性ta原创 2017-08-30 22:33:06 · 1588 阅读 · 0 评论 -
前端：background背景图
background背景图属性解释background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：background-color 设置背景颜色background-image 设置背景图片地址background-repeat 设置背景图片如何重复原创 2017-08-30 22:35:04 · 985 阅读 · 0 评论 -
css权重值
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重!important，加在样式属性值后，权重值为 10000内联样式，如：style=””，权重值为 1000ID选择器，如：#content，权重值为 100类，伪类原创 2017-08-30 22:36:10 · 689 阅读 · 0 评论 -
transition动画与transform变换（了解
1、transition-property 设置过渡的属性，比如：width height background-color 2、transition-duration 设置过渡的时间，比如：1s 500ms 3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)4、transition-delay 设置原创 2017-09-01 22:40:15 · 1945 阅读 · 0 评论 -
html-css练习题（系统提示）
代码赏析：DOCTYPE html> lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge">Document原创 2017-09-02 00:47:24 · 5438 阅读 · 5 评论 -
html-css练习题 (注册表单)
代码赏析： lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" conten原创 2017-09-02 22:51:03 · 2922 阅读 · 0 评论 -
html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接
素材地址：链接: https://pan.baidu.com/s/17aHx1VQpI5yjc67TFoq1yQ 提取码: bk1s先来看一下效果图：主要要求：注：最下面有素材链接地址可以自己练习使用/* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 *//* 1.1login内容部分设置 高20 宽1200 居中*...原创 2017-09-03 15:02:14 · 53196 阅读 · 35 评论 -
HTML+CSS+JS面试题（附带答案）
一、单项选择(165题)1.HTML是什么意思？A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起到了什么作用？A)浏览器用于创建HTML文档B)浏览器用于查看HTML文档C)浏览器用于修改HTML文档D)浏览器用于删除HTML文档3.默认情况下，使用P标记会形成转载 2017-09-09 15:10:38 · 7584 阅读 · 0 评论 -
HTML试题及答案（总结）
HTML练习题1（选择题） 一、选择1.在一个框架的属性面板中，不能设置下面哪一项。（ ）A．源文件 ; B．边框颜色 ; C．边框宽度 D．滚动条 2. 下列哪一项表示的不是按钮。（ ）A．type="submit" B．type="reset" C．type="image" D．type="b转载 2017-09-09 15:25:31 · 26538 阅读 · 6 评论