myblog制作

最新推荐文章于 2022-01-15 12:52:13 发布

Outp

最新推荐文章于 2022-01-15 12:52:13 发布

阅读量317

点赞数 1

本文链接：https://blog.csdn.net/weixin_42407013/article/details/89198012

版权

我完成的最后作品图片：

在这里插入图片描述
这是自己根据课上老师讲解的制作网页过程，以及参照老师在课上演示的代码完成的，感觉蛮有成就感的。
我制作网页的感觉：网页上的内容可以看成一块一块的，以块区划分区域，区域从上到下不够的就掉到下边去，
将网页看成一个大的box,再在里边划分成一块块小区域来排放东西。
见到这个网页之后，首先大致分解成三大部分：最上边导航以及图片，中间主要内容以及最后的footer。

分好块之后，可以用颜色区分有几块，以及怎么设置让他们按自己的想法排列好，比如：我先给一个网页大小（长宽要结合图片的大小，以及要放内容的多少来决定）box:

#box{
	/*background-color:#F00;颜色区分块*/
	width:950px;
	height:900px;
	margin:0 auto 0 auto;
}

接下来就是将box分割，首先给一个banner，然后在划分出menu、以及中间主题main，以及最下边的footer：

#banner{
	background-color:#66F;
	height:255px;
}

#menu{  
	height:50px;
	background-color:#FCEAA7;
}

#main{
	height:800px;
	width:950px;
}

#left{
	/*background-color:#0FC;*/
	height:700px;
	width:270px;
	float:left;/*可以使div横向排排坐*/
}

#right{
	/*background-color:#F3F;*/
	height:700px;
	width:680px;
	float:right;/*可以使div横向排排坐*/
}

#footer {
	height:55px;
	color:#3F9;	
}

然后就是从上到下，从左到右，把块填好。
banner以及footer设置图片很简单，有难度的在于menu以及中间left、right区域的操作，
menu 中需要用无序列表，然后设置列表之间的float以及适当间距让菜单栏完美显示：

#menu ul{
	list-style:none; 
	width:430px;
	height:50px;
	line-height:50px ;
 	float:left;
}

#menu ul li{
	float:left;
	margin-left:20px;
}

然后就是中间图片的排列过程中，我发现图片的大小的长宽都不是一致的，我发现可以用鼠标直接在Dreamweaver中放缩图片以及直接拖动图片，Dreamweaver会自动调整并且显示图片的长和宽。

再说一下日志的制作过程，本来是想着文章题目与右边的时间分成两个小块，后来发现给时间加一个标签，统一靠右排列就可以了。

在日志添加文字是用

、标签标记出来方便操作,还要注意对插入图片的处理：

#rizhi ul{
	/*width:400px;
	height:300px;
	display:block;*/
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#rizhi ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;
	margin-bottom:8px;
	background-image:url(images/ico4.gif);
	background-repeat:no-repeat;
	/*background-image:url(images/icon1.gif) ;
	background-repeat:repeat-x;*/
	background-position:left;/*背景点的位置*/
}

最后再说一下footer操作中

background-image:url(images/footer.gif);
	background-repeat:no-repeat;

如果不加最后一句，在网页中会在footer图片下边出现不止一个背景图片。

最后的最后附上HTML以及CSS完整的两个代码：
HTML:

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="myblog.css" type="text/css" rel="stylesheet" />
</head>
	
<body>
	<div id="box">
    <!--图片及导航菜单-->
    	<div id="banner">
        	<img src="images/banner.gif" alt="我的图片不见了">
        </div>
        <div id="menu">
        	<ul>
            	<li><a href="#">首页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </div>
        <!--中间主题部分-->
        <div id="main">
        	<!--左边部分-->
        	<div id="left">
        		<div id="myself">
                	<span>   >>关于我</span>
                    <img src="images/109395CF4-7.jpg" alt="我的图片不见了">
                    <div id="zhangmei">
                    	<img src="images/girl.gif" alt="小图标">张梅
                    </div>                    
                 </div> 
                 <div id="local">
                    	<span>重庆市 南岸区</span>
                 </div> 
                 <div id="word"> 
                 <p>天微明，冬天的光透过窗，印在左手的无名指上。 回忆的颜色是透明的冷，于是，用窗口透入的薄薄的光暖一暖心。</p>
                 </div>
       	 	</div>
            <!--右边部分-->
        	<div id="right">
        		<div id="rizhi">
                	<h5 class="rizhi">>>日志</h5>
                    <ul>
                    	<li><a href="#">IMAX加长版《变形金刚》（Transformers）亲历简报 <span>2007-09-25</span>  </a></li>
                        <li><a href="#">《变形金刚》发烧友的看图说话（多图）   <span> 2007-09-22</span></a></li>
                        <li><a href="#">《反恐王国》（The Kingdom）：生猛的空心弹  <span> 2007-09-22</span></a></li>
                        <li><a href="#">《东方承诺》（Eastern Primises）：不动如山，暗流汹涌  <span>2007-09-20</span></a></li>
                        <li><a href="#">《妖精的旋律》（Elfen Lied）：日式YY的经典案例   <span>2007-09-20</span></a></li>
                    </ul>
                </div>
                <div id="xiangce">
                	<h5 class="rizhi">>>相册</h5>
                    <div id="pho">
                   	<img src="images/1.jpg" alt="呵呵" width="220""150" height="304" width:> <img src="images/2.jpg" alt="hh" width="208""130" height="304" width:> <img src="images/3.jpg" alt="jkl" width="213""135" height="304" width:></div>
                    <div id="second"></div>
                    <div id="third"></div>
                    
              </div>
        	</div>
        </div>
        
        <div id="footer">
        	<span>BLOG公司版权所有 1997-2010</span>
        </div>
        </div>
    </div>
    
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}

#box{
	/*background-color:#F00;*/
	width:950px;
	height:900px;
	margin:0 auto 0 auto;
}

#banner{
	background-color:#66F;
	height:255px;
}

#menu{  
	height:50px;
	background-color:#FCEAA7;
}

#menu ul{
	list-style:none; 
	width:430px;
	height:50px;
	line-height:50px ;
 	float:left;
}

#menu ul li{
	float:left;
	margin-left:20px;
}

#menu a{
	color:#236735;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

#menu a:hover{/*当鼠标滑过超链接标签时的样式*/
	color:#F00;
}

#main{
	height:800px;
	width:950px;
}

#left{
	/*background-color:#0FC;*/
	height:700px;
	width:270px;
	float:left;/*可以使div横向排排坐*/
}

#myself span{
	margin:8px;
	display:block;
	border-bottom:1.5px #5D2533 solid;
	font-size:16px;
	padding-top:5px;
	/*padding-bottom:5px #333;*/
}

#myself img{
	padding-left:15px;	
}

#zhangmei img{
	padding-left:100px;	
}

#local span{
	margin:10px;
	display:block;
	border-top:10px;
	font-size:16px;
	padding-left:68px;
}

#word p{
	margin:10px;
	display:block;
	border-top:10px;
	color:#C06;
	font-size:16px;	
}

#right{
	/*background-color:#F3F;*/
	height:700px;
	width:680px;
	float:right;/*可以使div横向排排坐*/
}

.rizhi{
	margin:8px;
	display:block;
	border-left:50px;
	background-color:#CBCC9A;
	color:#333;
	font-size:18px;
	padding-top:5px;
	padding-bottom:5px;
	font-weight:bold;
}

#rizhi ul{
	/*width:400px;
	height:300px;
	display:block;*/
	list-style:none;
	padding-left:20px;
	padding-top:10px;
}

#rizhi ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;
	margin-bottom:8px;
	background-image:url(images/ico4.gif);
	background-repeat:no-repeat;
	/*background-image:url(images/icon1.gif) ;
	background-repeat:repeat-x;*/
	background-position:left;/*背景点的位置*/
}

#rizhi ul li span{
	float:right;
}

#rizhi a:hover{
	color:#F03;
}

#rizhi ul li a{
	text-decoration:none;
	color:#333;
	font-size:14px;	
	
}

.xiangce{
	margin:8px;
	display:block;
	border-left:50px;
	background-color:#CBCC9A;
	color:#333;
	font-size:18px;
	padding-top:5px;
	padding-bottom:5px;
	font-weight:bold;
}

#footer {
	height:55px;
	color:#3F9;	
}

#footer span{
	text-align:center;
	display:block;
	color:#000;
	line-height:80px;
	background-image:url(images/footer.gif);
	background-repeat:no-repeat;
	
}