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>