老师,请帮忙看看我的代码有什么问题
老师,以下是我仿照视频里的案例写的代码,不能实现预期效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >CSS布局</ title > < style type = "text/css" > /*此处写代码*/ * { padding: 0; margin: 0; } h1 { text-align: center; } .a { float: left; width: 50%; padding: 10px; } .a img { width: 426px; height: 240px; } </ style > </ head > < body > <!-- 此处写代码 --> < h1 >ENJOY THE LIFE</ h1 > < div class = "a" > < img src = "http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" > < div class = "text" >Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</ div > </ div > < div class = "a" > < img src = "http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" > < div class = "text" >Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</ div > </ div > </ body > </ html > |
以下是案例里的代码,div class为m-com,有5条css。
其实我也知道几种实现预期效果的方法,但是不明白为什么我仿照案例不能实现相应的效果。我的代码与案例里的代码有什么不同?是哪里出错了呢?如果想用案例里的那种实现方式应该怎样改?还请老师帮帮我,谢谢!
15
收起
正在回答 回答被采纳积分+1
3回答
guly
2020-05-15 11:12:37
你好,修改您的代码效果如下:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >CSS布局</ title > < style type = "text/css" > /*此处写代码*/ * { padding: 0; margin: 0; } h1 { text-align: center; } .test{ width:100%; text-align: center; background-color:red; } .a1 { width: 460px; float:left; position: relative; margin-left: 10%; } .a2 { width: 460px; float:left; position: relative; } .text{ width:460px ; /*padding-top:20px;*/ font-size: 20px; font-weight: bold; color:#7D7C7F; padding-bottom: 50px; } </ style > </ head > < body > <!-- 此处写代码 --> < h1 >ENJOY THE LIFE</ h1 > < div class = "test" > < div class = "a1" > < img src = "http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg" > < div class = "text" >Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</ div > </ div > < div class = "a2" > < img src = "http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg" > < div class = "text" >Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</ div > </ div > </ div > </ body > </ html > |
如果解决您的问题请采纳,祝学习愉快!
PHP小白零基础入门
- 参与学习 人
- 提交作业 626 份
- 解答问题 4928 个
想要学好Web后端开发的中流砥柱语言,本阶段为你轻松铺就扎实的基础,从前端网页布局的搭建到后台PHP开发,助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧