6月21日CSS层叠样式表学习总结

P1nkSpid3r

已于 2022-06-21 16:04:43 修改

阅读量72

点赞数

分类专栏：在这理发店文章标签： html css javascript

于 2022-06-21 16:04:34 首次发布

本文链接：https://blog.csdn.net/L978305126/article/details/125390786

版权

在这理发店专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css及html的一些细节

1、class、id的命名要注意，给每个部分取个恰当的名字确实需要斟酌

id的命名：这个页面最外层的div起名叫container ，标题栏那部分叫head，导航+内容+目录叫page

class得考虑到样式一致的内容都可以叫class

作业要求是让多用class，但是我直接用了很多标签还有id。。。。

2、css选择器，混合怎么写...

id为nav的带有miao类别的P标签写法：#nav p.miao(因为类别是用来修饰p标签的，所以得先写p，再写p的类别)

3、padding和margin的区别

什么时候该用margin，什么时候用padding?

padding会改变元素自身的高度、宽度

margin是调整两个元素之间的距离

如果不确定用padding还是margin就把两个元素都填上背景色

4、margin:auto的妙用

可以让元素水平居中，前提是margin得有宽度。

5、内部页面链接怎么加

加链接是用a标签，如果像目录那样只是链接到同一个页面的不同部分是这样实现：

比如我想让“css选择器”这个目录链接到页面的某个部分，先给目标部分定义好id名称，然后再加链接

<a href="#链接目标部分的id名称">css选择器</a>

值得注意的是：

这样加了链接后只点“css选择器”这几个字链接有效，如果想把链接充满整个方块就要把a标签设置为 display: block 充满整个元素，这个还需要再理解看看。。

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link  rel="stylesheet" href="../作业/douyin/iconfont/iconfont.css">
</head>
<body>
    <div>
        <div>
         <span>关注</span>
         <span>|</span>
         <span>推荐</span>
         <span>|</span>
         <span>附近</span>
         <i class="iconfont icon-search"></i>
         <span class="iconfont icon-shuxian"></span>
         <i class="iconfont icon-video"></i>
         <i class="iconfont icon-plus add-fried" style="color: red"></i>
         <i class="iconfont icon-star"></i>
         <i class="iconfont icon-comment"></i>
         <i class="iconfont icon-share"></i>
        </div>
        </br>
        </br>
        </br>
        <div>
            <div>
                <div>@淘气的猫</div>
                <div>《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，
                    正传电影由刘伟强执导，郑伊健、陈小春等主演</div>
                <div>@烟台融媒创作的原创原声烟台传媒</div>
                <div><video src="../作业/douyin/video/1.mp4" controls="controls" width="300"  height="325"></video></div> 
            </div>
            <div>
                <div>@淘气的猫</div>
                <div>《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，
                    正传电影由刘伟强执导，郑伊健、陈小春等主演</div>
                <div>@烟台融媒创作的原创原声烟台传媒</div>
                <div><video src="../作业/douyin/video/2.mp4" controls="controls" width="300"  height="325"></video></div> 
            </div>
            <div>
                <div>@淘气的猫</div>
                <div>《古惑仔》是最佳拍档电影公司出品的香港黑帮题材系列电影，
                    正传电影由刘伟强执导，郑伊健、陈小春等主演</div>
                <div>@烟台融媒创作的原创原声烟台传媒</div>
                <div><video src="../作业/douyin/video/3.mp4" controls="controls" width="300"  height="325"></video></div> 
            </div>
            <br>首页</br>朋友</br>消息</br>我</div>
        </div>     
    </div>
    
</body>
</html>

P1nkSpid3r

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
6月21日CSS层叠样式表学习总结

css及html的一些细节1、class、id的命名要注意，给每个部分取个恰当的名字确实需要斟酌id的命名：这个页面最外层的div起名叫container ，标题栏那部分叫head，导航+内容+目录叫pageclass得考虑到样式一致的内容都可以叫class作业要求是让多用class，但是我直接用了很多标签还有id。。。。2、css选择器，混合怎么写...id为nav的带有miao类别的P标签写法：#nav p.miao(因为类别是用来修饰p标签的，所以得先写p，再写p的类别)3、padding和marg
复制链接

扫一扫