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>

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

相关推荐
浩宇软件开发1 分钟前
JavaScript 数组常用方法 find, findIndex, filter, map, flatMap, some
前端·javascript·vue.js
一涯11 分钟前
关于富文本\n处理
前端
鸿蒙小林11 分钟前
《仿盒马》app开发技术分享-- 回收订单状态修改与展示(44)
前端
前端Hardy23 分钟前
前端性能飞跃!9大高级API实战指南,80%的开发者只知其三
前端·javascript
喻衡深29 分钟前
解锁 TypeScript 魔法:递归类型实现字段路径自动推导
前端·typescript
curdcv_po33 分钟前
🏆有奖竞猜快问快答:请问?什么时候用web worker???
前端
陶甜也1 小时前
threejs 实现720°全景图,;两种方式:环境贴图、CSS3DRenderer渲染
前端·vue.js·css3·threejs
上单带刀不带妹1 小时前
解锁 JavaScript 模块化:ES6 Module 语法深度指南
开发语言·前端·javascript·es6
Kier1 小时前
🚀 前端实战:优雅地实现一个通用Blob文件下载方法
前端·javascript·axios
前端Hardy1 小时前
从生活场景学透 JavaScript 原型与原型链
前端·javascript