前端技术——css+div

最新推荐文章于 2024-09-21 18:46:25 发布

weixin_30496751

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量72

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/StingLon/p/9816664.html

版权

css 层叠样式表

div 是一个html标签，一个块级元素，单独占一行

https://github.com/StingLon/WEB-/blob/master/%E5%89%8D%E7%AB%AF-CSS

div+css 用来优化网页，布局页面

1.基本格式：

<style>

div{

}

</style>

<div>

</div>

2.选择器：

（1）通配选择器 * 号表示所有的对象。凡是在html文件中的元素，都会被选中
<head>
<style>
*{
background-color:blueviolet ;/*h2,h3,a，body均被选中，背景色都改变了*/
}
</style>
</head>

（2）元素选择器指以网页中已有的标签名作为名称的选择符
<head>
<style>
h2{
background-color:blueviolet ;
}
h3{
font-family: "微软雅黑";
}
</style>

</head>

</body>

（3）类选择器（有点号）
<style>
.div1{
background-color:blueviolet ;
font-family: "微软雅黑";
}

.div2{
background-color:blueviolet ;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div calss="div1">xxx</div>
<div calss="div2">xxx</div>
</body>

（4）Id选择器（有#号）

.div2{
background-color:blueviolet ;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<div id="div1">xxx</div>
<div calss="div2">xxx</div>
</body>

（5）层级选择器

<head>
<meta charset="UTF-8">
<style>
div p{ //
font-size: 40px;
color: green;
}
</style>
</head>

<body>
<div>
<p>
sdasdasdas
</p>
</div>
</body>

(6)属性选择器

<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type='text']{
background-color: red;
}
</style>
</head>
<body>
用户名：<input type="text" name="username"/><br/>
</body>

3.引入方式：

（1）内部引入

4.浮动：（https://www.cnblogs.com/zhaijunming5/p/7833071.html）

简而言之就是通过关键字float来调整div摆放的

 float:right;

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，
那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

清除浮动可以理解为打破横向排列。

清除浮动的关键字是clear，只能影响使用清除的元素本身，不能影响其他元素

语法：

clear : none | left | right | both

转载于:https://www.cnblogs.com/StingLon/p/9816664.html

weixin_30496751

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫