零、文章目录

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;

  1. 参数是方位名词
  • 如果指定两个方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致。
  • 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
  1. 参数是精确单位
  • 如果指定两个数值第一个肯定是 x 坐标第二个一定是 y 坐标
  • 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
  1. 参数是混合单位
  • 如果精确单位和方位名词混合使用,则第一个值是 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>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li><li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li><li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li><li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li><li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li><li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li></ul></div>
</body></html>

CSS入门二、美化页面元素相关推荐

  1. Java学习-14 CSS与CSS3美化页面及网页布局

    Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...

  2. 打印html时字号不对,HTML+CSS入门 移动端页面字体在微信被放大导致排版错乱如何解决...

    本篇教程介绍了HTML+CSS入门 移动端页面字体在微信被放大导致排版错乱如何解决,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 微信调整了字体大小会放大网页的字体,导致 ...

  3. CSS中有哪些隐藏页面元素的方法?

    目录 一.前言 二.隐藏页面元素的实现方法 1.利用display:none实现 2.利用visibility:hidden隐藏元素 3.利用opacity:0来隐藏元素 4.设置width,heig ...

  4. 【狂神css笔记】美化网页元素

    span标签:重点突出 字体样式 font-family:字体 font-size:字体大小 font-weight:字体粗细 color:字体颜色  单词/#rgb/rgba(x,x,x,0~1)a ...

  5. CSS入门基础----行内元素、块级元素和行内块元素的特点和转换

    块级元素 常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...

  6. CSS入门七、CSS3新特性

    零.文章目录 CSS入门七.CSS3新特性 1.CSS3 的现状 新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 2.CSS3 新增选择器 CSS3 ...

  7. 04-前端技术_CSS与CSS3美化页面

    目录 二,CSS与CSS3美化页面 1,CSS简介 1.1 什么是CSS? 1.2 样式层叠次序 2,CSS基础语法 2.1 介绍 2.2 注释 3,CSS使用方式 3.1 如何插入样式表 3.2 外 ...

  8. 将页面元素隐藏的10种方法

    在Web开发中,隐藏页面元素使其视觉不可见是一个非常常见的需求.为了实现这一目标,我们通常会采用多种方法,最常用的例如CSS的display属性,只要设置为node即可隐藏元素. 本文将通过对当前所有 ...

  9. 前端(五)——CSS之美化页面

    文章目录 1. 美化页面原因 2. span标签 3. 字体样式 4. 文本样式 5. 超链接伪类 6. 列表 7. 背景 8. 渐变 9. 盒子模型 1. 美化页面原因 有效的传递页面信息 美化网页 ...

最新文章

  1. 【高德地图开发1】---简介
  2. 《C++语言基础》程序阅读——和对象找感觉
  3. 甲亢php,甲亢还是甲低,真亢还是真低?
  4. ActiveMQ 的客户端选项
  5. 使用Docker来运行WebApp
  6. C#实现 UDP简单广播
  7. P4383-[八省联考2018]林克卡特树【wqs二分,树形dp】
  8. jq之fadeOut()
  9. mac玩rust用什么画质_Mac上的活动监视器到底有什么用?你会用么?
  10. 前端开发核心JavaScript要怎么学?给转行或是自学的朋友提些学习建议
  11. mysql查找某连续字段中断的编号
  12. cesium画飞线_基于Cesium绘制抛物弧线
  13. A 洛谷 P3601 签到题 [欧拉函数 质因子分解]
  14. 阿里又起社交心,天天动听做音乐轻社交?
  15. centos7 安装pg_repack
  16. 1.OCR--文本检测算法FCENet
  17. 个人日记-《银河帝国》第一本‘基地’读后感-20201109
  18. uni-app转小程序ios video不生效+视频播放不了、黑屏问题
  19. 基带信号及其眼图MATLAB仿真实现,Matlab通信仿真——带限系统下的基带信号
  20. 从爬取豆瓣影评到基于朴素贝叶斯的电影评论情感分析(上)

热门文章

  1. 每日随笔:笔记本WiFi突然连接不上重启才好的问题解决方式
  2. JavaScript学习笔记03【基础——对象(RegExp、Global)】
  3. 科幻计算机类小说,五本超级火爆的科幻类小说,每一本都让你欲罢不能
  4. Chrome OS 与 Android 的生死爱欲
  5. 滑雪问题(dfs+dp)
  6. CS224n笔记——Subword Model(十二)
  7. c语言实现图片轮播,纯css实现轮播图
  8. iOS模拟键盘长按删除
  9. 乐视笔试算法题美团算法笔试题
  10. 将生成的视频保存到相册