前端自学日记

day5

内容总结：学习了代码快速编写方法和一些小工具，CSS复合选择器，CSS元素显示模式，CSS背景。

1.学习进度更新

2.具体内容

2.1 Emmet简介

作用：使用缩写tab输入代码，快速高效的编写html/css代码。

2.1.1快速生成html结构语法

生成标签，标签名+tab
生成n个相同标签，标签名*n+tab
生成父子级关系标签，父级>子集 +tab
生成兄弟关系标签，兄弟1+兄弟2+tab
生成带有类名或id名，.class/#id +tab默认生成 < d i v c l a s s = " c l a s s " > < / d i v > <div class="class"></div> <divclass="class"></div>需要指定标签标签 .class/#id +tab
生成有顺序的class .class$*n $是自增符号

2.1.2快速生成css结构语法

简写属性首字母+tab
快速格式化代码 shift+alt+f；或者直接设置成保存页面自动格式化。

2.2 CSS的复合选择器

是对基础选择器的组合，对标签选择更便捷，样式改变更多元化。
下面所说的元素可以是任意基础选择器！！！！！！！！

2.2.1 后代选择器

作用：又叫包含选择器，可以选择父元素里的子元素

2.2.2 子选择器

作用：只能选择某元素里的最近一级子元素

2.2.3 并集选择器

作用：可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

约定并集元素竖着写

2.2.4 伪类选择器

作用：用于向某些选择器添加特殊效果，比如用于链接等，这里介绍伪类链接选择器和:focus选择器。

伪类链接选择器的样式声明顺序必须为LVHA（love heat/LV hao）
a在不同浏览器中具有不同的默认样式，所以开发工作中都需单独指定样式。
开发中常用link和hover搭配

2.3 CSS的元素显示模式

对标签分类，了解不同元素的性质，可以更好的布局页面。

2.3.1 块级元素

<h1>~<h6>,<p>,<div>,<ul>,<li>,<ol>,等

很霸道，自己独占一行
文字类元素内不能放块元素
作为一个容器里面可以放行内元素和块元素

2.3.2 行内元素

<span>,<a>,<strong>,<em>等

相邻元素在一行上，一行可以显示多个
行内元素只能容纳文本或其他行内元素
行内元素可以通过元素显示模式转换后，放入块级元素。

2.3.3 行内块元素

<img /><input /><td>等

同时具有行内元素和块元素特点
一行可以显示多个
默认宽度为本身宽度
可以设置h，w，外边距和内边距

2.3.4 元素模式转换

行内–>块级 display：block;
块级–>行内 display：inline;
其他–>行内块 display：inline-block；

**注：**如何让单行文字在块元素中垂直居中，文字行高line-heigh=weight盒子高度

2.4 CSS的背景

设置页面大背景更好看，小标识用背景设置更容易控制位置。

3.作业

3.1 综合案例1

使用外部样式表引入CSS样式，联系CSS字体，文本属性，和使用基础选择器设置文本。

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例</title><link rel="stylesheet" href="05.案例CSS.css" >
</head>
<body><h1 class="Big—title">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1><div class="sub-title">2019-07-03 16:31:47 来源：<a href="#">中国天气网</a> <input type="text" value="请输入查询条件"/><input type="submit" value="提交"/></div><hr><p>中国天气网 今天（3日），华北，黄淮多地出现高温天气，截止下午2点，北京、天津、郑州等地气温突破35℃，预报显示，今后三天（3-5日），这一带的祷文天气将继续发酵，啊公文范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的醉倒气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p><h3>气温41.4℃！地温66.5℃！北京强势迎七月首个高温日</h3><p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西南部、河北北部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃，大城市中，北京、天津、郑州均迎来高温日。</p><br><div align="center"><img src="气温图.png" width="500" /></div><p>在阳光暴晒下，地表温度逐渐走高。今天下午2点，华北、黄淮大部分地区地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h3>明日热度再升级！京津冀携手冲击38℃+</h3><p>中国天气网气象分析师王炜越介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部，河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北气温将达到35℃</p><p>不过，打到这里，逐渐暴躁，不想写了，啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊（文/张慧 数据支持/王炜越 虎啸 审核/刘文静 帐房利）</p><div class="till">文本来源：中国天气网 责任编辑：刘晶_NO5631</div>
</body>


.Big—title {text-align: center;font-weight: normal;}
.sub-title {font-size: 10px;color: darkgrey;text-align: center;
}
p {text-indent: 2em;font-size: 16px;font-family:'Microsoft YaHei';line-height: 24px;
}
.till {text-align: left;color: darkgrey;font-size: 10px;
}

3.2 综合案例2

设置鼠标经过可变链接

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景案例-成长守护平台</title><style>h3 {width: 118px;height: 40px;/* background-color: pink; */font-weight: 400;font-size: 14px;line-height: 40px;text-indent: 1.5em;background-image: url(https://game.gtimg.cn/images/js/title/title_sprite.png);background-position: left center;}h3 a:link {color: black;text-decoration: none;}h3 a:hover {color: #FF5A11;}</style>
</head><body><h3><a href="#">成长守护平台</a></h3>
</body>

超大背景居中显示

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景案例2-超大背景</title><style>body {background-image: url(王者荣耀背景.jpg);background-position: center top;background-repeat: no-repeat;}</style>
</head><body>
</body>

——landing