作业5

来源：互联网发布：linux 误删用户恢复编辑：程序博客网时间：2024/05/01 23:01

<!DOCTYPE html> <html> <head> <title>作业1</title> <meta charset="utf-8"> <style type="text/css"> .beijing{ width: 346px; height: 418px; background-color: white; margin-top: 100px; margin-left: 200px; /*border: groove;*/ position: relative; } .one{ width: 346px; height: 102px; background-color: #4FC0E8; border-top-right-radius: 5px; border-top-left-radius: 5px; } .two{ background-image: url(1.gif); width: 59px; height: 59px; position: relative; left: 35px; top: -35px; } .three{ width: 124px; height: 60px; background-color: #4FC0E8; position: relative; left: 110px; top: 70px; border-radius: 50%; } .four{ color: #4FC0E8; text-align: center; font-weight: 700; position: relative; top: 45px; font-size: 16pt; } .five{ color: #B7B8BD; font-size: 10pt; position: relative; top: 60px; line-height: 20px; font-weight: 600; left: 12px; } .six{ background-color: #4FC0E8; width: 346px; height: 80px; position: relative; top: 100px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .seven{ text-align: center; color: white; font-size: 16pt; font-weight: 600; position: relative; top: 30px; font-family: Arial; } </style> </head> <body> <div class="beijing"> <div class="one"> <div class="three"> <div class="two"></div> </div> </div> <div class="four">LOREM IP SUM DOLOR</div> <div class="five">Quisque posuere risus erat at scelerisque felis</br> pulvinar quis. Maecenas arcu lorem , laoreet at</br> duiin,hendrent mattis mi.Sed eu vehicula lectus </br> felis pulvinar quis.Maecenas arcu lorem,laoreet </br> at posuere risus erat</div> <div class="six"> <div class="seven">LOAD MORE </div> </div> </div> </body> </html>

0 0