HTML前端页面设计静态网站

浅浅分享一下前端作业,大佬轻喷~

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个网页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    h2,
    h3 {
      text-align: left;
    }

    p {
      text-align: left;
      font-size: 14px;
      font-weight: normal;
    }

    .pink-box {
      width: 120px;
      height: 100px;
      background-color: pink;
      text-align: left;
      line-height: 100px;
      font-weight: normal;
    }

    .pink-box a {
      text-decoration: none;
      color: inherit;
      font-weight: normal;
    }

    table {
      width: 400px;
      border-collapse: collapse;
    }

    table th,
    table td {
      border: 1px solid #ccc;
      padding: 5px;
    }

    table th {
      text-align: center;
      font-weight: normal;
    }

    table td {
      text-align: left;
      font-weight: normal;
    }
  </style>
</head>

<body>

  <h2>二级标题</h2>
  <p>不知道写啥。</p>
  <h3>三级标题</h3>
  <p>一张图片。</p>
  <img src="一个图片.jpg" width="500" />
  <div class="pink-box">
    盒子
  </div>
  <a href="https://www.baidu.com">点击我可以跳到百度哦</a>
  <ul>
    <li>我</li>
    <li>是</li>
    <li>无</li>
    <li>序</li>
    <li>表</li>
  </ul>

  <input type="text" style="width: 300px;" placeholder="我是一个宽300px但是输入什么都没用的输入框">
  <button disabled>不管怎么按都没用的按钮</button>

  <table>
    <tr>
      <th>用户名:</th>
      <td><input type="text"></td>
    </tr>
    <tr>
      <th>密码:</th>
      <td><input type="password"></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center;">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
      </td>
    </tr>
  </table>

  <p>自我介绍</p>
  <label>性别:
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女
  </label>
  <label>城市: <input type="text" value="重庆"></label>
  <label>爱好:<input type="checkbox">打游戏 <input type="checkbox">看电影 <input type="checkbox">听音乐 <input
      type="checkbox">运动<br />
    目标:<textarea style="width:300px; height:100px;" placeholder="我要努力加入Web前端!加油!"></textarea>
  </label>
</body>

</html>

***新人博主创作不易,希望大家多多点赞关注呀~

相关推荐
钛态5 小时前
Vite 中的 CSS 工程化:从 CSS Modules 到 UnoCSS 的渐进式迁移
前端·vue·react·web
Csvn7 小时前
原型链、this 与闭包内存:三座深水区一次打通(含内存泄漏排查实战)
前端·javascript
葡萄城技术团队7 小时前
如何通过 JSON 数据源 / Web API 快速构建轻量级报表(Report)?
前端·json·原型模式
浪兎兎7 小时前
【Java Web】Servlet + JSP 笔记
java·前端·servlet
Patrick_Wilson8 小时前
iOS Safari Clipboard API 权限弹窗问题
前端·ios·safari
OpenTiny社区9 小时前
Naive UI × GenUI SDK:自定义物料库搭建实战
前端·ai编程
kyriewen9 小时前
我拿 4 个真实前端任务试了 GLM-5.3 Flash:代码一遍跑通,账单 4 分钱
前端·程序员·ai编程
IT_陈寒9 小时前
Vue的响应式更新有时候真的不听话
前端·人工智能·后端
风骏时光牛马9 小时前
AI编程常见问题梳理与要点解析
前端
前端snow9 小时前
ai agent -- LCEL 汇总
前端