前端杂文
好吃的都给你呀
这个作者很懒,什么都没留下…
展开
-
商城首页HTML
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>购物商城</title> </head> <body> <table width="80%" align="center"> <!--lo...原创 2019-11-29 16:51:19 · 703 阅读 · 0 评论 -
HTML入门(第三方动画库)————DAY7
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-28 20:10:38 · 201 阅读 · 0 评论 -
HTML入门(CSS关键帧动画)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-17 21:22:12 · 1279 阅读 · 0 评论 -
HTML入门(CSS过渡)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-17 20:45:59 · 89 阅读 · 0 评论 -
HTML入门(3D变形)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-17 19:58:43 · 160 阅读 · 0 评论 -
HTML入门(2D变形与完全居中)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-17 19:38:44 · 171 阅读 · 0 评论 -
HTML入门(flex拆行)————DAY6
flex元素是一种类似于float让div元素在所属框内更好的找到自己应该在的位置。但是flex默认的里面的盒元素是不会自己进行折行的,所以需要进行一些设置,来得到更好的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n...原创 2019-10-17 17:03:30 · 1042 阅读 · 0 评论 -
HTML练习(BMI计算)————DAY6
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2019-10-17 15:33:45 · 2475 阅读 · 0 评论 -
BMI计算
HTML练习(BMI计算网页制作)————DAY6网页效果如下:具体功能演示:①计算BMI的值②清除文本框里的值因为清除后和原来一样,所以不再截图。③根据结果在相应表格内变红关键代码如下:①在js中提取html中文本框的值。// 这里的input1是文本框的id var gao =document.getElementById("i...原创 2019-10-17 15:16:32 · 2916 阅读 · 0 评论 -
HTML入门(flex布局实现定宽居中)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-10-17 11:13:09 · 169 阅读 · 0 评论 -
HTML入门(表格标签)————DAY4
效果如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-10-15 17:34:45 · 94 阅读 · 0 评论 -
HTML入门(flex布局)————DAY6
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-10-17 10:40:07 · 117 阅读 · 0 评论 -
HTML入门(emmet输入法)————DAY6
目前是在使用Visual Studio Code, 可以使用这些快捷输入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-10-17 09:56:14 · 143 阅读 · 0 评论 -
HTML入门(CSS选择器优先级)——————DAY5
<html> <head> <meta charset="utf-8"> <title>css选择器优先级</title> <style> p{ color: purple !important; ...原创 2019-10-16 21:20:05 · 123 阅读 · 0 评论 -
HTML入门(选择器大全)————DAY5
<html> <head> <meta charset="utf-8"> <title>css选择器大全</title> <style> /* 标签名选择器,选择页面中所有的p标签 */ p{ ...原创 2019-10-16 21:02:39 · 178 阅读 · 0 评论 -
HTML入门(常用单位)————DAY5
<html> <head> <meta charset="utf-8"> <title>常用长度单位</title> <style> #px{ font-size: 10px; } ...原创 2019-10-16 20:48:59 · 118 阅读 · 0 评论 -
HTML入门(浮动布局、待选中光标样式)————DAY5
截图无法选中鼠标样式主要是浮动的设置和清理浮动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2019-10-16 20:34:14 · 145 阅读 · 0 评论 -
HTML入门(行元素或行内块元素的间距问题)————DAY5
<html> <head> <meta charset="utf-8"> <title>行元素或行内块的间距问题</title> <style> .txt{ background-color: lightblue;...原创 2019-10-16 15:05:11 · 1607 阅读 · 0 评论 -
HTML入门(块元素外间距重叠)————DAY5
当元素共同都有外边距时,会以稍微大的外边距作为共同的外边距行内元素也会有外边距重叠<html> <head> <meta charset="utf-8"> <title>块元素外间距重叠</title> <style> bo...原创 2019-10-16 14:44:29 · 428 阅读 · 0 评论 -
HTML入门(display、外边距、内边距)————DAY5
设置了第一个外边距 。可对比下面代码中CSS .a1的样式 相对照其他也可类似用控制器来查看边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-10-16 14:31:38 · 253 阅读 · 0 评论 -
HTML入门(元素内容溢出)————DAY5
当元素中内容溢出时的相关操作:①处理溢出元素显示效果 (划框)②处理溢出的元素用什么方式表示 (省略号 规定文本)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2019-10-16 13:23:06 · 297 阅读 · 0 评论 -
HTML入门(精灵图)————DAY5
精灵图就是把一个图标或者小图画做到一张图里,方便调用。效果图如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-10-16 11:50:09 · 358 阅读 · 0 评论 -
HTML入门(CSS伪类)————DAY4
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-10-16 09:01:08 · 119 阅读 · 0 评论 -
HTML入门(定位方式)————DAY4
<html> <head> <meta charset="utf-8"> <title>定位方式</title> <style> /* body{ position: relative; }...原创 2019-10-15 15:36:57 · 120 阅读 · 0 评论 -
HTML入门(行元素、块元素)————DAY4
<html> <head> <meta charset="utf-8"> <title>行元素,块元素,行内块</title> <style> body{ text-align: center; ...原创 2019-10-15 15:26:09 · 152 阅读 · 0 评论 -
HTML入门(加粗与删除线)————DAY4
<html> <head> <meta charset="utf-8"> <title>常用文本标签和html语义</title> <style lang=""> #s1{ font-weight: 700; ...原创 2019-10-15 15:14:22 · 903 阅读 · 0 评论 -
HTML练习——————DAY3
本次练习设置了动画效果,将文字设置为炫彩、图片设置为旋转的动画。动画设置方式:/* 第一种,开始动作和结束动作 */@keyframes donghua{ from{ }to{ }}/* 分段执行 */@keyframes donghua2{ 0%{ }20%{ }40%{ }80%{ }100%{ ...原创 2019-10-15 09:10:27 · 115 阅读 · 0 评论 -
HTML练习————DAY3
转动风车(效果为风车的风页会一直保持转动,下面效果为jpg非gif)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2019-10-14 17:57:28 · 90 阅读 · 0 评论 -
HTML练习————DAY3
网页效果为:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-10-14 17:43:20 · 135 阅读 · 0 评论 -
HTML练习————————DAY2
自己用海贼王漫画人物写了一个小网页(侵权请联系删除)样例图如下(图片请自行下载):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...原创 2019-10-14 14:44:38 · 130 阅读 · 0 评论 -
HTML入门———————DAY2
关于网页排版相关的知识。一个网页body内可分为<nav> 导航模块</nav><header> 页眉模块</header><main> 正文模块</main>还可在结束的时候加上页脚模块。还有关于外边距和内边...原创 2019-10-14 14:41:09 · 100 阅读 · 0 评论 -
已经知道的HTML标签(持续更新中。。。)
HTML标签:<html></html>网页基础标签,所有内容在此之内 , 表示了网页的主体 <head></head>头部标签,在里面设置整个网页的属性和样式 <body></body>身体标签,在里面进行编写网页的所有内容 <meta>设置整个网页的编码格式,常用就是:<meta charset...原创 2019-10-11 21:01:46 · 191 阅读 · 0 评论 -
HTML练习一(网页上图片进行角度转换和放缩)--------------DAY1
<html> <head> <meta charset="utf-8"> <title>又一个相册</title> <style> div{ width: 200px; height...原创 2019-10-11 20:35:50 · 273 阅读 · 0 评论 -
HTML入门 --------DAY1
这下面的内容是HTML最初级的结构介绍,还有一些最基本的简单语句。<!-- ctrl+? 打出标签中的注释符号,起到解释说明的作用,浏览器不解析此处语句 新建文件:1.ctrl+n 2.右下角选择语言模式 html 3.ctrl+s 命令 并保存路径 每一个网页都有基本结构 <开始标签>显示内容</结束标签>html 超文本标记语言 由标签对构成,...原创 2019-10-11 16:00:21 · 207 阅读 · 0 评论