CSS入门二、美化页面元素
零、文章目录
CSS入门二、美化页面元素
1、字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)
(1)字体系列font-family
font-family
属性定义文本的字体系列。各种字体之间必须使用
英文逗号隔开
,如果有空格隔开的多个单词组成的字体加引号
。常见取值:
- 具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
- 字体系列:sans-serif、serif、monospace等……
渲染规则:从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体,如果都不支持,此时会显示系统默认自带字体。
兼容性:
尽量使用系统默认自带字体
,保证在任何用户的浏览器中都能正确显示。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体系列</title><style>h2 {font-family: '微软雅黑';}p {/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */font-family: 'Times New Roman', Times, serif;}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p>拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
(2)字体大小font-size
font-size
属性定义字体大小。px(像素)
大小是我们网页的最常用的单位。- 谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致,我们
尽量给一个明确值
大小,不要默认大小。 - 可以给 body 指定整个页面文字的大小,
标题标签需要单独指定大小才会生效
。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体大小</title><style>body {font-size: 16px;}/* 标题标签比较特殊,需要单独指定文字大小 */h2 {font-size: 16px;}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p>拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
(3)字体粗细font-weight
font-weight
属性设置文本字体的粗细。实际开发时,我们更喜欢用数字表示粗细。
- 要让加粗标签(比如 h 和 strong 等) 不加粗,设置
font-weight:400
就可以。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS字体属性之字体大小</title><style>.bold {/* font-weight: bold; *//* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 *//* 实际开发中,我们提倡使用数字 表示加粗或者变细 */font-weight: 700; }h2 {font-weight: 400; /* font-weight: normal; */}</style>
</head>
<body><h2>pink的秘密</h2><p>那一抹众人中最漂亮的颜色,</p><p>优雅,淡然,又那么心中清澈.</p><p>前端总是伴随着困难和犯错,</p><p>静心,坦然,攻克一个又一个.</p><p class="bold">拼死也要克服它,</p><p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
</html>
(4)文字样式font-style
font-style
属性设置文本的风格。平时我们很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS字体属性之文字样式(风格)</title><style>p {font-style: italic;}em {/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */font-style: normal;}</style>
</head>
<body><p>同学,上课时候的你</p><em>下课时候的你</em>
</body>
</html>
(5)字体复合属性font
- 字体属性可以把以上文字样式综合来写,这样可以更节约代码。
- 记忆口诀:font : style weight size family; swsf (稍微舒服)
- 使用 font 属性时,必须按语法格式中的
顺序书写,不能更换顺序
,并且各个属性间以空格
隔开。 - 不需要设置的属性可以省略(取默认值),但
必须保留 font-size 和 font-family 属性
。
font: font-style font-weight font-size/line-height font-family;
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS字体属性之复合属性</title><style>/* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */div {/* font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft yahei'; *//* 复合属性: 简写的方式 节约代码 *//* font: font-style font-weight font-size/line-height font-family; *//* font: italic 700 16px 'Microsoft yahei'; */font: 20px '黑体';}</style>
</head>
<body><div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>
(6)字体属性总结
2、文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
(1)文本颜色color
color
属性用于定义文本的颜色,可以指定预定义颜色枚举,十六进制,或者RGB或者RGBA。- 开发中最常用的是
十六进制
,前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量。 - RGB可以指定三种颜色的值,或者RGBA,在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1。
color:#A983D8;
color:red;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS文本外观属性之颜色</title><style>div {/* color: deeppink; *//* color: #cc00ff; */color: rgb(255, 0, 255);}</style>
</head>
<body><div>听说喜欢pink色的男生,都喜欢男人</div>
</body>
</html>
(2)对齐文本text-align
text-align
属性用于设置元素内文本内容的水平对齐方式。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS文本外观之文字对齐</title><style>h1 {/* 本质是让h1盒子里面的文字水平居中对齐 */text-align: center;}</style>
</head>
<body><h1>居中对齐的标题</h1>
</body>
</html>
(3)装饰文本text-decoration
text-decoration
属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。- 重点记住如何添加下划线, 如何删除下划线 , 其余了解。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS文本外观之装饰文本</title><style>div {/* 下划线 *//* text-decoration: underline; *//* 删除线 *//* text-decoration: line-through; *//* 上划线 */text-decoration: overline;}a {/* 取消a默认的下划线 */text-decoration: none;color: #333;}</style>
</head>
<body><div>粉红色的回忆</div><a href="#">粉红色的回忆</a>
</body>
</html>
(4)文本缩进text-indent
text-indent
属性用来指定文本的第一行的缩进长度,通常是将段落的首行缩进
。甚至该长度可以是负值。em
是一个相对单位,就是当前元素(font-size)1 个文字的大小
, 如果当前元素没有设置大小,则会按照父元素的 1 个文字大小。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS文本外观之文本缩进</title><style>p {font-size: 24px;/* 文本的第一行首行缩进 多少距离 *//* text-indent: 20px; *//* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */text-indent: 2em; }</style>
</head>
<body><p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</p><p> 可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤——对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p><p> 那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
</html>
(5)行间距line-height
line-height
属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>CSS文本外观之行间距</title><style>div {line-height: 26px;}p {line-height: 25px;}</style>
</head>
<body><div>中国人</div><p>打开北京、上海与广州的地铁地图,你会看见三张纵横交错的线路网络,这代表了中国最成熟的三套城市轨道交通系统。</p><p> 可即使这样,在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤——对很多人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。</p><p> 那么,当越来越多的二线甚至三线城市迎接来了自己的地铁,中国哪里的地铁是最拥挤的呢?</p>
</body>
</html>
(6)文本属性总结
(7)综合案例–天气预报
<!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-UA-Compatible" content="ie=edge"><title>天气预报</title><style>body {font: 16px/28px 'Microsoft YaHei';}h1 {/* 文字不加粗 */font-weight: 400;/* 让h1里面的文字水平居中对齐 */text-align: center;}a {text-decoration: none;}.gray {color: #888888;font-size: 12px;text-align: center;}.search {color: #666;/* #666666 #666#ff00ff #f0f */width: 170px;}.btn {font-weight: 700;}p {/* 首行缩进2个字的距离 */text-indent: 2em;}.pic {/* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */text-align: center;}.footer {color: #888888;font-size: 12px;}</style>
</head><body><h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1><div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a><input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button></div><hr><p>中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</p><h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4><p class="pic"><img src="data:images/pic.jpeg" alt=""></p><p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</p><p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h4>明日热度再升级!京津冀携手冲击38℃+</h4><p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p><p> 不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p><p class="footer"> 本文来源:中国天气网 责任编辑:刘京_NO5631</p>
</body></html>
4、背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
(1)背景颜色background-color
background-color
属性定义了元素的背景颜色。- 一般情况下元素背景颜色默认值是
transparent(透明)
,我们也可以手动指定背景颜色为透明色。
background-color:颜色值;
background-color:transparent;
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>背景颜色</title><style>div {width: 200px;height: 200px;/* background-color: transparent; 透明的 清澈的 *//* background-color: red; */background-color: pink;}</style>
</head><body><div></div>
</body></html>
(2)背景图片background-image
background-image
属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片。- 优点:非常便于控制位置. (精灵图也是一种运用场景)。
注意:背景图片后面的地址,千万不要忘记加 URL, 同时里面的路径不要加引号。
- 页面元素可同时添加背景颜色和背景图片,背景图片会压住背景颜色。
background-image : none | url (url)
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>背景图片</title><style>div {width: 300px;height: 300px;/* 不要落下 url() */background-image: url(images/logo.png);}</style>
</head><body><div></div>
</body></html>
(3)背景平铺background-repeat
background-repeat
用来指定背景图像平铺。- 默认情况下是平铺的,不需要平铺需要指定
no-repeat
。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>背景图片平铺</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);/* 1.背景图片不平铺 *//* background-repeat: no-repeat; *//* 2.默认的情况下,背景图片是平铺的 *//* background-repeat: repeat; *//* 3. 沿着x轴平铺 *//* background-repeat: repeat-x; *//* 4. 沿着Y轴平铺 */background-repeat: repeat-y;/* 页面元素既可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色 */}</style>
</head><body><div></div>
</body></html>
(4)背景图片位置background-position
background-position
属性可以改变图片在背景中的位置。- 参数代表的意思是:x 坐标和 y 坐标。 可以使用
方位名词
或者精确单位
。
background-position: x y;
- 参数是方位名词
- 如果
指定两个方位名词
,则两个值前后顺序无关
,比如 left top 和 top left 效果一致。 - 如果
只指定了一个方位名词
,另一个值省略,则第二个值默认居中对齐
。
- 参数是精确单位
- 如果
指定两个数值
,第一个肯定是 x 坐标
,第二个一定是 y 坐标
- 如果
只指定一个数值
,那该数值一定是 x 坐标
,另一个默认垂直居中
- 参数是混合单位
- 如果
精确单位和方位名词混合使用
,则第一个值是 x 坐标
,第二个值是 y 坐标。
方位名词说明如下:
<!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-UA-Compatible" content="ie=edge"><title>背景位置-方位名词</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* background-position: 方位名词; *//* background-position: center top; *//* background-position: right center; *//* 如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系 *//* background-position: center right; *//* 此时 水平一定是靠右侧对齐 第二个参数省略 y 轴是 垂直居中显示的 *//* background-position: right; *//* 此时 第一个参数一定是 top y轴 顶部对齐 第二个参数省略x 轴是 水平居中显示的 */background-position: top;}</style>
</head><body><div></div>
</body></html>
方位名词案例1如下:
<!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-UA-Compatible" content="ie=edge"><title>背景位置方位名词应用一</title><style>h3 {width: 118px;height: 40px;background-color: pink;font-size: 14px;font-weight: 400;line-height: 40px;background-image: url(images/icon.png);background-repeat: no-repeat;background-position: left center;text-indent: 1.5em;}</style>
</head><body><h3>成长守护平台</h3>
</body></html>
方位名词案例2大图居中如下:
<!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-UA-Compatible" content="ie=edge"><title>超大背景图片</title><style>body {background-image: url(images/bg.jpg);background-repeat: no-repeat;/* background-position: center top; */background-position: center 40px;}</style>
</head><body></body></html>
精确单位说明如下:
<!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-UA-Compatible" content="ie=edge"><title>背景位置-精确单位</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* 20px 50px; x轴一定是 20 y轴一定是 50 *//* background-position: 20px 50px; *//* background-position: 50px 20px; */background-position: 20px;}</style>
</head><body><div></div>
</body></html>
混合单位说明如下:
<!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-UA-Compatible" content="ie=edge"><title>背景位置-混合单位</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(images/logo.png);background-repeat: no-repeat;/* 20px center 一定是x 为 20 y 是 center 等价于 background-position: 20px *//* background-position: 20px center; *//* 水平是居中对齐 垂直是 20 */background-position: center 20px;}</style>
</head><body><div></div>
</body></html>
(5)背景图像固定background-attachment
background-attachment
属性设置背景图像是否固定或者随着页面的其余部分滚动。background-attachment
默认值是滚动scroll
的,要设置固定需要指定fixed
。
background-attachment : scroll | fixed
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>背景固定</title><style>body {background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top;/* 把背景图片固定住 */background-attachment: fixed;color: #fff;font-size: 200px;}</style>
</head><body><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
</body></html>
页面滚动背景不动
(6)背景复合写法background
- 为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性
background
中。 - 简写时,没有书写顺序要求,一般约定顺序:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
。 - 这是实际开发中,我们更提倡的写法。
background: transparent url(image.jpg) repeat-y fixed top ;
案例如下:
<!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-UA-Compatible" content="ie=edge"><title>背景属性复合写法</title><style>body {/* background-image: url(images/bg.jpg);background-repeat: no-repeat;background-position: center top; *//* 把背景图片固定住 *//* background-attachment: fixed;background-color: black; */background: black url(images/bg.jpg) no-repeat fixed center top;color: #fff;font-size: 200px;}</style>
</head><body><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
</body></html>
(7)背景总结
(8)综合案例–五彩导航
<!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-UA-Compatible" content="ie=edge"><title>综合案例-五彩导航</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;text-align: center;line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(images/bg1.png) no-repeat;}.nav .bg1:hover {background-image: url(images/bg11.png);}.nav .bg2 {background: url(images/bg2.png) no-repeat;}.nav .bg2:hover {background-image: url(images/bg22.png);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航</a><a href="#" class="bg2">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a><a href="#">五彩导航</a></div>
</body></html>
5、列表样式
通常我们不使用网页默认的列表样式,而是使用设计的图标。
list-style-type:列表小圆点的类型。
list-style-image:列表图标。
list-style-position:列表图标的位置。
list-style:列表样式。
案例如下:
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>列表样式</title><style>#nav {width: 300px;background: #a0a0a0;}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;/* 颜色,图片,图片位置,平铺方式 */background: red url("../images/d.gif") 270px 10px no-repeat;}ul li {height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/r.gif");background-repeat: no-repeat;background-position: 236px 2px;}a {text-decoration: none;font-size: 14px;color: #000;}a:hover {color: orange;text-decoration: underline;}</style>
</head><body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li><li><a href="#">食品饮料</a> <a href="#">保健食品</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul></div>
</body></html>
CSS入门二、美化页面元素相关推荐
- Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
- 打印html时字号不对,HTML+CSS入门 移动端页面字体在微信被放大导致排版错乱如何解决...
本篇教程介绍了HTML+CSS入门 移动端页面字体在微信被放大导致排版错乱如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 微信调整了字体大小会放大网页的字体,导致 ...
- CSS中有哪些隐藏页面元素的方法?
目录 一.前言 二.隐藏页面元素的实现方法 1.利用display:none实现 2.利用visibility:hidden隐藏元素 3.利用opacity:0来隐藏元素 4.设置width,heig ...
- 【狂神css笔记】美化网页元素
span标签:重点突出 字体样式 font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色 单词/#rgb/rgba(x,x,x,0~1)a ...
- CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素 常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...
- CSS入门七、CSS3新特性
零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状 新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 2.CSS3 新增选择器 CSS3 ...
- 04-前端技术_CSS与CSS3美化页面
目录 二,CSS与CSS3美化页面 1,CSS简介 1.1 什么是CSS? 1.2 样式层叠次序 2,CSS基础语法 2.1 介绍 2.2 注释 3,CSS使用方式 3.1 如何插入样式表 3.2 外 ...
- 将页面元素隐藏的10种方法
在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...
- 前端(五)——CSS之美化页面
文章目录 1. 美化页面原因 2. span标签 3. 字体样式 4. 文本样式 5. 超链接伪类 6. 列表 7. 背景 8. 渐变 9. 盒子模型 1. 美化页面原因 有效的传递页面信息 美化网页 ...
最新文章
- 【高德地图开发1】---简介
- 《C++语言基础》程序阅读——和对象找感觉
- 甲亢php,甲亢还是甲低,真亢还是真低?
- ActiveMQ 的客户端选项
- 使用Docker来运行WebApp
- C#实现 UDP简单广播
- P4383-[八省联考2018]林克卡特树【wqs二分,树形dp】
- jq之fadeOut()
- mac玩rust用什么画质_Mac上的活动监视器到底有什么用?你会用么?
- 前端开发核心JavaScript要怎么学?给转行或是自学的朋友提些学习建议
- mysql查找某连续字段中断的编号
- cesium画飞线_基于Cesium绘制抛物弧线
- A 洛谷 P3601 签到题 [欧拉函数 质因子分解]
- 阿里又起社交心,天天动听做音乐轻社交?
- centos7 安装pg_repack
- 1.OCR--文本检测算法FCENet
- 个人日记-《银河帝国》第一本‘基地’读后感-20201109
- uni-app转小程序ios video不生效+视频播放不了、黑屏问题
- 基带信号及其眼图MATLAB仿真实现,Matlab通信仿真——带限系统下的基带信号
- 从爬取豆瓣影评到基于朴素贝叶斯的电影评论情感分析(上)