标签：实战 float width 100% 必学 height 案例 bottomNode left
案例分析：讲解留言板模块
运用文本域实现留言板的输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
textarea {
/* css比它自有属性 优先级 高 */
width: 100px;
height: 50px;
resize: 50px;
}
</style>
</head>
<body>
<textarea cols="1" rows="1"></textarea>
</body>
</html>
理论实操：单选框、多选框的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- <input type="radio"> -->
<div>
请选择您的性别
</div>
<!-- checked 选中状态 -->
<label>
<input checked type="radio" name="leo">
男生
</label>
<label>
<input type="radio" name="leo">
女生
</label>
<div>
请选择您喜欢的城市
</div>
<label><input type="checkbox" name="sky">北京</label>
<label><input type="checkbox" name="sky">天津</label>
<label><input type="checkbox" name="sky">杭州</label>
</body>
</html>
完成留言板制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer_Node {
width: 650px;
height: 191px;
background: #fffcf5;
}
.outer_Node .topNode {
width: 634px;
height: 48px;
float: left;
margin-left: 16px;
border-bottom: 2px solid #ebc1c2;
position: relative;
}
.outer_Node .topNode .topNode_title {
float: left;
height: 14px;
font-size: 14px;
line-height: 14px;
color: #9e6c00;
font-weight: bold;
}
.outer_Node .topNode .topNode_line {
width: 56px;
height: 3px;
background: #bc8320;
position: absolute;
bottom: -2px;
left: 0;
}
/* bottomNode 开始 */
.bottomNode {
width: 620px;
height: 107px;
float: left;
border: 1px solid #eee5b1;
margin-left: 16px;
margin-top: 20px;
}
.bottomNode .bottomNode_textNode {
float: left;
width: 100%;
height: 68px;
border-bottom: 1px solid #eee5b1;
}
.bottomNode .bottomNode_textNode textarea {
width: 502px;
height: 48px;
float: left;
border: none;
resize: none;
outline: none;
padding: 0;
padding: 10px;
}
.bottomNode .bottomNode_textNode .cra {
float: left;
width: 48px;
height: 100%;
background: url(img/cra_icon.jpg) no-repeat center center, #f9f7e8;
cursor: pointer;
border-left: 1px solid #ebead5;
}
.bottomNode .bottomNode_textNode .file {
float: left;
width: 48px;
height: 100%;
background: url(img/file_icon.jpg) no-repeat center center, #f9f7e8;
cursor: pointer;
border-left: 1px solid #ebead5;
position: relative;
}
.bottomNode .bottomNode_textNode .file input {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
cursor: pointer;
}
.bottomNode .bottomNode_icon {
float: left;
width: 100%;
height: 38px;
}
.bottomNode .bottomNode_icon a {
float: left;
margin-top: 8px;
margin-left: 8px;
}
.bottomNode .bottomNode_icon .bottom_btn {
width: 75px;
height: 28px;
float: right;
margin-top: 4px;
margin-right: 4px;
border: 1px solid #caab63;
background: #dfba6c;
border-radius: 1px;
font-size: 14px;
line-height: 28px;
text-align: center;
color: #fefffa;
cursor: pointer;
}
.bottomNode .bottomNode_icon .bottom_btn:hover {
background: #b39350;
}
</style>
</head>
<body>
<div class="outer_Node">
<div class="topNode">
<div class="topNode_title">
我的说说
</div>
<div class='topNode_line'></div>
</div>
<div class="bottomNode">
<div class="bottomNode_textNode">
<textarea></textarea>
<div class="cra"></div>
<div class="file">
<input type="file">
</div>
</div>
<div class='bottomNode_icon'>
<a href="#">
<img src="img/icon_one.jpg" />
</a>
<a href="#">
<img src="img/icon_two.jpg" />
</a>
<a href="#">
<img src="img/icon_three.jpg" />
</a>
<div class='bottom_btn'>
发表
</div>
</div>
</div>
</div>
</body>
</html>
经验分享：框架标签的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* .mk {
width: 50%;
height: 100%;
position: fixed;
left: 0;
top: 0;
} */
.bili {
width: 50%;
height: 100%;
position: fixed;
left: 50%;
top: 0;
}
</style>
</head>
<body>
<!-- <iframe src="http://www.baidu.com" scrolling='no'></iframe> -->
<iframe class='mk' src="https://www.imooc.com/" frameborder='0'></iframe>
<!-- <iframe class='bili' frameborder='0' src='https://www.bilibili.com'></iframe> -->
</body>
</html>
标签：实战,
float,
width,
100%,
必学,
height,
案例,
bottomNode,
left
From： https://www.cnblogs.com/xiaochenNN/p/18032623
