html5网页页面布局代码 html网页布局怎么弄

转载

墨染青衫 2023-07-12 21:12:58

文章标签 html5网页页面布局代码 html 嵌套搜索引擎 a标签 文章分类 HTML5 移动开发

1.网站的三大优化标签

关键词
   <meta name="keywords" content="书写关键词用逗号隔开 " />
	关键描述
	<meta name="description" content="关键描述，建议不要超过120字 " />
	标题
	<title>网站标题 </title>

2.设置版心

通栏效果布局

指的就是一个盒子的宽度是根据电脑屏幕的宽度来改变；
一个100%宽度的父级盒子，高度固定，然后里面嵌套一个版心居中；
以后用的时候可以调用

.w{
  width:1200px;
  margin:0 auto;
}

3.nav导航部分

制作的步骤：
结构：一个大的div父级盒子嵌套ul，ul嵌套li，li嵌套a
css：设置li的宽高（宽度可能不固定），让li左浮动flaot:left;
设置li里面a的样式，转化为块元素display:block;,然后给a设置实体化宽高（如果宽度不固定就用padding撑开）；
最后给a设置相应的样式和鼠标经过之后a的样式；

导航栏默认用ul嵌套li，li嵌套a标签完成；
li嵌套a语义清晰；
如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；
友情链接类似的小导航可以直接用a链接完成；

4.logo部分

<div class="logo fl">
		            <h1>
		                <a href="javascript:;" title="淘宝">淘宝</a>
		            </h1>
		   </div>
	
		.header .logo a{
		    display: block;
		    width: 232px;
		    height: 83px;
		    background: url("../img/logo.png") no-repeat;
		    font-size:0px;
		    /*隐藏内容*/
		}

logo的写法规范