您的位置：首页 > 娱乐 > 明星 > 常州建设网站平台_基于html的购物网页设计毕业论文_南京百度推广优化_江苏网站推广公司

常州建设网站平台_基于html的购物网页设计毕业论文_南京百度推广优化_江苏网站推广公司

2025/1/1 15:32:45 来源：https://blog.csdn.net/rch041126/article/details/143085385  浏览:  次   关键词：常州建设网站平台_基于html的购物网页设计毕业论文_南京百度推广优化_江苏网站推广公司
常州建设网站平台_基于html的购物网页设计毕业论文_南京百度推广优化_江苏网站推广公司

文章目录

  • 一 选择器进阶
    • 1 复合选择器
      • 1.1 后代选择器：空格
      • 1.2 子代选择器：>
    • 2 并集选择器：，
    • 3 交集选择器：紧挨着
    • 4 hover伪类选择器
    • 5 Emmet语法
  • 二 背景相关属性
    • 1 背景颜色
    • 2 背景图片
    • 3 背景平铺
    • 4 背景位置
    • 5 背景相关属性连写
    • 6 拓展img标签和背景图片的区别
  • 三 元素显示模式
    • 1 块级元素
    • 2 行内元素
    • 3 行内块元素
    • 4 元素显示模块转换
    • 5 拓展：HTML嵌套规范注意点
  • 四 CSS特性
    • 1 继承性
    • 2层叠性
  • 五 综合案例
    • 1 案例

一 选择器进阶

1 复合选择器

1.1 后代选择器：空格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 找到div的儿子p设置文字颜色是红色 *//* 父选择器 后代选择器{} */div p{color: red;}</style>
</head>
<body><!-- 后代：儿子孙子，重孙子...... --><p>这是一个p标签</p><div><p>这是div的儿子</p></div>
</body>
</html>

1.2 子代选择器：>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div > a{color: red;}</style>
</head>
<body><div>父级<a href="#">子级</a><p><a href="#">孙子</a></p></div>
</body>
</html>

2 并集选择器：，

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p,div,span,h1{color: red;}</style>
</head>
<body><p>ppp</p><div>div</div><span>sp</span><h1>h</h1><h2>kkk</h2>
</body>
</html>

3 交集选择器：紧挨着

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p.box{color: red;}</style>
</head>
<body><p class="box">ppp</p><p>66</p><div class="box">ppppp</div>
</body>
</html>

4 hover伪类选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{text-decoration: none;}a:hover{color: red;}div:hover{color: aqua;}</style>
</head>
<body><a href="#">链接</a><div>ppppppp</div>
</body>
</html>

5 Emmet语法

在这里插入图片描述

二 背景相关属性

1 背景颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 400px; background-color:red;}</style>
</head>
<body><div>div</div>
</body>
</html>

2 背景图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 900px;height: 900px;background-color: pink;background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);}</style>
</head>
<body><div>你好</div>
</body>
</html>

3 背景平铺

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 900px;height: 900px;background-color: pink;background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);background-repeat: no-repeat;}</style>
</head>
<body><div>你好</div>
</body>
</html>

4 背景位置

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 900px;height: 900px;background-color: pink;background-image: url(./屏幕截图\ 2024-10-23\ 194127.png);background-repeat: no-repeat;/* background-position: center center; */background-position: 60px 90px;/* 正数：向右向下移动；负数：向左向下移动 *//* 注意：背景色和背景图只显示在盒子里面 */}</style>
</head>
<body><div>你好</div>
</body>
</html>

5 背景相关属性连写

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 900px;height: 900px;/* 背景图位置如果是英文单词可以颠倒顺序 *//* 背景图位置如果是数组则不能颠倒 */background: pink url(./屏幕截图\ 2024-10-23\ 194127.png) no-repeat center;}</style>
</head>
<body><div></div>
</body>
</html>

6 拓展img标签和背景图片的区别

在这里插入图片描述

三 元素显示模式

1 块级元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;background-color: red;}</style>
</head>
<body><div>ssss</div><div>dddddddd</div>
</body>
</html>

2 行内元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置宽高不生效，尺寸和内容大小相同 */span{width: 300px;height: 300px;background-color: palegoldenrod;}</style>
</head>
<body><span>oooo</span><span>llll</span>
</body>
</html>

3 行内块元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 100px;height: 100px;}</style>
</head>
<body><img src="./屏幕截图 2024-10-23 194127.png" alt="#"><img src="./屏幕截图 2024-10-23 194127.png" alt="#">
</body>
</html>

4 元素显示模块转换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: red;display: inline-block;}</style>
</head>
<body><div>666</div><div>333</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 设置宽高不生效，尺寸和内容大小相同 */span{width: 300px;height: 300px;background-color: palegoldenrod;display: block;}</style>
</head>
<body><span>oooo</span><span>llll</span>
</body>
</html>

5 拓展：HTML嵌套规范注意点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- p和h标签不能互相嵌套 --><p><h1>66</h1></p><!-- p里不含div --><p><div>666</div></p>
</body>
</html>

四 CSS特性

1 继承性

在这里插入图片描述

子元素已有的不会继承，没有的继承父类

2层叠性

在这里插入图片描述

五 综合案例

1 案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{text-decoration: none;width: 100px;height: 50px;background-color: red;display: inline-block;color: #fff;text-align: center;line-height: 50px;}a:hover{background-color: orange;}</style>
</head>
<body><a href="#">导航1</a><a href="#">导航2</a><a href="#">导航3</a><a href="#">导航4</a><a href="#">导航5</a>
</body>
</html>

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

CH32V203F6P6-TSSOP20测试之02 做性能优化时你是如何定位问题的？ 商汤C++开发面试题及参考答案 架构设计：负载均衡层设计方案（1）——负载场景和解决方式 2024年度总结 2025年度规划 某百亿量化私募-社会招聘/校园招聘/应届生招聘/实习生招聘-

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989