HTML和CSS练习对象网页：https://www.dafanshu.com/kpyx/9985.html
一、分析布局
布局分析如下
二、创建html文件，默认设置
<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;
font-family: '微软雅黑';
list-style-type: none;
}
body {
background: #f5f5f5;
display: block;
}
div {
display: block;
display: flex;
}
</style>
</head>
## 三、header区域
样式
/*header区域*/
.header {
background: #FFF;
position: relative;
z-index: 999;
list-style-type: none;
margin: auto;
}
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>
未完待续
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
