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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#eee8aa">
 <div  id="container" style="width:400px;margin:0px auto;" >
     <div id="header" style="background-color:dimgray"><h2 align="center" style="margin-bottom: 0;"><font face="华文彩云" color="white" size="10" >Login </font></h2></div>
         <div id="content" style="background-color:white;width:400px;float:left;line-height:40px;">
             <form action=""><p></p>
             Username:<br><input type="text" style="border-radius: 8px;height: 20px;width: 350px" name="user" PLACEHOLDER="username"><br>
             Password:<a href="http://www.baidu.com"><font size="2" color="tomato"style="float: right" >Forgot your password?</font> </a>
                <br><input type="password" style="border-radius: 8px;height: 20px;width: 350px;" name="password" PLACEHOLDER="password"><br>
                <div id="content" style="background-color:dimgray;width:400px;float:left;line-height:40px;">
                    <input type="checkbox" value="Keep me logged in">Keep me logged in<br>
                    <input type="button" style="border-radius: 5px;background-color: seashell;height: 30px;width: 200px;margin-right: 10px;float: right"value="Login ">
                 </div>
           </form>

         </div>

         <div id="footer" style="background-color:darkslategray;clear:both;text-align:center;">版权 ． duym</div>
 </div>

<div  id="container" style="width:400px;margin:0px auto;" >
         <div id="header" style="background-color:palevioletred"><h2 align="center" style="margin-bottom: 0;">搜索 </h2></div>
         <div id="content" style="background-color:lightgray;width:400px;float:left;line-height:40px;">
            <select>
                <option value="" style="color: #c2c2c2;">---请选择---</option>
                <option>学生</option>
                <option>教师</option>
                <option>校友</option>
                <option>考生</option>
            </select>
             　<ul>
             <li>专业与课程建设</li>
             <li>人才培养方案</li>
         </ul>
             <ol>
                 <li>教研室建设</li>
                 <li>教学通讯</li>
             </ol>
         </div>
         <div id="footer" style="background-color:palevioletred;clear:both;text-align:center;">版权 ． duym</div>
 </div>
</body>
</html>

 

posted @ 2017-10-13 14:49  078刘凯敏  阅读(143)  评论(0)  编辑  收藏  举报