简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 2020.04.06 CSS与html文档作业
Blogger Information
Blog 14
fans 0
comment 0
visits 7640
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2020.04.06 CSS与html文档作业
鹏建
Original
568 people have browsed it

行内块元素

  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>

个人总结：

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看上去可能会认为很简单, 结果写一行错一行, 这都是一个必经的过程
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！