html和css制作静态网页练习，制作网页对象地址：https://www.dafanshu.com/yysp/11596.html

 网页布局结构分析

看了一下练习网页，大概是这样的布局结构，header、content、footer、sidebar

html和css制作静态网页练习笔记_css

默认设置

<head>
		<style type="text/css">
			body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td{
				    margin: 0;
    				padding: 0;
    				list-style-type: none;
			}
			body {
    		background: #f5f5f5;
    		display: block;
			}
			div {
				display: block;
				display: flex;
			}
		</style>
		
	</head>


先从header区域开始

html和css制作静态网页练习笔记_静态网页_02

html

	<div class="header">
    <div class="topbar">
        <div class="w1200">
            <ul class="toplinks">
                <li>大番薯,专业安全免费的软件下载网站</li>
            </ul>
            <div class="snav">
                <ul>
                </ul>
            </div>
        </div>
    </div>
    <div class="header-main w1200">
        <div class="logo"><a href="https://www.dafanshu.com/" title="大番薯" target="_self"></div>
        <div class="top-search" target="_blank">
            <input type="text" name="q" class="top-input msearchword" placeholder="请输入游戏名称">
            <input type="button" class="topsobar" onclick="funMSearch()" value="搜索">
        </div>
    </div>
    <div class="navbar">
        <ul class="nav">
            <li class=""><a href="#" target="_self">首页</a></li>
            <li class="active">
                <a href="#">手机游戏</a>
            </li>
            <li class="#">
                <a href="#">手机应用</a>
            </li>
            <li class="#">
                <a href="#">电脑软件</a>
            </li>
            <li><a href="#">专题合集</a></li>
            <li><a href="#">电脑常识</a></li>
            <li><a href="#">软件问题</a></li>
        </ul>
    </div>
</div>

css

/*header*/
			.header {
		    background: #FFF;
		    position: relative;
		    z-index: 999;
		    list-style-type: none;
		    margin: auto;
			}

菜鸡还没有写完，header部分就出问题了，先记录着。