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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>

</head>
<body bgcolor="#7fff00">
<h2>你好，欢迎你来参观我的网页 </div>
</h2>
　　　<div  id="container" style="width:400px " >
    <div id="header" style="background-color:#ff889a;"><h2 align="center" style="margin-bottom:0;">登录</h2></div>

    <div id="content" style="background-color:#72d0ee;height:150px;width:400px;float:left;text-align:center;">
        <from>
           <br><img src="http://static.mengniang.org/common/thumb/c/c3/User_user.png/300px-User_user.png" width="20" height="20" ><input type="text" name="text" name="Username"placeholder="请输入用户名" style="background-color:pink">
           <br><img src="http://image.tupian114.com/20140416/13493678.png" width="20" height="20" ><input type="password" placeholder="请输入密码" style="background-color:pink"><br><input type="radio">student
           <input type="radio">teacher
            <br><input type="button" color="pink" value="Login"style="background-color:#ff8ffb;Font-size:30px ;width: 300px; height: 40px;";>
        </from>
    </div>
    <div id="footer" style="background-color:#ff49b0;clear:both;text-align:center;">版权 © duym</div>
</div>
<div id="container"style="width:400px">
    <div id="header" style="background-color:#ffa6e3;"><h2 align="center" style="margin-bottom:0;">搜索</h2></div>
 <div id="content" style="background-color:#57aaee;height:180px;width:400px;float:left;">
     <form>
         <select>
             <option>语文</option>
             <option>数学</option>
             <option>英语</option>
             <option>化学</option>
             <option>物理</option>
         </select>
     </form>
<br><ol>
     <li>html</li>
     <li>python</li>
 </ol>
<ul>
    <li>html</li>
    <li>python</li>
</ul>
</div>
 <div id="footer" style="background-color:#ff49b0;clear:both;text-align:center;">版权 © duym</div>
　　<div  id="container" style="width:400px " >
    <div id="header" style="background-color:#ff889a;"><h2 align="center" style="margin-bottom:0;">广州商学院</h2></div>

    <div id="content" style="background-color:#ee7453;height:150px;width:400px;float:left;">
        <d1>
            <dt>学校概况</dt>
            <dd>年级</dd>
            <dd>学院</dd>
            <dt>学校环境</dt>
            <dd>饭堂</dd>
            <dd>教学楼</dd>

        </d1>
    <div id="footer" style="background-color:#ff49b0;clear:both;text-align:center;">版权 © duym</div>
</div>
                <
</body>
</html>

posted @ 2017-10-13 15:12  爱学习的土豆  阅读(151)  评论(0)    收藏  举报