Home Explore Help
Sign In
qw
/
soilgd
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

更新

lhf 4 days ago
parent
d3f423b1e6
commit
ecff85b0d7
4 changed files with 297 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      前端/html/图片/向右1.png
  2. 126 0
      前端/html/新闻页面1.html
  3. 43 0
      前端/html/简洁版小米侧边栏案例.html
  4. 128 0
      前端/html/练习7.html

BIN
前端/html/图片/向右1.png
View File


+ 126 - 0
前端/html/新闻页面1.html
View File 

@@ -0,0 +1,126 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        body {
 
+            font-size: 16px;
 
+            line-height: 28px;
 
+            font-family: "Microsoft YaHei";
 
+        }
 
+
 
+        h1 {
 
+            font-weight: 400;
 
+            text-align: center;
 
+        }
 
+
 
+        .camelCase {
 
+            color: #88888888;
 
+            font-size: 12px;
 
+            text-align: center;
 
+        }
 
+
 
+        .camelCase a {
 
+            text-decoration: none;
 
+        }
 
+
 
+        .search {
 
+            width: 170px;
 
+        }
 
+
 
+        .camelCase1 {
 
+            font-weight: 700;
 
+        }
 
+
 
+        p {
 
+            text-indent: 2em;
 
+        }
 
+
 
+        h4 {
 
+            text-align: center;
 
+        }
 
+
 
+        .image {
 
+            text-align: center;
 
+        }
 
+
 
+        .ContentEnd {
 
+            color: #88888888;
 
+            font-size: 12px;
 
+        }
 
+
 
+        /* 默认状态（未访问） */
 
+        a:link {
 
+            color: #1a73e8;
 
+            text-decoration: none;
 
+        }
 
+
 
+        /* 已访问状态 */
 
+        a:visited {
 
+            color: #681da8;
 
+        }
 
+
 
+        /* 鼠标悬停 */
 
+        a:hover {
 
+            color: #d93025;
 
+            text-decoration: none;
 
+        }
 
+
 
+        /* 键盘聚焦 */
 
+        a:focus {
 
+            outline: 3px solid #fbbc04;
 
+            background-color: #fef7e0;
 
+        }
 
+
 
+        /* 按下瞬间 */
 
+        a:active {
 
+            transform: scale(0.98);
 
+        }
 
+       
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
 
+    <div>
 
+        <div class="camelCase">
 
+            2019-07-03 16:31:47 来源: <a href="#">中国天气网　</a>
 
+            <input type="text" placeholder="请输入查询条件" class="search">
 
+            <button class="camelCase1">查询</button>
 
+        </div>
 
+        <hr>
 
+        <p>
 
+            中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地 气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4
 
+            日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最 高气温还有望创今年以来的新高。
 
+        </p>
 
+        <div class="image">
 
+            <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
 
+            <img src="./图片/pic.jpeg" alt="">
 
+        </div>
 
+        <p>
 
+            今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北 京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
 
+        </p>
 
+        <p>
 
+            在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部 分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分
 
+            别高达66.6℃和66.5℃。
 
+        </p>
 
+        <h4>
 
+            明日热度再升级！京津冀携手冲击38℃+
 
+        </h4>
 
+        <p>
 
+            中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升 级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南
 
+            部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
 
+        </p>
 
+        <p>
 
+            不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当 地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文 静 张方丽）
 
+        </p>
 
+        <p class="ContentEnd">
 
+            本文来源：中国天气网 责任编辑：刘京_NO5631
 
+        </p>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 43 - 0
前端/html/简洁版小米侧边栏案例.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        a {
 
+            width: 230px;
 
+            height: 40px;
 
+            line-height: 40px;
 
+            background-color: #535758;
 
+            display: block;
 
+            text-decoration: none;
 
+            color: #EBFDFF;
 
+            font-size: 14px;
 
+            padding: 5px 0 0 15px;
 
+        }
 
+
 
+        a:hover {
 
+            color: #FFF2DA;
 
+            background-color: #FE6700;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="camelCase">
 
+        <a href="#">手机 电话卡</a>
 
+        <a href="#">电视 盒子</a>
 
+        <a href="#">笔记本 平板</a>
 
+        <a href="#">家电 插线板</a>
 
+        <a href="#">出行 穿戴</a>
 
+        <a href="#">智能 路由器</a>
 
+        <a href="#">电源 配件</a>
 
+        <a href="#">健康 儿率</a>
 
+        <a href="#">耳机 音箱</a>
 
+        <a href="#">生活 箱包</a>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 128 - 0
前端/html/练习7.html
View File 

@@ -0,0 +1,128 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        h2 {
 
+            font-size: 36px;
 
+            font-weight: 400;
 
+            font-style: italic;
 
+        }
 
+
 
+        td img {
 
+            Width: 34px;
 
+        }
 
+
 
+        td a {
 
+            text-align: left;
 
+            text-decoration: none;
 
+            line-height: 30px;
 
+        }
 
+        div > video {
 
+            width: 500px;
 
+            height: 300px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <table>
 
+        <h2>青春不常在，抓紧谈恋爱</h2>
 
+        <tr>
 
+            <td>性别：</td>
 
+            <td>
 
+                <input type="radio" id="女" name="sexs" checked><label for="女"><img src="./图片/头像 女孩.png" alt="">女</label>
 
+                <input type="radio" id="男" name="sexs"><label for="男"><img src="./图片/头像 男孩.png" alt="">男</label>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>生日：</td>
 
+            <td>
 
+                <select name="" id="">
 
+                    <option value="">--请选择月--</option>
 
+                    <option>山东</option>
 
+                    <option>北京</option>
 
+                    <option>天津</option>
 
+                    <option>火星</option>
 
+                </select>
 
+                <select name="" id="">
 
+                    <option value="">--请选择月--</option>
 
+                    <option>山东</option>
 
+                    <option>北京</option>
 
+                    <option>天津</option>
 
+                    <option>火星</option>
 
+                </select>
 
+                <select name="" id="">
 
+                    <option value="">--请选择月--</option>
 
+                    <option>山东</option>
 
+                    <option>北京</option>
 
+                    <option>天津</option>
 
+                    <option>火星</option>
 
+                </select>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>所在地区：</td>
 
+            <td>
 
+                <input type="text" placeholder="北京">
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>个人介绍：</td>
 
+            <td>
 
+                <textarea placeholder="个人简介" name="" id=""></textarea>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td></td>
 
+            <td>
 
+                <input type="submit" name="" id="" value="提交">
 
+                <input type="reset" name="" id="" value="重置">
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td></td>
 
+            <td>
 
+                <input type="checkbox" id="agree" name="agree" checked>
 
+                <label for="agree">我同意注册条款和会员加入标准</label>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td></td>
 
+            <td>
 
+                <a href="#">我是会员，立即登录</a>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td></td>
 
+            <td>
 
+                <h2>我承诺</h2>
 
+                <ul>
 
+                    <li>年满18岁、单身</li>
 
+                    <li>抱着严肃的态度</li>
 
+                    <li>真诚寻找另一半</li>
 
+                </ul>
 
+            </td>
 
+        </tr>
 
+    </table>
 
+    <div>
 
+        <h1>登录管理</h1>
 
+        <form action="">
 
+            <label for="name">用户：</label>
 
+            <input type="text" id="name" name="name" placeholder="请输入用户名"><br>
 
+            <label for="password">密码：</label>
 
+            <input type="password" id="password" name="password" placeholder="请输入密码"><br>
 
+            <input type="submit" value="登录">
 
+        </form>
 
+    </div>
 
+    <div>
 
+        <audio src="./图片/【呦猫UNEKO】梦回还【狐妖小红娘王权富贵篇】_音频.mp4" controls></audio>
 
+        <br>
 
+        <video src="./图片/仓鼠_PSP里现充太多了!每天都和妹妹们一起玩!.29814885822.mp4" controls></video>
 
+    </div>
 
+</body>
 
+
 
+</html>