HTML和CSS部分
一匹脱缰的野马
一匹脱缰的野马
展开
-
HTML的使用方法1/前端
Typora软件的及格快捷键:加入图片:ctrl+shift+i 调整文字大小:ctrl+1 ctrl+2 ctrl+3 字体大小逐渐减小字体加粗:ctrl+b插入代码段:ctrl+shift+k编程语言都有自己的语法结构,HTML不是编程语言,而是标记语言。一组标签-->特定功能-->浏览器里的渲染引擎html h...原创 2019-03-18 19:37:33 · 339 阅读 · 0 评论 -
导航条改进/前端三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 1000px; ...原创 2019-03-20 16:52:09 · 244 阅读 · 0 评论 -
C3盒模型以及他出现的必要性和圆角边框/前端三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--css3盒模型 旧盒模型 盒子宽度=width+padding*2+border*2 css3新盒...原创 2019-03-20 17:31:13 · 1014 阅读 · 0 评论 -
图片和文字对齐以及图片下间隙/前端四
<style> img{ width: 40px; height: 40px; vertical-align: middle;/*调整图片和文字中线对齐*/ } </style></head><body><!--图片对齐和...原创 2019-03-21 12:22:29 · 937 阅读 · 0 评论 -
第二大核心-浮动/前端四
标准流<head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-...原创 2019-03-21 12:26:17 · 269 阅读 · 0 评论 -
溢出的隐藏与伪元素/前端四
溢出的隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--CSS伪元素法--> <style> .box{ ...原创 2019-03-21 12:28:36 · 883 阅读 · 0 评论 -
浮动导致元素显示模式变化与行内块属性/前端四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ background-color: pink; ...原创 2019-03-21 17:23:45 · 659 阅读 · 0 评论 -
背景属性与背景图/前端四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 600px; ...原创 2019-03-21 17:27:37 · 326 阅读 · 0 评论 -
四大定位/前端四
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*脱标:绝对定位和固定定位(body)脱标 用的就是他们两个,其他两...原创 2019-03-21 17:29:17 · 420 阅读 · 0 评论 -
视频和音频,颜色标签,元素消失以及隐藏/前端五
视频和音频<!--音频--><audio controls="controls"> <!--controls="controls"添加控件--> <source src="a.ogg" type="audio/ogg"> <source src="a.mp3" type="audio/mpeg"><!--浏...原创 2019-03-23 10:23:46 · 369 阅读 · 0 评论 -
盒子局中/前端三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div:first-of-type{ width: 200px;...原创 2019-03-20 16:51:09 · 216 阅读 · 0 评论 -
外边距问题/前端三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; ...原创 2019-03-20 16:50:04 · 371 阅读 · 0 评论 -
HTML的使用方法2/前端二
无序列表和有序列表<!--无序列表--><ul style="list-style: none"> <!--unorder line 去掉小圆点style="list-style: none(squre为正方形)"--> <li>李白</li> <li>杜甫</li> ...原创 2019-03-19 14:06:53 · 955 阅读 · 1 评论 -
表单,表单属性,标签分类,导航条/前端二
表单:<body><!--form表单 主要用来收集用户信息 表单中的每一个元素叫控件 --><form action="www.baidu.com" method="post"> <!--表单控件 类型 h4 h5 类型+属性--> 姓名:<input type="text" name="usernam...原创 2019-03-19 19:00:34 · 537 阅读 · 0 评论 -
模仿相亲网登录与注册/前端二
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> sub{ color: red; } ...原创 2019-03-19 21:49:24 · 530 阅读 · 0 评论 -
CSS选择器/前端三
<head> <meta charset="UTF-8"> <title>Title</title> <!--样式表--> <style> /*通配 全选 body> * 优先级最低 0 */ *{ ...原创 2019-03-20 13:43:52 · 350 阅读 · 0 评论 -
Google图标/前端三
如下图<head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; font-size: 50px; } ...原创 2019-03-20 13:46:02 · 357 阅读 · 0 评论 -
选择器进阶/前端三
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*子代选择器 --->儿子(直接子代,不能直接选孙子) 父元素> 子元素{ } .father>div{ ...原创 2019-03-20 13:47:54 · 323 阅读 · 0 评论 -
布局第一大块-盒模型/前端三
结果为(主要为通过设置border出现的效果):代码为:<head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100p...原创 2019-03-20 14:02:10 · 229 阅读 · 0 评论 -
盒子套图/前端三
图形如下:<head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 375px; /*设置间距的时候 width加上左右padding的值为真正...原创 2019-03-20 15:07:40 · 325 阅读 · 0 评论 -
外边距/前端三
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px;/*清除所有盒子外边距*/ ...原创 2019-03-20 16:30:19 · 405 阅读 · 0 评论 -
阴影,文字凹凸,动画,盒子的变形/前端五
盒子和文字阴影代码如下:<head> <meta charset="UTF-8"> <title>Title</title> <style> /* 盒子阴影:box-shadow 水平阴影的尺寸 h-shadow 垂直阴影的尺寸 v-...原创 2019-03-23 10:38:23 · 411 阅读 · 0 评论