博主信息
博文 14
粉丝 0
评论 0
访问量 9526
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
2020.04.06 CSS与html文档作业
鹏建
原创
766人浏览过

行内块元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>行内块元素</title>
  7. </head>
  8. <body>
  9. <h1>春天美景</h1>
  10. <img
  11. src="春天.jpg"
  12. alt="spring"
  13. style="display: block; width: 200px; margin: 10px;"
  14. />
  15. <section style="display: block;">
  16. <label for="city">城市:</label>
  17. <select
  18. name="city"
  19. id="city"
  20. style="width: 80px; height: 30px; font-size: 18px; color:green;"
  21. >
  22. <optgroup label="国内">
  23. <option value="江西" label="江西"></option>
  24. <option value="广州" label="广州"></option>
  25. <option value="海南" label="海南" selected></option>
  26. </optgroup>
  27. <optgroup label="国外">
  28. <option value="巴黎" label="巴黎"></option>
  29. <option value="夏威夷" label="夏威夷"></option>
  30. <option value="柏林" label="柏林"></option>
  31. </optgroup>
  32. </select>
  33. </section>
  34. <a href="http://www.baidu.com/" target="blank">百度</a>
  35. <!-- 置换元素的行内元素,可以设置宽高,则为行内块元素。例如图片、视频、表单等 -->
  36. </body>
  37. </html>

外部样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>外部样式</title>
  7. <link rel="stylesheet" href="style/1.css" />
  8. </head>
  9. <body>
  10. <div class="box">
  11. <h3 class="item">书籍分类</h3>
  12. <ul>
  13. <li>政治</li>
  14. <li>历史</li>
  15. <li>艺术</li>
  16. <li>小说</li>
  17. <li>教科书</li>
  18. </ul>
  19. </div>
  20. <p class="心灵鸡汤">
  21. 我的生活像一个万花筒,多姿多彩,有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧!
  22. 我的生活像一个万花筒,多姿多彩,有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧!
  23. 我的生活像一个万花筒,多姿多彩,有快乐同时也有悲伤。就让我来跟大家一起分享我的快乐吧!
  24. </p>
  25. </body>
  26. </html>

内部样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>内部样式</title>
  7. <style>
  8. @import url(style/2.css);
  9. </style>
  10. </head>
  11. <body>
  12. <div class="box">
  13. <h3 >我爱吃的水果</h3>
  14. <ul>
  15. <li>西瓜</li>
  16. <li>苹果</li>
  17. <li>香蕉</li>
  18. <li>桃子</li>
  19. <li>芒果</li>
  20. </ul>
  21. </div>
  22. </body>
  23. </html>

媒体查询


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>媒体查询</title>
  7. <style>
  8. .person {
  9. background-color: yellowgreen;
  10. border: 2px solid yellowgreen;
  11. onclick: red;
  12. border-radius: 5px;
  13. margin: 20px;
  14. padding: 10px;
  15. }
  16. h3 {
  17. padding: 20px;
  18. }
  19. a {
  20. padding: 5px;
  21. }
  22. @media screen and (max-width: 400px) {
  23. a {
  24. display: none;
  25. }
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="person">
  31. <h3 style="display: inline;">人物</h3>
  32. <a href="">老人</a>
  33. <a href="">小孩</a>
  34. <a href="">帅哥</a>
  35. <a href="">美女</a>
  36. </div>
  37. </body>
  38. </html>

个人总结:

多学、多练、多问
很多问题不去实际操作,永远发现不了,永远觉得自己会了,操作后才体会到中间的不宜。
细节、细节,细节觉得成败。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:看上去可能会认为很简单, 结果写一行错一行, 这都是一个必经的过程
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学