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>

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

相关推荐
老华带你飞4 分钟前
茶叶商城|基于SprinBoot+vue的茶叶商城系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
烛阴6 分钟前
不只是Public与Private:C#访问修饰符全方位解读
前端·c#
涔溪11 分钟前
Vue3常用的组合式API 超详细讲解
前端·javascript·vue.js
秋邱12 分钟前
AR + 离线 AI 实战:YOLOv9+TensorFlow Lite 实现移动端垃圾分类识别
开发语言·前端·数据库·人工智能·python·html
蜡笔小嘟12 分钟前
使用gemini 3 pro实现可视化大屏
前端·ai·gemini·gemini3peo
马玉霞17 分钟前
vue3很丝滑的table表格向上滚动效果,多用于统计页面
前端·vue.js
用户9520816117917 分钟前
百度地图JSAPI THREE Label 组件使用指南,轻松实现地图标签渲染
前端
SVIP1115922 分钟前
webpack入门 精细版
前端·webpack·node.js
畅畅畅哥哥22 分钟前
Next.js App Router 实战避坑:状态、缓存与测试
前端·前端框架
一水鉴天24 分钟前
整体设计 定稿 之20 拼语言表述体系之3 dashboard.html完整代码
java·前端·javascript