2-5编程
来源:2-5 编程练习
Wang8062776
2020-03-22 13:56:28
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 1200px; margin: 0 auto; height: 500px; } h1{ font-size: 30px; font-weight: lighter; margin-top: 20px; margin-bottom: 20px; } samp{ font-size: 30px; color:#7c7c7c; } dt{ text-decoration: underline; font-size: 20px; font-weight: bold; } aside{ float: left; width: 450px; } article{ float: right; width: 750px; } dl{ width: 450px; height: 100px; position: relative; } dt,dd:last-of-type{ position: absolute; left: 65px; } dt{ top: 5px; } dd:last-of-type{ font-size: 14px; top: 35px; } dd img,dd span{ position: absolute; font-family: : Arial; color: white; } dd:first-of-type{ height: 51px; width: 50px; position: absolute; } span{ font-family: Arial; font-size: 20px; top: 50%; left:50%; transform: translate(-50%,-50%); } p{ font-size: 16px; } article img{ width: 720px; height: 200px; margin: 25px 0; } article p:last-of-type{ margin-top: 25px; } </style> </head> <body> <section> <aside> <h1>Rcent <samp>Course</samp></h1> <dl> <dt>Hyper Text Markup Language</dt> <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>1</span></dd> <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd> </dl> <dl> <dt>Cascading Style Sheets</dt> <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>2</span></dd> <dd>Cascading Style Sheets (CS3) is a simple mechanism for adding style (e.g , fonts , colors , spacing) to Web documents</dd> </dl> <dl> <dt>JavaScript</dt> <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>3</span></dd> <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd> </dl> <dl> <dt>AngularJS</dt> <dd><img src="http://climg.mukewang.com/582e61290001787900500051.png"><span>4</span></dd> <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd> </dl> </aside> <article> <h1>Welcome to <samp>Massive Open Online Course!</samp></h1> <p>We provide the latest knowledge to help you cope with the changing world!</p> <img src="http://climg.mukewang.com/582e61180001ede703300130.jpg" > <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p> <p>Focus on IT skills education MOOC, consistent with the development trend of the internet down to earth's MOOc.We are free, we only teach useful, we concentrate on education.</p> </article> </section> </body> </html>
老师看看我的代码能优化么,我感觉好繁琐
1回答
同学你好,代码中多出了一个冒号,建议去掉,如下:
另外:左右两侧之间添加间隙,页面效果会更美观。
可以把父级的宽度调整大些,例如:
代码是可以的,不繁琐,很棒了,继续加油,祝学习愉快~
相似问题