码迷,mamicode.com
首页 > Web开发 > 详细

web基础,用html元素制作web页面

时间:2017-10-17 12:45:32      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:链接   技术   sele   har   blog   enter   for   content   text   

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

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

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>

</head>
<body>
<h1>广州商学院</h1>
<h2 id="2015">2015</h2>
<div id="container"style="width: 400px">
    <div id="header"style="background-color: #FFA500":><h2 align="center "style="margin-bottom: 0">登录</h2></div>
    <div id="content"style="background-color: #EEEEEE;height:150px;width: 400px;float: left">
        <from action="">
            Username:<input type="text"name="user"placeholder="用户名"><br>
            Passward:<input type="password"name="password"><br>
            <input type="radio"name="role"value="stu">student
            <input type="radio"name="role"value="tea">teacher<br>

            <input type="checkbox"value="true"><span>记住我</span><a href="">登录遇到的问题</a><br>

            <input type="button"value="login"onclick="alert(‘登录验证‘)">
        </from>
    </div>
<div id="footer"style="background-color: #FFA500 "><i>版权@CNY</i></div>
</div>
<hr>
<div>
        <ul>
        <li>python</li>
        <li>html</li>
    </ul>
    <select>
        <option>收藏</option>
        <option>点赞</option>
        <option>评论</option>
    </select>
    <hr><br>
    <h3 id="学院介绍">学院介绍</h3>
    <d1>
        <dt><a href="http://site.gzcc.cn/">信息技术与工程学院</a> </dt>
            <dd><a href="http://site.gzcc.cn/html/xsgz/jsjxtw/">学院团学</a> </dd>
        <dt><a href="http://sfl.gzcc.cn/">外国语学院</a></dt>
            <dd><a href="http://sfl.gzcc.cn/html/xsyd/txfc/">学院团学</a> </dd>
    </d1>
    <hr><br>

</div>

<div id="container"style="width: 400px"></div>
 <a href="http://www.gzcc.cn/" >友情链接:广州商学院官网</a>

</body>
</html>

 

web基础,用html元素制作web页面

标签:链接   技术   sele   har   blog   enter   for   content   text   

原文地址:http://www.cnblogs.com/YyYyYy11/p/7680185.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!