基本布局和块状元素
程序员文章站
2022-03-07 19:21:16
...
浏览效果
前
后
代码如下:
<!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>基本布局</title>
<style>
.main{
width: 400px;
height: 800px;
background: #6ff;
position: absolute;
top: 40px;
left: 400px;
display: inline;
}
.top{
width: 380px;
height: 190px;
position: relative;
background: coral;
margin-top: 10px;
margin-left: 10px;
}
.line{
width: 130px;
height: 400px;
position: relative;
background: royalblue;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.line2{
width: 130px;
height: 400px;
position: relative;
background: #432;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.foot{
width: 380px;
height: 150px;
position: relative;
background: seashell;
margin-left: 10px;
margin-top: 430px;
}
/* 隐藏与显示 */
.st{
display: none;
}
.main:hover .st{
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="top"></div>
<div class="st">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="foot"></div>
</div>
</body>
</html>
推荐阅读
-
div元素和布局解析
-
Android基础-四种基本布局和自定义控件的步骤
-
行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
HTML行内元素块级元素和行内块状元素
-
精通CSS+DIV网页样式与布局页面和浏览器元素_html/css_WEB-ITnose
-
1.Ement常用语法、元素属性和布局标签
-
3.QML布局和输入元素
-
css基础之元素样式,基本选择器和选择器的权重
-
Qt不用布局类挂载(增加)界面控件和显示界面控件的基本原理和示例代码(setGeometry()、QPushButton)