网页练习一

首先，分析需要制作的这个网页分为上、中、下三大板块，而中间又分为左、右两个部分。

其次，在DW中使用<div>对每一个部分进行占位，然后再详细写每一部分。

同时，需要用css进行样式的编写和修改。

“上”板块所用到的知识及注意事项：

1.需要对div部分进行命名id（banner、menu），这样便于在css中修改样式

2.对图片的插入

<img src="images/banner.gif" alt="我的图片不见了" />

3.菜单栏需要链接另一个网页，使用<ul><li><a>等等

<ul>
            	<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">关于我</a></li>
            </ul>

“中”板块所用到的知识及注意事项：

1.一定要先划分左右两个区域，使用id（left、right）将其区分

2.修改css，使左右部分横向排排坐，而不是竖向

float:left;/*可以使div横向排排坐*/

3.要对span的用法熟悉，使小图标与名字在一排可以用span

<!--文字,span方便对文字的样式修改，一行，不换行-->
    <span><img src="images/girl.gif" alt="女孩"/>张梅</span>

4.右边部分也要分成上下两块，使用div进行划分

（1）上部分是“日志”

 <div id="list">
                	<h5 class="biaoti">>>日志</h5>
                    <ul>
                    	<li><a href="#">IMAX加长版《变形金刚》（Transformers）亲历简报 2007-09-25 </a></li>
                        <li><a href="#">《变形金刚》发烧友的看图说话（多图）    2007-09-22</a></li>
                        <li><a href="#">《反恐王国》（The Kingdom）：生猛的空心弹   2007-09-22</a></li>
                        <li><a href="#">《东方承诺》（Eastern Primises）：不动如山，暗流汹涌  2007-09-20</a></li>
                        <li><a href="#">《妖精的旋律》（Elfen Lied）：日式YY的经典案例   2007-09-20</a></li>
                    </ul>
                    </div>

（2）下半部分是相册

<div id="xiangce">
                    <h5 class="biaoti">>>相册</h5>
                    <ul>
                    	<div><img src="images/1.jpg" alt="我的照片"/></div>
                        <div><img src="images/2.jpg" alt="我的照片"/></div>
                        <div><img src="images/3.jpg" alt="我的照片"/></div>
                    </ul>
                </div>

※在“中”部分所遇到的问题：①如何将三张图片变成一样大小？②如何设置关于我下面的那条横线？

“下”板块所用到的知识及注意事项：

1.需要插入底部图片

2.需要在图片上写字，同时使其居中

 <div id="footer">
        <img src="images/footer.gif" alt="我的图片不见了" />
    		<span>临沂大学出品 @2019-04-01</span>            
    	</div>

#footer{
	background-color:#328048;
	height:40px;
	clear:both;/*清空其他的div的float的影响*/
}
#footer span{
	text-align:center;/*水平居中*/
	display:block;/*盒子模型，不然居中属性也不管用*/
	line-height:40px;/*垂直居中*/
}

 

转载于:https://my.oschina.net/u/4090404/blog/3035291