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

超链接/表格/表单的复习(课后作业)

1.作业1

提示:

标题在title中修改

百度logo是图片链接(img) 

新闻,贴吧是超链接,直接上官网cv

还有文本呢输入框

完成前端HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度仿真页面</title>
</head>

<body align="center">
    <p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></p>
    <p> 
        <a href="https://news.baidu.com/">新闻</a>
        <a href="https://map.baidu.com/@13047515,4707691,13z">地图</a>
        <a href="https://tieba.baidu.com/index.html">贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
        <a href="https://image.baidu.com/">图片</a>
        <a href="https://wenku.baidu.com/?fr=bdpcindex">文库</a>
        <a href="https://pan.baidu.com/disk/main?from=1026962h&_at_=1726381996098">网盘</a>
        <a href="https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22home_tab%22%7D">AI助手</a>
        <a href="https://www.baidu.com/more/">更多</a>
    </p>

    <input type="text" size="40px">
    <input type="button" value="百度一下">  <p></p>
    <p>问题反馈请<a href="">发送邮件</a></p>

</body>
</html>

显示的效果如下:

2.作业2

 

思考如何制作上面的表格

提示:

这里看似是只有一个表格,其实呢可以由很多个表格合并获得

但是要注意设置表格的宽度为一个值,这样显示的效果就是相当于一个表格了

完整代码如下:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第29届中国国际广告节会议注册表</title>

    <style>
        th, td {
            border: 1px solid #3498db; /* 更改这里的颜色值 */
            padding: 8px;
            text-align: center;
        }

    </style>

</head>

<body align="center" >
    <h1>第29届中国国际广告节会议注册表</h1>
    <form action="">
        <table align="center" border="1" width="800px">
            <!-- <caption>第29届中国国际广告节会议注册表</caption> -->
            <tr>
                <td>参赛者姓名</td>
                <td><input type="text"></td>
                <td>职务</td>
                <td><input type="text"></td>
            </tr>
    
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td>工作单位</td>
                <td><input type="text" size="100px"></td>
            </tr>
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td>电话</td>
                <td><input type="text"></td>
                <td>传真</td>
                <td><input type="text"></td>
                <td>手机</td>
                <td><input type="text"></td>
            </tr>
        </table>
            
        <table align="center" border="1" width="800px">
            <tr>
                <td>通讯地址</td>
                <td><input type="text"></td>
                <td>邮箱</td>
                <td><input type="text"></td>
            </tr>
    
            <tr>
                <td>E-mail</td>
                <td><input type="text"></td>
                <td>国家</td>
                <td>
                    <select name="" id="">
                        <option value="">中国</option>
                        <option value="">俄罗斯</option>
                        <option value="">法国</option>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>省份</td>
                <td>
                    <select name="" id="">
                        <option value="">天津</option>
                        <option value="">北京</option>
                        <option value="">江西</option>
    
                    </select>
                </td>
               <td>城市</td>
               <td><input type="text"></td>
            </tr>  
    
        </table>

        <table align="center" border="1" width="800px" height="80px">
            <tr>
                
                <td>会议费标准(人名币)</td>
            </tr>
            <caption></caption>
        </table>

        <table align="center" border="1" width="800px">
            <!-- <caption>会议费标准(人名币)</caption> -->
            <tr>
                <td>身份/时间</td>
                <td>2022年9月20日之前注册</td>
                <td>2022年9月20日之后注册</td>
               
            </tr>
    
            <tr>
                <td>中广协会会员</td>
                <td><input type="radio" name="r1">1500元</td>
                <td><input type="radio" name="r1">1800元</td>
            </tr>
    
            <tr>
                <td>非会员</td>
                <td><input type="radio" name="r1">1800元</td>
                <td><input type="radio" name="r1">2000元</td>
            </tr>
    
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td><input type="submit" style="background-color: aqua;">
                <input type="reset" style="background-color: aqua;"></input></td>
            </tr>
            
        </table>

        <table align="center" border="1" width="800px">
            <tr>
                <td><a href="">第29届中国国际广告节会议注册表下载</a></td>
            </tr>

        </table>
        
    </form>
    
   

</body>
</html>

显示的效果为:


http://www.kler.cn/news/308248.html

相关文章:

  • 蓝桥杯DS18B20程序源码
  • 【数据结构】4——树和森林
  • Mastering openFrameworks_第十一章_网络
  • 身份识别与服装类型检测系统源码分享
  • 基于微信小程序图书馆自习室座位预约小程序
  • USB组合设备——串口+鼠标+键盘
  • WPS生成目录
  • OpengGL教程(六)---坐标的变换和坐标系的变换
  • 文献多\bibliographystyle和文献少\begin{thebibliography}
  • 【JAVA】数据脱敏技术(对称加密算法、非对称加密算法、哈希算法、消息认证码(MAC)算法、密钥交换算法)使用方法
  • JUC学习笔记(二)
  • sed编辑器与awk的用法
  • 0917np.power()
  • 径向基函数神经网络RBFNN案例实操
  • 人工智能GPT____豆包使用的一些初步探索步骤 体验不一样的工作
  • 3GPP祝大家中秋快乐!!!
  • 数据结构,栈,队列(线性表实现)
  • 云服务与虚拟主机:数字时代的网络托管选择
  • 光华里社区“电亮生活”行动:智能科技携手志愿温情,老旧小区焕发新生机
  • 在docker环境下启动php的注意事项-docker完整挂载php目录、在Docker查看容器完整启动命令以及mysql ERROR 2059问题
  • win+linux平台C语言获取进程的线程数量
  • LeetCode 815.公交路线(BFS广搜 + 建图)(中秋快乐啊)
  • 从零到一:构建你的第一个AI项目(实战教程)
  • Python 数学建模——Pearson/Spearman 相关系数
  • easy-es动态索引支持
  • 数据库的约束
  • Java4----String
  • 【新片场-注册安全分析报告-无验证方式导致安全隐患】
  • c++元编程tookit类
  • 前端 + 接口请求实现 vue 动态路由