8.行内对齐方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ width: 50px; /* 行内元素的水平对齐方式:top/bottom/middle/baseline(默认) */ vertical-align: baseline; } </style> </head> <body> <img src="../imgs/2.jpg" /> <input type="text" /> </body> </html>
显示效果:
9.布局练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body>div{ width: 1000px; margin: 0 auto; background-color: #0A7EB8; } #t_left_div{ width: 611px; height: 376px; float: left; } #t_right_div{ width: 375px; height: 376px; float: right; } body>div>div{ overflow: hidden;/* 解决高度为0的问题 */ margin-bottom: 10px;/* 两行之间的间距 */ } body>div>div>div{/* 给所有第3层的div添加背景颜色 */ background-color: #e8e8e8; } #b_left_div{ width: 366px; height: 233px; float: left; } .b_right_div{ width: 198px; height: 233px; float: right; margin-left: 10px; } </style> </head> <body> <div> <div > <div id="t_left_div"></div> <div id="t_right_div"></div> </div> <div > <div id="b_left_div"></div> <div class="b_right_div"></div> <div class="b_right_div"></div> <div class="b_right_div"></div> </div> </div> </body> </html>
显示效果：
本节所有代码:
https://download.csdn.net/download/qq_44273429/12729675
注:代码中的图片路径为我本地路径,可自行上传图片,更改图片所在路径即可,有疑惑可以问我
未完待续
