zoukankan      html  css  js  c++  java
  • web基础,用html元素制作web页面

    观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。

    用div,form制作登录页面,尽可能做得漂亮。

    练习使用下拉列表选择框,无序列表,有序列表,定义列表。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HSIANG</title>
    </head>
    <body>
    <a>
    <h1 align="center">你好</h1>
    <h2>制作年份2017</h2>
        <a href="https://hao.360.cn/"target="_blank"><h2>网址推荐</h2></a>
    <hr>
    
    </a>
    <h1>网址推荐系统</h1>
    
    <div id="container" style=" 300px">
    <div id="header" style="background-color:saddlebrown"><h2 align="center">登陆界面</h2></div>
    <div id="content">
        <form>
    用户名:<input type="text" placeholder="请输入账号"><br>
             密码&nbsp:<input type="password" placeholder="请输入密码">
            <br>
            <input type="radio" value="stu">开发者
            <input type="radio" value="tea">用户
    <br>
            <input type="checkbox" value="true">记住账号
            <a href="">忘记密码</a>
            <br>
           <p align="center"> <input type="button" value="登陆"> </p>
    
    
    
    </form>
    </div>
    
    <div id="footer" style="background-color: darkmagenta"><h3 align="center">版权@003蒋宇翔</h3></div>
           <p align="center">
            <select>
            <option>收藏</option>
            <option>点赞</option>
            <option>评论</option>
    
        </select>
           </p>
        <ul>
            <li>百度</li>
            <li>360</li>
            <li>搜狐</li>
    
        </ul>
        <ol>
             <li>百度</li>
            <li>360</li>
            <li>搜狐</li>
        </ol>
           <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2539922263,2810970709&fm=200&gp=0.jpg" width="200" height="200" >
     </div>
    
    </body>
    </html>

  • 相关阅读:
    LODOP设置打印份数及是否逐份输出
    LODOP中table自动分页补线加border
    PS弧形边缘的去黑色背景色
    【解决篇】映美FP-530K+打印发票卡纸,色带安装问题
    LODOP打印项水平居中
    C-LODOP的端口和网站的端口
    java---interrupt、interrupted和isInterrupted的区别
    java------守护线程与非守护线程
    java----EL表达式
    java----IO和NIO的区别
  • 原文地址:https://www.cnblogs.com/cch-1007/p/7683990.html
Copyright © 2011-2022 走看看