html实战之一（利用html+css做一个静态页面）

Posted 2022-12-16 狂奔的CD

参照一般博客的样子，做了个超简易版，先秀一下样子

html1

很明显主体部分是三个模块，顶部左侧和右侧div

写的过程中客服的几个问题：

1.参照了w3school的样子，固定主体宽度，调整浏览器时，保持最小宽度
html
   width: 966px;
   background-color: #f9f9f9;
   margin: 0px auto;    //整体居中
  /* overflow: scroll;
   overflow-x: hidden;*/
  

2.顶部图片是个链接，并且撑到了最大
<div id="header_index">
<a href="index.html" title="w3school 在线教程">
<img src="http://img5.imgtn.bdimg.com/it/u=2769827889,3349501200&fm=21&gp=0.jpg" width="100%">
</a>
</div> 

3.左侧div的'我的分类'下部分是一个ul，这里css也调了好久，才打到w3school的类似对齐效果。做以下几个工作：

<div id="kind" >   
<h2>我的分类</h2>
<ul style="list-style:none">
<li><a href="index.html" title="文章">文章</a></li>
                <li><a href="imagescan.html" title="图片浏览">图片浏览</a></li>
<li><a href="index.html" title="分类3">分类3</a></li>
<li><a href="index.html" title="分类4">分类4</a></li>
<li><a href="index.html" title="分类5">分类5</a></li>
<li><a href="index.html" title="分类6">分类6</a></li>
<li><a href="index.html" title="分类7">分类7</a></li>
<li><a href="index.html" title="分类8">分类8</a></li>
<li><a href="index.html" title="分类9">分类9</a></li>
</ul>
</div>

//样式

去边距空格，不懂得可以打开chrome浏览器的开发者工具，看看右下角的这个图

*

margin:0;
padding:0;
border:0;

ul去掉点 <ul style="list-style-type:none">

li链接项设置样式  a:link代表未访问过链接   a:visited代表访问过的链接

a:link,a:visited
    text-decoration: none;   //无装饰
    color: #000;
  background: transparent;
     

设置行高字体等

li

font-family: Verdana, Arial, '宋体';
line-height: 21px;
font-size: 15px;
margin: 0;
padding: 0;
text-align: left;

4.正文部分不说了，就是左侧和右侧要设定宽，然后要在同一层，设置float得一起，不然可能很奇怪