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="width: 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>

 

posted on 2017-10-17 21:25  137陈楚洪  阅读(106)  评论(0)  编辑  收藏  举报

导航