页面效果如图：
页面元素主要有：页面布局定位float,表单form,input,select(下拉菜单)，option,链接a,CSS样式设计
代码实现为：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>烤橘世界</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
            font-size: 22px;
            padding: 5px;
        }
        a:hover{
            color: skyblue;
        }
        #conters{
            margin: 0 auto;
            width: 1500px;
            height: 2000px;
            text-align: center;
        }
        #header{
            width: 1500px;
            height: 50px;
            font:40px '幼圆';
            color: pink;
            text-align:center; 
            }
            #nav{
                width: 1500px;
                height: 60px;
                border-color: blue;
            }
            #main{
                width: 1500px;
                height: 500px;
            }
            .aside{
                height: 500px;
                float: left;
            }
            #aside1{
                width: 200px;
                background-color:skyblue;
            }
            #aside2{
                width: 300px;
            }
            #content{
                width: 1000px;
                height: 500px;
                background-color: orange;
                float: left;
                text-align: justify;
                color: green;
                font-size: 12px;
            }
            #menu1{
                width: 1000px;
                height: 200px;
                background-color: blue;
                float: top;
            }
            #menu2{
                width: 1000px;
                height: 300px;
                background-color: grey;
                float: top;
            }
            #set{
                color: purple;
            }
            p{
                color: purple;
                font-size: 18px;
                text-align: center;
            }
            #qian{
                width: 200px;
                height: 200px;
            }
            #game{
                width: 200px;
                height: 300px;
                background-color: orange;
            }
            #side1{
                width: 200px;
                height: 350px;
                text-align: center;
                background-color: skyblue;
                border-color: blue;
            }
            #side2{
                width: 200px;
                height: 150px;
                background-color: lavender;

            }
            #footer{
                width: 1400px;
                background-color: yellow;
            }
    </style>
</head>
<body>
    <div id="conters">
        <div id="header">
            欢迎来到烤橘新世界
            <hr>
        </div>
        <div id="nav">
            <a href="#">停驻小屋</a>
            <a href="#">悠悠乐园</a>
            <a href="#">哈啤阔落</a>
            <a href="#">惊恐呆呆</a>
            <a href="#">冰爽小咖</a>
            <a href="#">烤橘还在加载...</a><br />
            <form >
                <input type="text" align="center">
                <input type="submit" value="search">
           </form>
        </div>
        <div id="main">
            <div id="aside1" class="aside">
                <div id="qian">
                <p>这里是咨询前台嗷~</p><br>
                <h6>请在下面选择栏里选择你的需要</h6>
                <select id="set">
                        <option checked="checked">请选择</option>
                        <option>停驻小屋</option>
                        <option>悠悠乐园</option>
                        <option>哈啤阔落</option>
                        <option>惊恐呆呆</option>
                        <option>冰爽小咖</option>
                    </select>
                </div>
                <div div="game">
                    <p>这里是游戏天地</p>
                    <form>
                        <input type="text">
                        <input type="submit" value="搜索">
                </div>

            </div>
            <div id="content">
                <div id="menu1">
                    <p style="font-size: 18px; color: skyblue; font-style: italic;line-height: 2em; text-align: center;">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sit sunt repudiandae ullam minima deserunt doloremque illum perferendis excepturi velit ea earum quod autem, labore animi necessitatibus facere expedita a.
                    </p>
                    
                </div>
                <div id="menu2">
                    <p style="text-align: left; font-style: italic; font-size: 30px;">~··~简单小助~··~</p><br />
                    <hr />
                    <a href="http://baidu.com.cn" style="color: purple; font-size: 20px;">百度</a><br />
                    <a href="#" style="color: purple; font-size: 20px;">新浪</a><br />
                    <a href="#" style="color: purple; font-size: 20px;">中文网</a><br />
                    <a href="#" style="color: purple; font-size: 20px;">慕课</a><br />
                    <a href="#" style="color: purple; font-size: 20px;">腾讯课堂</a><br />
                    <a href="#" style="color: purple; font-size: 20px;">语言网</a><br />
                </div>
            </div>
            <div id="aside2" class="aside">
                 <div id="side1">
                     <form>
                         账号：<input type="text"><br />
                         密码：<input type="password"><br />
                         <input type="submit" value="提交">
                         <input type="reset" value="重置">
                     </form>
                 </div>
                 <div id="side2">
                     <h3>小橘还在努力思考嗷....</h3>
                 </div>
            </div>
            
        </div>
        <div id="footer">
            <p>明明这里是页脚呀</p>
        </div>
        
    </div>
    
</body>
</html>
posted on 2020-04-01 19:03 烤橘阅读(119) 评论(0) 收藏举报
刷新页面返回顶部
公告
