当前位置: 首页 > article >正文

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>

 

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


http://www.kler.cn/a/377497.html

相关文章:

  • Unity中实现伤害飘字或者提示飘字效果(DoTween实现版本)
  • qt QDragEnterEvent详解
  • 无人机之中继通信技术篇
  • 高德地图美食
  • H265编码丢帧问题分析
  • C#-类:声明类、声明类对象
  • [NOIP2008 普及组] 排座椅
  • 【Redis:原理、架构与应用】
  • 中阳量化交易模型的探索与发展:科技引领金融未来
  • 东方娱乐周刊
  • 注册页面设计(表单基础)
  • 【机器学习】机器学习与成像技术:开启智能视觉的新篇章
  • Zypher Research:服务器抽象叙事,GameFi 赛道的下一个热点?
  • openssl-ecparam 命令手册
  • LeetCode (206单链表反转)
  • React + Vite + TypeScript + React router项目搭建教程
  • 以客户为导向在开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序内容创作中的实践与价值
  • 【缓存与加速技术实践】NoSQL之Redis部署安装与基础命令
  • 【LwIP源码学习4】主线程tcpip_thread
  • 1011:甲流疫情死亡率
  • 【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
  • 地平线 3D 目标检测 bev_sparse 参考算法-V1.0
  • TOEIC 词汇专题:饭店住宿篇
  • Docker篇(基础命令)
  • 【ChatGPT】让ChatGPT在回答中附带参考文献与来源
  • 淘宝 API 多语言接入:释放技术开发新潜力